recursal/MDN huggingface dataset:
Baseline (compatibilité)
========================

***Baseline*** identifie les fonctionnalités prises en charge par l'ensemble des navigateurs. Les développeuses et développeurs web peuvent partir du principe que les fonctionnalités *Baseline* fonctionnent sans problème dans les navigateurs récents.

Une fonctionnalité *Baseline*, comme une API, un ensemble de propriétés CSS ou une syntaxce JavaScript, fonctionnera de façon homogène depuis au moins la version antérieure à la version actuelle pour l'ensemble des navigateurs connus (Chrome, Edge, Firefox, et Safari).

Badges
------

🟢 Sur une page MDN, si vous voyez un bandeau *Baseline* vert, vous pouvez partir du principe que la fonctionnalité correspondante est implémentée dans la version actuelle et précédente des navigateurs.

🟡 Si vous voyez un bandeau jaune indiquant que la fonctionnalité ne fait pas encore partie de *Baseline*, il vous faudra vérifier les données de compatibilité et tester la fonctionnalité. Vous pouvez également attendre qu'elle soit ajoutée à *Baseline*.

Considérations supplémentaires
------------------------------

*Baseline* doit être vu comme un guide général, qui ne couvre pas l'ensemble des situations. Si votre site ou application doit fonctionner dans un navigateur pour une version à support à long terme, ou dans un navigateur ou appareil plus ancien (éventuellement non couvert par *Baseline*), il vous appartiendra de tester et de consulter les données de compatibilité détaillées sur MDN ou caniuse.com avant de déployer une fonctionnalité donnée.

Contribuer
----------

*Baseline* est un projet participatif, mené par le groupe communautaire W3C WebDX, qui base ses données sur les données de compatibilité des navigateurs fournies par MDN. Si vous avez des questions, souhaitez mettre à jour ou étendre les données de *Baseline*, n'hésitez pas à vous rendre sur web-platform-dx/web-features (en anglais) pour participer.

Voir aussi
----------

* Tester sur plusieurs navigateurs
* Le dépôt GitHub web-platform-dx/web-features
* Le groupe communautaire W3C WebDX
* Le dépôt GitHub mdn/browser-compat-data
Média (CSS)
===========

Dans le contexte de CSS (Cascading Style Sheets), le terme ***média*** fait référence à la destination vers laquelle le document doit être dessiné par le rendering engine. Il s'agit généralement d'un écran—mais il peut également s'agir d'une imprimante, d'un synthétiseur vocal, d'un afficheur Braille ou d'un autre type de périphérique.

