[Tutorial] Créer un jeu web avec du HTML 5 Canvas et Javascript

Depuis le temps que j'en parle sur la Ferme, je me devais de faire un petit tutorial : Comment créer un jeux vidéo web avec l'élément canvas du HTML5 et du javascript.

Ce tutorial s'adresse aux débutants, vous apprendrez à créer pas à pas un Casse briques version web ! (Sans flash ni silverlight).

Plan du tutorial:

L'élément HTML 5 Canvas

• Introduction
• Déclaration du canvas en HTML
• Initialiser le contexte 2D avec du Javascript
• Quelques fonctions basiques pour créer des graphiques

Accéder à ce chapitre

Initialisation des briques du jeu

• Dessiner un rectangle dans notre Canvas
• Gérer la couleur des briques
• Créer nos briques dans le jeu
• Le code complet

Accéder à ce chapitre

Mise en place de la barre et boucle de rafraichissement du jeu

• Ajout de la barre dans le Contexte 2D
• Création de la boucle de rafraichissement de l'affichage
• Déplacement de la barre de jeu avec le clavier
• Le code complet

Accéder à ce chapitre

Animation de la balle

• Les paramètres de la balle
• Affichage et déplacement de la balle
• Collisions avec la barre de jeu
• Collisions avec les briques et victoire
• Le code final

Accéder à ce chapitre

Si vous avez besoin d'aide, postez dans le topic dédié dans le forum.