recursal/MDN huggingface dataset:
Contrôle à la souris
====================

* « Précédent
* Suivant »

C'est la **9e étape sur** 10 de ce tutoriel Gamedev Canvas (en-US). Vous pouvez trouver le code source tel qu'il devrait être après avoir terminé cette leçon à l'adresse Gamedev-Canvas-workshop/lesson9.html.

Le jeu lui-même est en fait terminé, alors travaillons à le peaufiner. Nous avons déjà ajouté des commandes au clavier, mais nous pourrions facilement ajouter des commandes à la souris.

Détecter les mouvements de la souris
------------------------------------

Il est encore plus facile de détecter les mouvements de la souris que les pressions sur les touches : il suffit d'écouter l'évènement `mousemove`. Ajouter la ligne suivante au même endroit que les autres écouteurs d'événement, juste en dessous de `l'évènement keyup` :


```js
document.addEventListener("mousemove", mouseMoveHandler, false);
```

Lier le mouvement de la raquette au mouvement de la souris
----------------------------------------------------------

Nous pouvons mettre à jour la position de la raquette en fonction des coordonnées du pointeur — c'est exactement ce que fera la fonction de manipulation suivante. Ajoutez la fonction ci-dessous à votre code, sous la dernière ligne que vous avez ajoutée :


```js
function mouseMoveHandler(e) {
  var relativeX = e.clientX - canvas.offsetLeft;
  if (relativeX > 0 && relativeX < canvas.width) {
    paddleX = relativeX - paddleWidth / 2;
  }
}
```


Dans cette fonction, nous calculons d'abord une valeur `relativeX`, qui est égale à la position horizontale de la souris dans la fenêtre de visualisation (`e.clientX`) moins la distance entre le bord gauche de la toile et le bord gauche de la fenêtre de visualisation (`canvas.offsetLeft`) — en fait, cette valeur est égale à la distance entre le bord gauche du canevas et le pointeur de la souris. Si la position relative du pointeur X est supérieure à zéro et inférieure à la largeur du canevas, le pointeur se trouve dans les limites du canevas, et la position `paddleX` (ancrée sur le bord gauche de la palette) est fixée à la valeur `relativeX` moins la moitié de la largeur de la palette, de sorte que le mouvement sera en fait relatif au milieu de la raquette.

La raquette suivra désormais la position du curseur de la souris, mais comme nous limitons le mouvement à la taille du canevas, elle ne disparaîtra pas complètement d'un côté ou de l'autre.

Comparez votre code
-------------------

Voici le code final du chapitre, à vous de vérifier et de le tester pour voir si il y a des différences.

Exercice : ajustez les limites du mouvement de la raquette, de sorte que la raquette entière soit visible sur les deux bords du canevas au lieu de seulement la moitié.

Prochaine étape
---------------

Maintenant que nous avons un jeu complet, nous allons terminer notre série de leçons avec quelques petites retouches supplémentaires — Finitions (en-US).

* « Précédent
* Suivant »
asm.js
======

Asm.js Asm.js est une spécification définissant un sous-ensemble de JavaScript hautement optimisé. Cet article examine exactement ce qui est permis dans le sous-ensemble asm.js, quelles améliorations il confère, où et comment vous pouvez l'utiliser, et d'autres ressources et exemples.

Qu'est ce que asm.js, exactement?
---------------------------------

C'est un sous-ensemble très petit et strict de JavaScript qui ne permet que des choses comme `while`, `if`, les nombres, les fonctions nommées de haut niveau et d'autres constructions simples. Cela n'autorise pas les objets, les chaînes, les fermetures, et tout ce qui nécessite une allocation de tas. Le code Asm.js ressemble à C de plusieurs façons, mais il reste toujours un JavaScript valide dans tous les moteurs actuels. Il pousse les moteurs JS à optimiser ce type de code et donne aux compilateurs comme Emascript une définition claire de ce type de code à générer. Nous allons montrer à quoi ressemble le code asm.js et expliquer comment il aide et comment vous pouvez l'utiliser.

Ce sous-ensemble de JavaScript est déjà très optimisé dans de nombreux moteurs JavaScript utilisant des techniques de compilation Just-In-Time (JIT). Cependant, en définissant une norme explicite, nous pouvons travailler sur l'optimisation de ce type de code encore plus et obtenir autant de performance que possible. Il est plus facile de collaborer sur plusieurs moteurs JS car il est facile de parler et de comparer. L'idée est que ce type de code devrait fonctionner très rapidement dans chaque moteur, et si ce n'est pas le cas, c'est un bug et il existe une spécification claire pour laquelle les moteurs devraient optimiser.

Il permet également aux personnes d'écrire des compilateurs qui souhaitent générer un code performant sur le Web. Ils peuvent consulter la spécification asm.js et savoir qu'ils fonctionneront rapidement s'ils adhèrent aux modèles asm.js. Emscripten, du C / C ++ au compilateur JavaScript, émet le code asm.js pour le faire fonctionner avec des performances proches natives sur plusieurs navigateurs.

En outre, si un moteur choisit de reconnaître spécialement le code asm.js, il existe encore plus d'optimisations qui peuvent être réalisées. Firefox est le seul navigateur à le faire maintenant.

Résumé du langage asm.js
------------------------

Asm.js est un langage de programmation intermédiaire. Asm.js a un taux de performance très prévisible car il est limité à un sous-ensemble de JavaScript extrêmement restreint qui ne fournit que des entiers, des flotteurs, des arithmétique, des appels de fonction et des accès à la pile strictement typés. Les caractéristiques de performance sont plus proches du code natif que celui du JavaScript standard. L'utilisation d'un sous-ensemble de JavaScript asm.js est déjà prise en charge par les principaux navigateurs Web. Comme asm.js s'exécute dans un navigateur, cela dépend fortement du navigateur et du matériel.
Scripts asynchrones pour asm.js
===============================

Chaque jeu moyen ou volumineux doit compiler le code asm.js dans le cadre d'un script asynchrone afin de donner au navigateur le maximum de flexibilité pour optimiser le processus de compilation.

Dans Gecko, la compilation asynchrone permet au moteur JavaScript de compiler l'asm.js en dehors du fil d'exécution principal lors du chargement du jeu et de mettre en cache le code machine généré afin que le jeu n'ait pas besoin d'être compilé lors des chargements suivants (à partir de Firefox 28) . Pour voir la différence, basculez `javascript.options.parallel_parsing` dans `about:config`.

Passer à la compilation asynchrone
----------------------------------

Obtenir une compilation asynchrone est facile : lors de l'écriture de votre JavaScript, utilisez simplement l'attribut `async` comme suit :


```html
<script async src="file.js"></script>
```


ou, pour faire la même chose via un script :


```js
const script = document.createElement("script");
script.src = "file.js";
document.body.appendChild(script);
```


(Les scripts créés à partir du script par défaut sont `async`.) Le shell HTML par défaut généré par Emscripten produit ce dernier.

Attention aux `async` en réalité synchrones
-------------------------------------------

Il existe deux situations courantes où un script n'est \*pas\* asynchrone malgré l'utilisation d'`async` ou du chargement d'un script (voir la spécification HTML à ce sujet) :


```html
<script async>
 code;