CSS offre plusieurs fonctionnalités qui vous permettent d'ajuster les styles de votre document—ou même d'offrir différents styles—en fonction du **type** de support (tel que l'écran ou impression, pour n'en nommer que deux) ou des **capacités** de support (telles que la largeur, la résolution ou d'autres valeurs) de l'appareil du spectateur.

Apprendre plus
--------------

### Culture générale

* Utilisation des requêtes multimédias
### Référence technique

Requêtes médias

Définissez un ensemble de caractéristiques ou de paramètres requis pour appliquer les styles CSS qui sont spécifiés entre les accolades de la requête multimédia; par exemple: appliquer uniquement certains styles CSS pour les appareils inférieurs à 768 pixels.

`@media` at-rule

Appliquez conditionnellement une partie d'une feuille de style (en-US), en fonction du résultat d'une requête multimédia.

`Window.matchMedia()`

Testez le périphérique de visualisation par rapport à une requête multimédia.
DSL (Domain-Specific Language)
==============================

**DSL** pour *Domain-Specific Language* (qu'on peut traduire en « langage dédié ») est un type de langage informatique conçu pour résoudre un problème dans un domaine d'application donné.

Les langages dédiés sont opposés aux langages généralistes (*general-purpose languages* ou (GPLs) en anglais), conçus pour traiter différents problèmes quel que soit le domaine concerné.

Voir aussi
----------

* La page Wikipédia pour les langages dédiés
* Un guide sur les langages dédiés, écrit par Martin Fowler (en anglais)
DSL (Digital Subscriber Line)
=============================

**DSL** pour *Digital Subscriber Line*, qu'on peut traduire en « ligne numérique d'abonné·e » est un type de connexion haut débit à Internet qui permet d'envoyer des données sur un transport filaire en utilisant les lignes téléphoniques.

Les vitesses de téléchargement (*download*) et de téléversement (*upload*) ne sont pas nécessairement les mêmes avec une telle connexion. Dans ce cas, la ligne est qualifiée d'asymétrique et on utilise alors l'abréviation ADSL.

On oppose généralement ce mode de connexion aux connexions par câble dédié, fibre optique ou utilisant une ligne commutée.

Voir aussi
----------

* La page Wikipédia pour *Digital subscriber line*
Tools for game development
==========================

Sur cette page, vous trouverez des liens vers nos articles sur les outils de développement de jeux, qui visent à terme à couvrir les frameworks, les compilateurs et les outils de débogage.

asm.js

asm.js est un sous-ensemble très limité du langage JavaScript, qui peut être grandement optimisé et exécuté dans un moteur de compilation à l'avance (AOT) pour des performances beaucoup plus rapides que vos performances JavaScript typiques. C'est, bien sûr, idéal pour les jeux.

Emscripten

Un compilateur LLVM vers JavaScript; avec Emscripten, vous pouvez compiler C ++ et d'autres langages qui peuvent compiler en bytecode LLVM en JavaScript haute performance. C'est un excellent outil pour porter des applications sur le Web! Il existe un tutoriel uitle Emscripten disponible sur le wiki. Notez que nous visons à couvrir Emscripten dans sa propre section de MDN.

Gecko profiler

L'extension de profileur Gecko vous permet de profiler votre code pour vous aider à déterminer où se trouvent vos problèmes de performances afin que vous puissiez faire fonctionner votre jeu à une vitesse maximale.

Moteurs de jeu et outils

Une liste de moteurs, modèles et technologies utiles aux développeurs de jeux.

Shumway

Shumway est un moteur de rendu pour Adobe Flash entièrement construit en JavaScript, WebGL, etc., comblant le fossé entre Flash et les standards Web. Cet article explique comment utiliser Shumway et comment apporter des correctifs et des bogues au projet.

Chaîne d'outils pour développer et déboguer des jeux

En quoi cela diffère-t-il du débogage normal des applications Web? Quels outils spécialisés sont disponibles? Une grande partie de cela va être couverte par Will dans les outils, mais ici, nous devrions fournir une sorte de tutoriel pratique sur la chaîne d'outils pour le débogage de jeux, avec des liens vers les éléments de Will :

* Présentation des outils de base
* Éditeur de Shader
* Outils de performance (toujours en production, estimé début 2014)
Techniques pour le développement de jeux vidéo
==============================================

Cette page liste un ensemble de techniques utiles à toute personne qui voudrait développer un jeu vidéo à l'aide des technologies du web.

Utiliser des scripts asynchrones pour asm.js

Principalement pour la création de jeux de moyenne ou de grande taille, les scripts asynchrones sont une technique essentielle dont il faut tirer avantage, ainsi le JavaScript de votre jeux pourra être compilé hors du thread principal et mis en cache pour la future exécution du jeux, résultant en une amélioration significative des performances pour vos utilisateurs. Cet article vous explique comment.

Optimiser les performances au démarrage

Comment vous assurez que votre jeu se lancera rapidement, en douceur et sans avoir l'air de bloquer le navigateur ou le périphérique de l'utilisateur.

Utiliser les canaux de données pair-à-pair WebRTC (en-US)

En plus de prendre en charge les communications audio et vidéo, WebRTC permet de mettre en place des canaux de données pair-à-pair pour échanger activement des données texte ou binaires entre deux joueurs. Cet article explique ce que cela vous apporte et montre comment utiliser les bibliothèques qui rendent cela facile.

Animations efficaces pour les jeux web (en-US)

Cet article couvre les techniques et les conseils pour créer des animations efficaces pour les jeux web, avec une tendance vers la prise en charge des appareils bas de gamme comme des téléphones mobiles. Nous aborderons les transitions CSS et les animations CSS, et les boucles JavaScript utilisant `window.requestAnimationFrame`.

Audio pour les jeux web

L'audio est une partie importante de tout jeu - il ajoute des commentaires et de l'atmosphère. L'audio basé sur le Web arrive à maturité rapidement, mais il y a encore beaucoup de différences de navigateurs à négocier. Cet article fournit un guide détaillé sur la mise en œuvre de l'audio pour les jeux Web, en examinant ce qui fonctionne actuellement sur un éventail aussi large que possible de platesformes.

Détection de collisions en 2D

Une introduction aux techniques de détection de collisions pour les jeux en deux dimensions.

Carrelage (en-US)

Les carreaux sont une technique très populaire dans les jeux 2D pour construire le monde du jeu. Ces articles fournissent une introduction du carrelage (map 2D) et expliquent comment les implémenter avec l'API Canvas.
Introduction au développement de jeux HTML5 (résumé)
====================================================

Avantages
---------

1. Les jeux construits avec HTML5 fonctionnent sur les smartphones, les tablettes, les PC et les téléviseurs intelligents.
2. Annoncez et promouvez votre jeu sur le Web, ainsi que sur d'autres médias.
3. Paiements. Chargez ce que vous voulez et utilisez le service de traitement des paiements de votre choix.
4. Mettez à jour votre jeu quand vous le souhaitez.
5. Collectez vos propres analyses !
6. Connectez-vous plus étroitement avec vos clients,
7. Les joueurs peuvent jouer au jeu n'importe où, n'importe quand.
Technologies Web
----------------

| **Fonction** | Technologie |
| --- | --- |
| **Audio** | Web Audio API |
| **Graphique** | WebGL (OpenGL ES 2.0) |
| **Input** | Événements tactiles, Utiliser l'API Gamepad, capteurs de l'appareil , L'API WebRTC, Utiliser le mode plein écran, Pointer Lock API |
| **Language** | JavaScript (ou C/C++ utilisant Emscripten pour compiler en JavaScript ) |
| **Networking** | WebRTC et/ou WebSockets |
| **Stockage** | IndexedDB ou le "cloud" |
| **Web** | HTML, CSS, SVG, Social API ( et beaucoup plus! ) |

API plein écran (en-US)

Gameplay en plein écran.

API Gamepad (en-US)

Utilisez des manettes ou d'autres contrôleurs de jeu.

HTML et CSS

Créez, stylisez et aménagez l'interface utilisateur de votre jeu.

Audio HTML

Jouez facilement des effets sonores et de la musique simplement.

IndexedDB

Stockez les données utilisateur sur leur propre ordinateur ou appareil.

JavaScript

 Langage de programmation Web rapide pour écrire le code de votre jeu.
 Pour porter facilement vos jeux existants Emscripten ou Asm.js

API de verrouillage de pointeur

Verrouillez la souris ou tout autre périphérique de pointage dans l'interface de votre jeu.

SVG (Scalable Vector Graphics)

Créez des graphiques vectoriels qui évoluent en douceur, quelle que soit la taille ou la résolution de l'écran de l'utilisateur.

Tableaux typés (en-US)

Accédez aux données binaires brutes depuis JavaScript; Manipulez les textures GL, les données de jeu ou tout autre chose.

API Web Audio (en-US)

Contrôlez la lecture, la synthèse et la manipulation de l'audio en temps réel.

WebGL

Créez des graphiques 3D (et 2D) haute performance à accélération matérielle. OpenGL ES 2.0.

WebRTC

Communications en temps réel pour contrôler les données audio et vidéo, y compris la téléconférence et la transmission d'autres données d'application entre deux utilisateurs comme le chat.

WebSockets

Connectez votre application ou votre site à un serveur pour transmettre des données en temps réel. Parfait pour l'action de jeu multijoueur, les services de chat, etc.

Web Workers (en-US)

Créez des threads d'arrière-plan exécutant leur propre code JavaScript pour les processeurs multicœurs.

XMLHttpRequest (en-US) et File API

Envoyez et recevez tout type de données que vous souhaitez à partir d'un serveur Web, comme le téléchargement de nouveaux niveaux de jeu et d'illustrations pour transmettre des informations sur l'état du jeu non en temps réel dans les deux sens.
Publier des jeux
================

Les jeux en HTML5 ont un avantage certain face à ceux écrits dans un langage natif en terme de publication et de distribution — vous avez en effet la liberté de distribuer, promouvoir et monétiser votre jeu sur Internet au lieu de voir chaque version de votre jeu emprisonnée au sein d'un store propriétaire. En étant sur le web, vous bénéficiez automatiquement d'un jeu multi plate-formes. Cette série d'articles vous présente les options dont vous disposez afin de publier et de distribuer votre jeu et de gagner quelque chose en attendant de faire de votre jeu un incontournable.

Distribuer votre jeu
--------------------

Vous avez déjà suivi un tutoriel ou deux et vous avez créé un jeu en HTML5 ? Génial ! L'article Distribuer votre jeu vous indique tout ce que vous devez savoir sur les moyens de partager votre toute dernière création — y compris comment vous pouvez l'héberger en ligne, le proposer sur les boutiques en ligne ouvertes, et le soumettre aux stores propriétaires comme Google Play ou Apple Store.

Promouvoir votre jeu
--------------------

Développer et finaliser un jeu ne suffit pas. Vous devez informer le monde que vous avez réalisé quelque chose d'intéressant, avec lequel les gens auront plaisir à jouer. Il y a de nombreux moyens de Promouvoir votre jeu — beaucoup d'entre-eux sont gratuits — et donc, même si vous avez du mal à gagner votre vie en tant que développeur indépendant avec un budget nul, vous disposez malgré tout de nombreux moyens d'informer les gens de votre nouveau super jeu. Faire la promotion de votre jeu vous aidera beaucoup notamment si vous souhaitez le monétiser par la suite, il est donc important de le faire correctement.

Monétiser votre jeu
-------------------

Après avoir passé beaucoup de temps à coder, publier et promouvoir votre jeu, vous penserez sans doute à un moyen de rémunérer votre travail. Monétiser son jeu est essentiel à quiconque considère que le travail qu'il a réalisé pour créer son jeu est fait sérieusement par un développeur de jeux indépendant désormais capable de vivre de ses créations. Découvrez quelles sont vos options. La technologie est suffisamment avancée, la question est de savoir quelle approche sera la meilleure pour vous.
Workflows for different game types
==================================

Cette page contient plusieurs séries de tutoriels qui mettent en évidence différentes démarches pour créer efficacement différents types de jeux Web.

Jeu 2D avec du pur JavaScript

Dans ce tutoriel étape par étape, vous implémenterez un jeu en utilisant du pur JavaScript. En cours de route, vous apprendrez les bases de l'utilisation de l'élément `<canvas>` pour implémenter les mécanismes fondamentaux du jeu tels que le rendu et les images en mouvement, la détection de collision, les mécanismes de contrôle et les états gagnants et perdants.

Jeu 2D avec Phaser

Dans ce tutoriel étape par étape, vous implémenterez un jeu en utilisant le framework de jeu HTML5 Phaser . Cette idée ici est d'enseigner quelques-uns des fondamentaux (et des avantages) de travailler avec des cadres (*frameworks*), avec les mécanismes de jeu.

Jeu 2D avec API Device orientation

Ce tutoriel montre comment créer un jeu de labyrinthe en 2D en utilisant HTML5, en intégrant des principes fondamentaux tels que la détection de collision et le placement de "sprites" sur un `<canvas>`. Il s'agit d'un jeu mobile qui utilise les API Device Orientation et Vibration, pour améliorer le gameplay, et est construit en utilisant le framework Phaser .

Jeu de plateforme 2D avec Phaser

Cette série de tutoriels montre comment créer un jeu de plateforme simple à l'aide de Phaser , couvrant les fondamentaux tels que les "sprites", les collisions, la physique, les objets de collection et plus encore.
Jeu de casse-briques 2D en pur JavaScript
=========================================

* Suivant »

Dans ce tutoriel, nous allons créer pas à pas un jeu de casse-briques MDN, créé entièrement avec JavaScript et sans framework, et rendu avec la balise HTML5 `<canvas>`.

Chaque étape est modifiable en direct, et disponible en test pour que vous puissiez voir ce à quoi les étapes intermédiaires devraient ressembler. Vous apprendrez les bases d'utilisations de l'élément `<canvas>` pour implémenter des mécaniques de base du jeu vidéo, comme charger et déplacer des images, les détections de collisions, les mécanismes de contrôle, et les conditions de victoire/défaite.

Pour comprendre la plupart des articles de ce tutoriel, vous devez déjà avoir un niveau basique ou intermédiaire en JavaScript. À la fin de ce tutoriel, vous serez capable de créer vos propres jeux Web.

![](/fr/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/mdn-breakout-gameplay.png)

Détail de la leçon
------------------

Toutes les leçons — et les différentes versions de ce jeu de casse-brique MDN que nous allons créer ensemble — sont disponibles sur GitHub :

1. Créer l'élément canvas et dessiner dessus
2. Déplacer la balle
3. Rebondir sur les murs
4. Contrôles clavier
5. Jeu terminé
6. Construire le mur de briques
7. Détection des collisions
8. Afficher le score et gagner
9. Contrôles souris
10. Finir

Commencer avec du Javascript pur et dur est le meilleur moyen d'acquérir des connaissances de développement de jeu web. Après ceci, vous pourrez prendre n'importe quel "framework" et l'utiliser pour vos projets. Les "frameworks" sont des outils créés avec le langage Javascript ; donc, même si vous voulez travailler avec ces derniers, c'est toujours bon d'apprendre le langage lui-même pour savoir ce qu'il se passe exactement. Les "frameworks" améliorent la vitesse de développement et aident à traiter les parties les moins intéressantes du jeu, mais si quelque chose ne fonctionne pas comme prévu, vous pouvez toujours essayer de déboguer ou juste écrire vos propre solutions en Javascript.

**Note :** Si vous êtes intéressé par l'apprentissage du développement un jeu web 2D avec un "framework", consultez la série Jeu de casse-tête 2D avec Phaser.

**Note :** Cette série d'articles peut être utilisée comme matériel pour des ateliers pratiques de développement de jeux. Vous pouvez également utiliser le Gamedev Canvas Content Kit basé sur ce tutoriel si vous voulez faire une présentation sur le développement de jeux en général .

Prochaines étapes
-----------------

Ok, c'est parti ! Rendez-vous au premier chapitre pour commencer — Créer l'élément canvas et dessiner dessus

* Suivant »
2D breakout game using Phaser
=============================

* Suivant » (en-US)

Dans ce tutoriel étape par étape, nous créons un simple jeu mobile **MDN Breakout** écrit en JavaScript, en utilisant le framework Phaser.

Chaque étape a des échantillons modifiables, disponibles pour jouer avec, de sorte que vous pouvez voir à quoi devraient ressembler les étapes intermédiaires. Vous apprendrez les bases de l'utilisation du framework Phaser pour implémenter les mécanismes fondamentaux du jeu comme le rendu et le mouvement des images, la détection des collisions, les mécanismes de contrôle, les fonctions d'aide spécifiques aux cadres, les animations et les interpolations, les états gagnants et perdants.

Pour tirer le meilleur parti de cette série d'articles, vous devez déjà avoir des connaissances de base ou intermédiaires en JavaScript. Après avoir parcouru ce tutoriel, vous devriez être capable de construire vos propres jeux Web simples avec Phaser.

![](/fr/docs/Games/Tutorials/2D_breakout_game_Phaser/mdn-breakout-phaser.png)

Détails de la leçon
-------------------

Toutes les leçons - et les différentes versions du jeu MDN Breakout game que nous construisons ensemble - sont disponibles sur GitHub :

1. Initialiser le cadre (en-US)
2. Mise à l'échelle (en-US)
3. Charger les actifs et les imprimer à l'écran (en-US)
4. Déplacer le ballon (en-US)
5. Physique (en-US)
6. Rebondir sur les murs (en-US)
7. Pagaie et commandes du joueur (en-US)
8. Fin de la partie (en-US)
9. Construisez le champ de briques (en-US)
10. Détection de collision (en-US)
11. Le score (en-US)
12. Gagnez la partie (en-US)
13. Extra vies (en-US)
14. Animations et préadolescents (en-US)
15. Boutons (en-US)
16. Mode de jeu aléatoire (en-US)

Comme note sur les parcours d'apprentissage — en commençant par le JavaScript pur est le meilleur moyen d'acquérir une solide connaissance du développement de jeux en ligne. Si vous n'êtes pas déjà familier avec le développement de jeux en JavaScript pur, nous vous suggérons de travailler d'abord avec l'homologue de cette série, 2D breakout game using pure JavaScript.

Après cela, vous pouvez choisir n'importe quel framework que vous voulez et l'utiliser pour vos projets ; nous avons choisi Phaser car c'est un bon framework solide, avec un bon support et une communauté disponible, et un bon ensemble de plugins. Les cadres accélèrent le temps de développement et aident à prendre soin des parties ennuyeuses, vous permettant ainsi de vous concentrer sur les choses amusantes. Cependant, les frameworks ne sont pas toujours parfaits, donc si quelque chose d'inattendu se produit ou si vous voulez écrire des fonctionnalités que le framework ne fournit pas, vous aurez besoin de connaissances en JavaScript pur.

**Note :** Cette série d'articles peut être utilisée comme matériel pour des ateliers pratiques de développement de jeux. Vous pouvez également utiliser la fonction Gamedev Phaser Content Kit basé sur ce tutoriel si vous voulez donner une conférence sur le développement d'un jeu avec Phaser.

Prochaines étapes
-----------------

Ok, commençons ! Aller à la première partie de la série — Initialize the framework (en-US).

* Suivant » (en-US)