11
MAI

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

Publié le 11/05/09 à 07h31 par DJo

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.

Tutorial HTML 5 Canvas: Créer un jeu web

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.

Baraguiné par Sybio le 11/05/09 à 21h59
Sybio sur La Ferme du Web
Ca m'a l'air franchement sympa il va falloir que je me penche sur ce tuto !
Baraguiné par MacSIM le 12/05/09 à 13h27
MacSIM sur La Ferme du Web
Malheureusement, pas compatible internet explorer, du coup interet presque zéro :(
Maudit internet explorer, pourquoi il y a encore des gens qui l'utilise (et je connais pas mal de personne qui utilisent même IE5 voir IE6, et quand vous leur dite de changer.. planquez-vous) !!
Baraguiné par DJo le 12/05/09 à 14h30
DJo sur La Ferme du Web
Ben si ça devient une spécificité du HTML 5, IE devra bien prendre en charge cet élément :D
Mais pour le moment, comme d'habitude: IE Sucks !
Baraguiné par le 11/06/11 à 20h14
Sa donne des idées tout ça...

puis sa fait rêver ^^. Super tuto !
Baraguiné par jeux-html5 le 12/09/11 à 11h46
jeux-html5 sur La Ferme du Web
Tu as aussi 243 jeux HTML5 répertoriés ici : http://www.jeux-html5.net
Baraguiné par le 07/10/11 à 19h21
hahahahahaha goood yeah je suis creer un jeux allez de sniper
name is : kid of deadround en plus 18 stp commentaire sur web me
web moi : www.jeuxjeux.com
Baraguiné par thibsert le 13/04/12 à 21h05
thibsert sur La Ferme du Web
Merci pour ce tuto, il m'a aidé à comprendre les bases. C'est moins compliqué que ce que je pensais ;)
Baraguiné par nerdyprog le 14/06/12 à 22h35
nerdyprog via Twitter
En ce qui concerne IE, la nouvelle version (donc la version 9 de Internet Explorer) est mieux adaptée aux normes HTML 5. J'en veux pour preuve ce jeu assez connu, à l'origine pour iPhone et téléphones Android, qui fut très récemment adapté en HTML5 (quelque part afin de faire la promo de IE9 évidemment) CUT THE ROPE disponible ici : http://www.cuttherope.ie/ (notez bien le nom de domaine : .ie ;) )

[Ce n'est pas le seul à proposer un jeu en HTML5 (Mozilla a le sien : BrowserQuest, et Chrome propose des tests faits avec WebGL...)]

Tout ça pour dire qu'il ne faut pas trop s?inquiéter pour la compatibilité. HTML5 étant une technologie très en vue et très puissante, les navigateurs ont plutôt tendance à s'adapter et promouvoir chacun HTML5. Donc il est évident que les navigateurs sont/seront plus ou moins compatibles. ;)
Cdt,
nerdyprog (nerdycode.wordpress.com)
Baraguiné par santalib le 23/10/12 à 10h41
santalib sur La Ferme du Web
Sinon quelqu'un serait faire un tuto pour la SantaLib-Objs ?

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web