</script>
```


et


```js
const script = document.createElement("script");
script.textContent = "code";
document.body.appendChild(script);
```


Les deux sont comptés comme des scripts « en ligne » (*inline*) et sont compilés puis exécutés immédiatement.

Que faire si votre code est dans une chaîne de caractères JavaScript ? Au lieu d'utiliser `eval()` ou `textContent`, qui déclenchent tous deux une compilation synchrone, privilégiez un blob avec une URL d'objet :


```js
const blob = new Blob([codeString]);
const script = document.createElement("script");
const url = URL.createObjectURL(blob);
script.onload = script.onerror = () => URL.revokeObjectURL(url);
script.src = url;
document.body.appendChild(script);
```


Dans ce dernier exemple, c'est l'utilisation de `src` plutôt que de `innerHTML` qui rend le chargement du script asynchrone.
Building up a basic demo with PlayCanvas
========================================

**PlayCanvas** est un populaire moteur 3D WebGL de jeu, originellement concu par Will Eastcott et Dave Evans. Il est disponible en open-source sur GitHub, avec un éditeur en ligne et une bonne documentation. L'éditeur en ligne est gratuit pour les projets publics avec jusqu'à deux membres d'équipe, mais il y a aussi des plans payants si vous vous lancez dans un projet commercial privé avec plus de développeurs.

![Site PlayCanvas](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/playcanvas-cover.png)

Jeux et Démos
-------------

PlayCanvas a publié quelques démos populaires présentant ses fonctionnalités.

* Tanx est un jeu de char multijoueur dans lequel vous pouvez conduire votre char, en tirant sur d'autres joueurs au fur et à mesure.
* Swooop est un jeu de vol où vous pilotez votre avion autour d'une île magique tout en collectant des bijoux et du carburant.
* Des visualisations comme the Star Lord et BMW i8 mettent également en valeur les possibilités du moteur.

![](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/playcanvas-demos.png)

**Note :** Consultez la liste des démos pour trouver plus d'exemples.

Moteur vs Éditeur
-----------------

Le moteur peut lui même être utilisé comme une bibliotheque standard en incluant directement ses fichiers JavaScript dans votre code HTML, vous permettant de commencer à coder instantanémment. De plus l'ensemble d'outils de PlayCanvas s'accompagne d'un éditeur en ligne vous permettant d'ajouter des éléments à la scène par glisser déposer — un formidable mode de création de jeux et autres applications nécessitant des scènes si vous êtes meilleur designer que codeur. Ces approches sont différentes mais se valent dans l'atteinte des objectifs.

Moteur PlayCanvas
-----------------

Conçu pour les navigateurs modernes, PlayCanvas est un moteur de jeu 3D complet intégrant le chargement de ressources, un système d'entité et de composants, une manipulation avancée des graphismes, un moteur de collision et de physique (conçu avec ammo.js), la gestion du son et des simplifications pour la gestion des entrées de nombreux dispositifs (y compris les manettes de jeu). C'est une liste assez impressionnante de sonctionnalités — observez-en quelques-unes en action en consultant la rubrique Conception d'une démo de base avec PlayCanvas (en-US) pour plus de détails.

Éditeur PlayCanvas
------------------

Au lieu de tout coder à parir de zéro, vous pouvez également utiliser l'éditeur en ligne. Cela peut être un environnement de travail plus agréable si vous n'êtes pas très orienté codage. Voici la construction d'une démo de base avec l'éditeur de PlayCanvas (en-US) pour plus de détails.

Résumé
------

Votre approche sera déterminante. Les designers préféreront utiliser l'éditeur en ligne alors que les programmeurs voudront avoir le contrôle total de l'environnement de codage et utiliseront probablement les fichiers source du moteur. Ce qui est intéressant est que vous êtes libre dans le choix des outils vous convenant le mieux.
Understanding client-side web development tools
===============================================

Les outils côté client peuvent être intimidants, mais cette série d'articles vise à illustrer le but de certains des types d'outils côté client les plus courants, à expliquer les outils que vous pouvez enchaîner, comment les installer à l'aide de gestionnaires de packages et les contrôler à l'aide de la ligne de commande. Nous terminons en fournissant un exemple complet de chaîne d'outils vous montrant comment devenir productif.

Conditions prérequises
----------------------

Vous devez vraiment apprendre les bases des langages HTML, CSS, et JavaScript avant d'essayer d'utiliser les outils détaillés ici.

Guides
------

Vue d'ensemble de l'outillage côté client (en-US)

Dans cet article, nous vous proposons un aperçu des outils Web modernes, des types d'outils disponibles et de l'endroit où vous les rencontrerez dans le cycle de vie du développement d'applications Web, et comment trouver de l'aide sur des outils individuels.

Cours intensif en ligne de commande

Dans votre processus de développement, vous devrez sans aucun doute exécuter une commande dans le terminal (ou sur la "ligne de commande" - ce sont en fait la même chose). Cet article fournit une introduction au terminal, les commandes essentielles que vous devrez y saisir, comment enchaîner des commandes et comment ajouter vos propres outils d'interface de ligne de commande (CLI).

Principes de base de la gestion des paquets (en-US)

Dans cet article, nous examinerons en détail les gestionnaires de paquets pour comprendre comment nous pouvons les utiliser dans nos propres projets - pour installer les dépendances des outils de projet, les maintenir à jour, etc.

Introduction d'une chaîne d'outils complète (en-US)

Dans les deux derniers articles de la série, nous solidifierons vos connaissances en matière d'outillage en vous guidant tout au long du processus de création d'un exemple de chaîne d'outils d'étude de cas. Nous irons de la mise en place d'un environnement de développement sensible et de la mise en place d'outils de transformation au déploiement effectif de votre application sur Netlify. Dans cet article, nous allons présenter l'étude de cas, configurer notre environnement de développement et configurer nos outils de transformation de code.

Déployer notre application (en-US)

Dans le dernier article de notre série, nous prenons l'exemple de chaîne d'outils que nous avons construit dans l'article précédent et nous l'ajoutons afin de pouvoir déployer notre exemple d'application. Nous poussons le code sur GitHub, le déployons à l'aide de Netlify et vous montrons même comment ajouter un test simple au processus.
Fonctionnalités de performances liées à HTML
============================================

* Précédent  (en-US)
* Aperçu : Performance
* Suivant

HTML est par défaut rapide et accessible. Il est du devoir de toute personne développant des sites web et des applications de s'assurer que ces deux caractéristiques sont préservées lors de la création ou de la modification de code HTML. Des difficultés peuvent apparaître par exemple lorsque la taille de fichier d'un élément `<video>` est trop importante, ou lorsqu'une page web n'est pas optimisée pour les appareils mobiles. Ce module a pour but de présenter les fonctionnalités clés de HTML qui sont liées aux performances, et qui peuvent améliorer drastiquement la qualité de vos pages web.

|  |  |
| --- | --- |
| Prérequis : | 
 Bases de l'informatique,
 logiciels de base
 installés et connaissances de base
 des technologies web opérant côté client.
  |
| Objectifs : | 
 En savoir davantage sur l'impact des éléments et attributs HTML le
 l'optimisation des performances pour le web.
  |

Éléments & attributs ayant un impact sur les performances
---------------------------------------------------------

* L'élément `<picture>`
* L'élément `<video>`
* L'élément `<source>`
* L'élément et l'attribut `<img> srcset`
    + Images adaptatives
* Préchargement du contenu avec `rel="preload"` - (https://w3c.github.io/preload/ - en anglais)
* Attributs `async` / `defer`
* L'élément `<iframe>`
* L'élément `<object>`
* L'élément `<script>`
* L'attribut `rel`
Conclusion
----------

* Précédent  (en-US)
* Aperçu : Performance
* Suivant
Voir aussi
----------

* L'élément `<picture>`
* L'élément `<video>`
* L'élément `<source>`
* L'attribut `srcset` de l'élément `<img>`
    + Images adaptatives
* Préchargement du contenu avec `rel="preload"`
* (https://w3c.github.io/preload/ - en anglais)
Apprendre à utiliser CSS pour résoudre des problèmes
====================================================

Les liens suivants pointent vers des solutions aux problèmes courants que vous devrez résoudre avec CSS.

Scénarios fréquents
-------------------

### Bases

* Comment appliquer CSS au HTML
* Comment utiliser les espaces en CSS
* Comment écrire des commentaires en CSS
* Comment sélectionner des éléments par leur nom, leur classe ou leur ID
* Comment sélectionner des éléments par le nom et le contenu de l'attribut
* Comment utiliser les pseudo-classes
* Comment utiliser les pseudo-éléments
* Comment appliquer plusieurs sélecteurs à la même règle
* Comment spécifier les couleurs en CSS
* Comment déboguer CSS dans le navigateur (en-US)
### CSS et texte

* Comment donner un style au texte
* Comment personnaliser une liste d'éléments
* Comment donner un style aux liens
* Comment ajouter des ombres au texte
### Boîtes et mises en page

* Comment tailler les boîtes CSS
* Comment contrôler le contenu débordant
* Comment contrôler la partie des boîtes CSS dessinées au-dessus de l'arrière-plan
* Comment définir *"inline*", *"block"* et *"inline-block"* ?
* Comment créer des boîtes fantaisies (lire aussi le module Styles pour boites (en-US), généralités).
* Comment utiliser `background-clip` pour contrôler combien de boîtes sont impactées par l'image de fond-d'écran
* Comment changer complètement le modèle de boîte en utilisant `box-sizing` (en-US)
* Comment contrôler l'arrière-plan (en-US)
* Comment contrôler les bordures (en-US)
* Comment donner un style à une table HTML (en-US)
* Comment ajouter des ombres aux boîtes (en-US)
Techniques avancées ou peu communes
-----------------------------------

Au-delà des concepts de base, CSS dispose de techniques de conception avancées. Dans ces articles, nous verrons les scénarios les plus difficiles auxquels vous aurez à faire face :

### Général

* Comment calculer la spécificité d'un sélecteur de CSS
* Comment contrôler l'héritage en CSS
### Effets avancés

* Comment utiliser des filtres en CSS (en-US)
* Comment utiliser les modes fusion (en-US)
### Mise en page

* Utiliser les boîtes flexibles CSS (*flexbox*)
* Utiliser une structure CSS avec plusieurs colonnes
* Utiliser les contenus générés par CSS
Voir aussi
----------

CSS FAQ — Une collection d'informations ponctuelles couvrant une variété de sujets, du débogage à l'utilisation de sélecteurs.
Introduction au style de texte
==============================

Une fois acquises les bases du langage CSS, la prochaine étape pour vous est la mise en forme de texte, une des choses les plus commune mais essentielle du CSS. Nous étudierons ici les principes de base de la mise en forme de texte : choix de polices de caractères, gras ou italique, interlignes et espacement de caractères, ajouter des ombres et autres fonctionnalités. Nous terminerons le module en détaillant l'intégration de polices personnalisées à votre page, ainsi que la mise en forme de listes et de liens.

Prérequis
---------

Avant de commencer ce module, vous devez déjà être familiarisé avec les bases de HTML proposées dans Introduction à HTML, et être à l'aise avec les fondamentaux de CSS étudiés dans Introduction à CSS.

**Note :** Si vous travaillez sur un ordinateur/tablette/autre appereil sur lequel vous ne pouvez pas créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code dans un programme de codage en ligne tels que JSBin ou Thimble.

Guides
------

Ce module contient les articles suivants, qui vous éclaireront sur les méthodes essentielles de mise en forme de contenu HTML :

Initiation à la mise en forme du texte

Dans cet article, nous passons en revue toutes les bases du style de texte et de police de caractères, y compris le poids de la police, la famille et le style, les raccourcis, l'alignement du texte et d'autres effets, ainsi que l'espacement des lignes et des lettres.

Style de liste

Les listes se comportent comme la plupart des autres textes, mais il existe des propriétés CSS spécifiques aux listes que vous devez connaître, ainsi que quelques bonnes pratiques à prendre en compte. Cet article explique tout.

Style de lien

Pour définir un style de liens, il est important de comprendre comment utiliser les pseudo-classes, pour styliser efficacement les états des liens, et comment créer des liens pour les utiliser dans des fonctionnalités d'interface variées communes telles que les menus de navigation et les onglets. Nous examinerons tous ces sujets dans cet article.

Polices de caractères web

Ici, nous allons explorer les polices web en détail - celles-ci vous permettent de télécharger des polices personnalisées sur votre page web, pour vous donner des styles de texte plus variés et personnalisés.

Auto-évaluation
---------------

Les auto-évaluations suivantes testeront votre compréhension des techniques de style de texte abordées dans les guides ci-dessus.

Composition d'une page d'accueil d'une école communale

Dans cette auto-évaluation, nous testerons votre compréhension du style de texte en vous amenant à créer le style du texte de la page d'accueil d'une école communale.
Contenu
=======

Cet article décrit différentes façons d'utiliser CSS afin d'ajouter du contenu à un document affiché. Vous pouvez modifier votre feuille de style afin d'ajouter du contenu textuel ou des images.

L'un des avantages majeurs de CSS est qu'il permet de séparer la forme du contenu. Toutefois, il existe des situations où il est pertinent d'indiquer du contenu dans la feuille de style et pas dans le document. Il est possible d'indiquer du contenu textuel ou des images dans une feuille de style lorsque ce contenu est fortement couplé à la structure du document.

**Note :** Le contenu spécifié dans la feuille de style ne fait pas partie du DOM.

Ajouter du contenu dans une feuille de style peut engendrer des complications. Ainsi, si vous avez un document disponible en plusieurs langues et que ces versions partagent une même feuille de style, lorsque vous indiquez du contenu dans la feuille de style qui doit être traduit, vous devrez organiser ces parties de la feuille de style dans différents fichiers et faire le nécessaire pour qu'elles soient rattachées aux différentes versions du document.

Ce problème ne se pose pas si le contenu indiqué est composé de symboles ou d'images qui peuvent s'appliquer dans toutes les langues et pour toutes les cultures.

Exemples
--------

### Contenu textuel

CSS peut insérer du contenu textuel avant ou après un élément. Pour cela, on créera une règle en ajoutant `::before` ou `::after` au sélecteur. Dans la déclaration, on utilisera la propriété `content` avec comme valeur le texte à utiliser.

#### HTML


```html
Un texte où j'en ai besoin de <span class="ref"> quelque chose</span>
```


#### CSS


```css
.ref::before {
  font-weight: bold;
  color: navy;
  content: "Réference ";
}
```


#### Résultat

L'encodage d'une feuille de styles est UTF-8 par défaut mais cela peut être défini dans le lien, dans la feuille de style même ou d'autres façons. Pour plus de détails, voir 4.4 Représentation de la feuille de style CSS dans la spécification CSS.

Des caractères individuels peuvent également être spécifiés avec un échappement avec la barre oblique inversée. Ainsi, "\265B" pourra être utilisé pour générer le symbole de la reine noire aux échecs : ♛. Pour plus de détails, voir Référencer des caractères non représentés par l'encodage et Caractères et casse dans la spécification CSS.

### Contenu\_avec\_une\_image

Afin d'ajouter une image avant ou après un élément, vous pouvez indiquer l'URL d'un fichier image dans la valeur de la propriété `content`.

Cette règle ajoute un espace et une icône après chaque lien qui possède la classe `glossary` :

#### HTML


```html
<a href="developer.mozilla.org" class="glossary">developer.mozilla.org</a>
```


#### CSS


```css
a.glossary::after {
  content: " " url("glossary-icon.gif");
}
```