La Ferme du web - Les forums

DJo · 11/05/2009 00:22:32

Topic officiel de support pour le tutorial: "Créer un jeu en HTML Canvas et Javascript".

Objectif de ce tutorial

Dans ce tutorial, nous allons apprendre à gérer l'élément HTML5 canvas.

Nous allons créer un casse brique assez basique pas à pas pour voir comment ce nouvel élément HTML fonctionne.

Nous utiliserons aussi du Javascript, vous devez avoir des notions de développement en Javascript pour suivre ce tutorial.

Support et observations

N'hésitez pas à poser vos questions et observations dans ce topic.
Aucun support sur les commentaires ne sera fourni.

Botte De Foin Publicitaire · 11/05/2009 00:22:32

Kirm · 22/07/2010 13:02:08

Bonjour !
Tout d'abord merci pour ce super tutorial, très bien expliqué !
Une très bonne approche des possibilités qu'offre désormais le HTML ! big_smile

PS: Juste une petite question, dans le "code final" ne serait-ce pas plutot

Code:

 clearContext(context, 0, ZONE_JEU_WIDTH, 0, ZONE_JEU_HEIGHT);

Au lieu de :

Code:

 clearContexte(context, 0, ZONE_JEU_WIDTH, 0, ZONE_JEU_HEIGHT);

?

Merci !

Edit : Okiii je viens de comprendre pourquoi ^^". Autant pour moi ! :s

Encore merci ! smile

Dernière modification par Kirm (22/07/2010 13:06:45)

jrvieux · 10/11/2010 14:01:21

Tres bon exemple, a la fois ludique et didactique.

Mais j'ai trouve une erreur: quand on abaisse la vitesse de la balle a 1 (utile pour tester la condition de victoire sans se prendre la tete) il faut modifier la ligne:

128. if ( balleY <= limiteBriques)

et remplacer le "<=" par "<"

Merci encore!

Orci76 · 06/12/2010 16:37:23

Bonjour, et désolé pour le up du topic.
Très bon tutorial, merci beaucoup, cepandant j'aurais une petite question; est-il possible dans des canvas d'y mettre des images (au lieu de bête rectangles)?
Merci d'avance, bonne journée.

ggregg · 25/04/2012 17:38:57

Merci pour ce tuto.

Le déplacement de la raquette est un peu laborieu.

Je propose ceci :

1) Ajouter une variable globale keynum

var keyNum = 0;

2) Remplacer "window.document.onkeydown = checkDepla;" par ceci

window.document.onkeydown = function(e) {
keyNum = e.keyCode;
};
window.document.onkeyup = function(e) {
keyNum = 0;
};

3) Gerer le déplacement de la raquette tout en haut de la fonction "refreshGame"

// Flêche de droite préssée
if (keyNum == 39) {
if ( (barreX+PXL_DEPLA+BARRE_JEU_WIDTH) <= ZONE_JEU_WIDTH ) barreX += PXL_DEPLA;
}
// Flêche de gauche préssée
else if (keyNum == 37) {
if ( ((barreX-PXL_DEPLA)) >= 0 ) barreX -= PXL_DEPLA;
};

Have fun big_smile

La Ferme du web - Les forums

#1 11/05/2009 00:22:32

[Tutorial] Créer un jeu en HTML Canvas et Javascript: Casse briques

11/05/2009 00:22:32

#2 22/07/2010 13:02:08

Re: [Tutorial] Créer un jeu en HTML Canvas et Javascript: Casse briques

Code:

Code:

#3 10/11/2010 14:01:21

Re: [Tutorial] Créer un jeu en HTML Canvas et Javascript: Casse briques

#4 06/12/2010 16:37:23

Re: [Tutorial] Créer un jeu en HTML Canvas et Javascript: Casse briques

#5 25/04/2012 17:38:57

Re: [Tutorial] Créer un jeu en HTML Canvas et Javascript: Casse briques

Pied de page des forums