La saga Pong javascript html5 continue….Dans cet épisode, nous allons terminer la mise en place de l’environnement du jeu à proprement parler avant de donner vie au jeu en animant le tout : les raquettes et la balle, ainsi que le score.
La série
Pour ceux qui souhaiteraient aller plus vite :
– animation de la balle : ici;
– animation de la raquette avec le clavier : ici.
Prérequis
Avoir lu l’épisode 1 de ce tuto.
Rappel de l’épisode 1
Souvenez vous, il a été créé dans l’épisode 1, un objet Layer (comparables aux layers flash) dédié au terrain : un fond noir, et un filet.
Deux autres doivent être maintenant créés :
– un dédié à l’affichage du score;
– le dernier dédié à l’animation des raquettes et de la balle.
Les 3 layers
Tout comme pour le terrain, nous créons :
– un layer (canvas html5) dédié pour le score;
– et un layer (canvas html5) dédié pour les raquettes et la balle.
Pourquoi utiliser 3 layer au lieu d’un seul ?
– la première raison est l’optimisation : avec un seul layer, il va falloir rafraîchir tous les éléments du jeu que sont les raquettes, la balle, le score, et le filet à chaque rafraîchissement;
– la seconde raison est de l’ordre purement conceptuel : on regroupe des éléments de même nature dans un layer dédié.
Les layer sont superposables par le biais de la propriété zIndex. Il est donc permis de superposer nos 3 layer html5 : il reste à déterminer dans quel ordre. Un layer avec un zIndex sera toujours placé devant un layer html5 avec un zIndex plus faible.
Le layer html5 terrain n’a pas vocation à changer : aucune animation. Il semble être de bon sens de le placer dans la couche la plus basse, en dessous de toutes les autres.
Le layer html5 dédié aux raquettes et à la balle sera en perpétuel changement du fait de l’animation des raquettes et de la balle.
Le dernier layer html5 dédié au score changera uniquement lorsqu’il y aura perte de balle.
Pour résumer :
– layer terrain : le plus bas;
– layer raquettes : le plus haut;
– layer score : entre les 2 précédents.
Les 3 layer html5 ont les mêmes dimensions. Toutefois et pour éviter le rafraîchissement perpétuel du terrain et du score, les 2 layers supérieurs (dédiés aux raquettes et au score) sont transparents de manière à laisser apparaître le layer terrain.
La création des 3 layer html5 dans la fonction init du namespace javascript game :
.....
groundColor : "#000000",
netColor : "#FFFFFF",
groundLayer : null,
scoreLayer : null,
playersBallLayer : null,
init : function() {
this.groundLayer = game.display.createLayer("terrain", this.groundWidth, this.groundHeight, undefined, 0, "#000000", 0, 0);
game.display.drawRectangleInLayer(this.groundLayer, this.netWidth, this.groundHeight, this.netColor, this.groundWidth/2 - this.netWidth/2, 0);
this.scoreLayer = game.display.createLayer("score", this.groundWidth, this.groundHeight, undefined, 1, undefined, 0, 0);
this.playersBallLayer = game.display.createLayer("joueursetballe", this.groundWidth, this.groundHeight, undefined, 2, undefined, 0, 0);
}
.....
A l’exécution, les 2 nouveaux layer html5 sont invisibles. Pour voir qu’ils sont bien créés et existent, ajoutons une fonction d’affichage de texte au namespace javascript game.display :
.....
drawTextInLayer : function(targetLayer, text, font, color, x, y) {
targetLayer.context2D.font = font;
targetLayer.context2D.fillStyle = color;
targetLayer.context2D.fillText(text, x, y);
}
.....
Puis appelons les pour afficher du texte en rouge dans les 2 nouveaux layer html5 :
.....
init : function() {
this.groundLayer = game.display.createLayer("terrain", this.groundWidth, this.groundHeight, undefined, 0, "#000000", 0, 0);
game.display.drawRectangleInLayer(this.groundLayer, this.netWidth, this.groundHeight, this.netColor, this.groundWidth/2 - this.netWidth/2, 0);
this.scoreLayer = game.display.createLayer("score", this.groundWidth, this.groundHeight, undefined, 1, undefined, 0, 0);
game.display.drawTextInLayer(this.scoreLayer, "SCORE", "10px Arial", "#FF0000", 10, 10);
this.playersBallLayer = game.display.createLayer("joueursetballe", this.groundWidth, this.groundHeight, undefined, 2, undefined, 0, 0);
game.display.drawTextInLayer(this.playersBallLayer, "JOUEURSETBALLE", "10px Arial", "#FF0000", 100, 100);
}
.....
Voici ce que ça donne à l’exécution :
L’affichage du score
Pour assurer l’affichage du score, nous réutilisons la fonction drawTextInLayer créée précédemment.
Toutefois, pour des raisons de clarté du code et en faciliter la relecture, la fonction est encapsulée dans une autre dédiée au jeu vidéo html5 pong avec un nom très parlant.
Ceci engendre une spécificité propre au jeu vidéo html5 pong et donc non réutilisable.
En conséquence, nous l’intégrons dans le namespace game.
Cette fonction prend 2 paramètres que sont les scores des 2 joueurs.
var game = {
.....
displayScore : function(scorePlayer1, scorePlayer2) {
}
}
Puis elle affiche les scores au centre sur le haut du terrain en n’oubliant pas de cibler le bon layer html5. Il faut au préalable déterminer les positions des 2 scores.
La position du score du joueur 1 est à 300 pixels du bord gauche du canvas html5.
La position du score du joueur 2 est à 365 pixels du bord gauche du canvas html5.
Nous définissons 2 nouvelles variables dédiées dans le namespace game.
var game = {
.....
scorePosPlayer1 : 300,
scorePosPlayer2 : 365,
.....
displayScore : function(scorePlayer1, scorePlayer2) {
game.display.drawTextInLayer(this.scoreLayer, scorePlayer1, "60px Arial", "#FFFFFF", this.scorePosPlayer1, 55);
game.display.drawTextInLayer(this.scoreLayer, scorePlayer2, "60px Arial", "#FFFFFF", this.scorePosPlayer2, 55);
}
}
Voici ce que ça donne à l’exécution :
Le tracé des raquettes et de la balle
Au même titre que le score, nous ajoutons 2 fonctions dédiées respectivement à l’affichage de la balle et des raquettes :
– displayBall pour la balle;
– displayPlayers pour les raquettes.
Fonctions dédiées donc à ajouter au namespace javascript game.
Pour la balle, nous avons besoin de définir :
– sa taille en pixels (longueur et largeur);
– sa couleur;
– et sa position (coordonnées abscisse (x) et ordonnée (y)).
Nous ajoutons donc autant de propriétés au namespace javascript game.
Encore mieux, nous encapsulons ces propriétés dans un objet ball :
var game = {
.....
ball : {
width : 10,
height : 10,
color : "#FFFFFF",
posX : 200,
posY : 200
},
init : function() {
.....
Il reste à la dessiner avec un simple carré qui prendra les dimensions et couleur définis dans l’objet. Nous réutilisons la fonction drawRectangleInLayer que nous avons définie dans l’article précédent.
displayBall : function() {
game.display.drawRectangleInLayer(this.playersBallLayer, this.ball.width, this.ball.height, this.ball.color, this.ball.posX, this.ball.posY);
}
Il ne reste plus qu’à l’appeler depuis la fonction init pour voir le résultat :
.....
init : function() {
.....
this.displayScore(0,0);
this.displayBall(200,200);
},
......
Le résultat :
Passons aux raquettes pour lesquelles nous avons besoin de définir :
– la taille en pixels (longueur et largeur);
– la couleur;
– la position (coordonnées abscisse (x) et ordonnée (y)).
Reprenons la même méthode, à savoir un objet dédié pour chacune des raquettes :
var game = {
.....
playerOne : {
width : 10,
height : 10,
color : "#FFFFFF",
posX : 10,
posY : 200
},
playerTwo : {
width : 10,
height : 10,
color : "#FFFFFF",
posX : 600,
posY : 200
},
init : function() {
.....
Très proche de l’objet ball, alors pourquoi un deux objets supplémentaires identiques. Simple et bonne raison : une sémantique permettant une relecture facile du code.
Nous définissons ensuite la fonction d’affichage des raquettes :
displayPlayers : function() {
game.display.drawRectangleInLayer(this.playersBallLayer, this.playerOne.width, this.playerOne.height, this.playerOne.color, this.playerOne.posX, this.playerOne.posY);
game.display.drawRectangleInLayer(this.playersBallLayer, this.playerTwo.width, this.playerTwo.height, this.playerTwo.color, this.playerTwo.posX, this.playerTwo.posY);
}
Et l’appelons depuis la fonction init :
.....
init : function() {
this.terrainLayer= game.display.createLayer("terrain", this.groundWidth, this.groundHeight, undefined, 0, "#000000", 0, 0);
game.display.drawRectangleInLayer(this.groundLayer, this.netWidth, this.groundHeight, this.netColor, this.groundWidth/2 - this.netWidth/2, 0);
this.scoreLayer = game.display.createLayer("score", this.groundWidth, this.groundHeight, undefined, 1, undefined, 0, 0);
game.display.drawTextInLayer(this.scoreLayer , "SCORE", "10px Arial", "#FF0000", 10, 10);
this.playersBallLayer = game.display.createLayer("joueursetballe", this.groundWidth, this.groundHeight, undefined, 2, undefined, 0, 0);
game.display.drawTextInLayer(this.playersBallLayer, "JOUEURSETBALLE", "10px Arial", "#FF0000", 100, 100);
this.displayScore(0,0);
this.displayBall();
this.displayPlayers();
},
.....
Le résultat :
La prochaine étape de cette série va consister à faire animer la balle en la faisant rebondir sur les murs à suivre ici.
By jeu vidéo pong html5 6 avril 2019 - 1 h 42 min
[…] du jeu constitué du terrain, du filet, des raquettes, de la balle et du score Coder le jeu vidéo Pong – Raquettes et Balle; – l’animation de la balle Coder le jeu vidéo Pong – Animer la balle; – le […]
By jeu canvas html5 Pong tutorial 6 avril 2019 - 1 h 36 min
[…] du jeu constitué du terrain, du filet, des raquettes, de la balle et du score Coder le jeu vidéo Pong – Raquettes et Balle; – l’animation de la balle Coder le jeu vidéo Pong – Animer la balle; – le […]
By Coder le jeu video html5 pong 6 avril 2019 - 0 h 52 min
[…] du jeu constitué du terrain, du filet, des raquettes, de la balle et du score Coder le jeu vidéo Pong – Raquettes et Balle et à l’animation de la balle Coder le jeu vidéo Pong – Animer la […]
By Coder le jeu video html5 pong 6 avril 2019 - 0 h 51 min
[…] Avoir lu les tutoriaux consacrés à l’initialisation du projet Coder le jeu vidéo Pong 1ere partie, à la mise en place de l’environnement du jeu constitué du terrain, du filet, des raquettes, de la balle et du score Coder le jeu vidéo Pong – Raquettes et Balle. […]
By Coder le jeu video html5 pong 6 avril 2019 - 0 h 43 min
[…] du jeu constitué du terrain, du filet, des raquettes, de la balle et du score Coder le jeu vidéo Pong – Raquettes et Balle, à l’animation de la balle Coder le jeu vidéo Pong – Animer la balle et au contrôle […]
By jeu canvas html5 Pong 2 avril 2019 - 15 h 01 min
[…] du jeu constitué du terrain, du filet, des raquettes, de la balle et du score Coder le jeu vidéo Pong – Raquettes et Balle; – l’animation de la balle Coder le jeu vidéo Pong – Animer la balle; – le […]
By Build html5 pong video game 21 novembre 2018 - 18 h 26 min
[…] go faster (it’s in french): – set game environment (field, rackets, ball and score) : here; – ball animation : here; – racket control with keyboard : […]
By Coder le jeu video html5 pong 2 novembre 2018 - 0 h 18 min
[…] vite : – mise en place de l’environnement du jeu (terrain, raquettes, balle et score) : ici; – animation de la balle : ici; – contrôle de la raquette avec le clavier : […]
By Le HTML5 pour l’interactivité – Prographie 9 septembre 2018 - 15 h 11 min
[…] https://www.video-game-codeur.fr/coder-jeu-video-pong-html5-raquettes-balle/ […]
By jeu canvas html5 Pong 19 février 2017 - 13 h 42 min
[…] du jeu constitué du terrain, du filet, des raquettes, de la balle et du score Coder le jeu vidéo Pong – Raquettes et Balle et à l’animation de la balle Coder le jeu vidéo Pong – Animer la […]
By jeu canvas html5 Pong 20 janvier 2017 - 13 h 29 min
[…] Avoir lu les tutoriaux consacrés à l’initialisation du projet jeu vidéo Pong 1ere partie, et la mise en place de l’environnement du jeu constitué du terrain, du filet, des raquettes, de la balle et du score jeu vidéo Pong – Raquettes et balle. […]
By Tutoriel jeu canvas html5 Pong 7 juin 2016 - 15 h 49 min
[…] Coder un jeu video html5 pong – Raquettes et balle (15 255) […]
By jeu canvas html5 Pong 14 novembre 2015 - 0 h 09 min
[…] Coder un jeu video html5 pong – Raquettes et balle (12 802) […]
By kiwi 1 février 2015 - 21 h 38 min
il manque le code complet de cette étape 🙁 …
By Franck Dubois 7 février 2015 - 15 h 12 min
Voilà qui est corrigé
By jeu canvas html5 Pong 10 février 2014 - 17 h 40 min
[…] Coder un jeu video html5 pong – Raquettes et balle (5 036) […]
By Refactoring html5 javascript 10 février 2014 - 16 h 01 min
[…] Coder un jeu video html5 pong – Raquettes et balle (5 034) […]
By Coder un jeu video html5 pong – Debut et fin de partie 8 septembre 2013 - 19 h 16 min
[…] du jeu constitué du terrain, du filet, des raquettes, de la balle et du score jeu vidéo Pong – Raquettes et balle; – à l’animation de la balle jeu vidéo Pong; Animer la balle; – au mouvement de la […]
By jeu canvas html5 Pong tutorial 8 septembre 2013 - 19 h 15 min
[…] du jeu constitué du terrain, du filet, des raquettes, de la balle et du score jeu vidéo Pong – Raquettes et balle; – à l’animation de la balle jeu vidéo Pong – Animer la balle; – au mouvement de la […]
By jeu canvas html5 Pong 8 septembre 2013 - 19 h 12 min
[…] du jeu constitué du terrain, du filet, des raquettes, de la balle et du score jeu vidéo Pong – Raquettes et balle; – à l’animation de la balle jeu vidéo Pong – Animer la balle; – au mouvement de la […]
By jeu canvas html5 Pong 8 septembre 2013 - 19 h 10 min
[…] du jeu constitué du terrain, du filet, des raquettes, de la balle et du score jeu vidéo Pong – Raquettes et balle; – à l’animation de la balle jeu vidéo Pong – Animer la balle; – et au mouvement de […]
By jeu canvas html5 Pong 8 septembre 2013 - 19 h 07 min
[…] du jeu constitué du terrain, du filet, des raquettes, de la balle et du score jeu vidéo Pong – Raquettes et balle et à l’animation de la balle jeu vidéo Pong – Animer la […]
By jeu canvas html5 Pong 8 septembre 2013 - 19 h 05 min
[…] Avoir lu les tutoriaux consacrés à l’initialisation du projet jeu vidéo Pong 1ere partie, et la mise en place de l’environnement du jeu constitué du terrain, du filet, des raquettes, de la balle et du score jeu vidéo Pong – Raquettes et balle. […]
By Tutoriel jeu canvas html5 Pong 14 août 2013 - 21 h 03 min
[…] plus vite : – mise en place de l’environnement du jeu (terrain, raquettes, balle et score) : ici; – animation de la balle : ici; – animation de la raquette avec le clavier : […]
By jeu canvas html5 Pong tutorial 17 mai 2013 - 18 h 33 min
[…] du jeu constitué du terrain, du filet, des raquettes, de la balle et du score jeu vidéo Pong 2eme partie; – à l’animation de la balle jeu vidéo Pong 3eme partie; – au mouvement de la raquette du […]
By jeu canvas html5 Pong 18 avril 2013 - 8 h 39 min
[…] Avoir lu les tutoriaux consacrés à l’initialisation du projet jeu vidéo Pong 1ere partie, et la mise en place de l’environnement du jeu constitué du terrain, du filet, des raquettes, de la balle et du score jeu vidéo Pong 2eme partie. […]
By jeu canvas html5 Pong 18 avril 2013 - 8 h 37 min
[…] du jeu constitué du terrain, du filet, des raquettes, de la balle et du score jeu vidéo Pong 2eme partie; – à l’animation de la balle jeu vidéo Pong 3eme partie; – et au mouvement de la raquette […]
By jeu canvas html5 Pong 18 avril 2013 - 8 h 36 min
[…] du jeu constitué du terrain, du filet, des raquettes, de la balle et du score jeu vidéo Pong 2eme partie et à l’animation de la balle jeu vidéo Pong 3eme […]
By jeu canvas html5 Pong 17 avril 2013 - 9 h 17 min
[…] du jeu constitué du terrain, du filet, des raquettes, de la balle et du score jeu vidéo Pong 2eme partie; – à l’animation de la balle jeu vidéo Pong 3eme partie; – au mouvement de la raquette du […]
By Tutorial pour créer jeu vidéo Pong 22 mars 2013 - 19 h 22 min
[…] du jeu constitué du terrain, du filet, des raquettes, de la balle et du score jeu vidéo Pong 2eme partie et à l’animation de la balle jeu vidéo Pong 3eme […]
By Tutorial pour créer jeu vidéo Pong 22 mars 2013 - 19 h 22 min
[…] plus vite : – mise en place de l’environnement du jeu (terrain, raquettes, balle et score) : ici; – animation de la balle : ici; – animation de la raquette avec le clavier : […]
By Tutorial pour créer jeu vidéo Pong 21 mars 2013 - 16 h 47 min
[…] Avoir lu les tutoriaux consacrés à l’initialisation du projet jeu vidéo Pong 1ere partie, et la mise en place de l’environnement du jeu constitué du terrain, du filet, des raquettes, de la balle et du score jeu vidéo Pong 2eme partie. […]
By DarkSinus 16 février 2013 - 17 h 17 min
ah une question au fait,
Y a-t-il une raison spéciale de déclarer les fonctions de cette manière:
var foo = fonction (){}
plutôt que
fonction foo (){} ?
By Franck Dubois 20 février 2013 - 23 h 29 min
Avec function foo() {}, tu crées une fonction nommée, la fonction est définie avant l’exécution du code, lorsque javascript parse le code.
Avec var foo = function() {}, tu crées une variable qui pointe sur une fonction anonyme, elle est définie à l’exécution. Tu peux donc la modifier ou rédéfinir à la volée.
Quelque soit la solution choisie, les résultats sont similaires. Le choix se fait selon les besoins, et/ou les habitudes.
By DarkSinus 16 février 2013 - 17 h 10 min
Super tuto !
Je m’amuse bien a manipuler toutes ces techniques que j’ai découverte grâce à ce blog.
j’attends la suite avec impatience,
bravo !
++
By Kran 11 février 2013 - 9 h 45 min
Salut,
Une petite remarque (c’est pas obligatoire), pour que ton jeu soit insérable dans une page existante et qu’il soit non intrusif, il faudrait changer le window.onload par un window.addEventListener(« load »,initialisation,false); ou document.addEventListener(« DOMContentLoaded »,initialisation,false);
Kran
By Franck Dubois 11 février 2013 - 10 h 49 min
J’aime bien, t’es attentif comme lecteur.
Permet moi de te contredire : le addEventListener n’est pas la norme, il résulte d’un ajout d’un navigateur (je ne sais plus lequel) qui date.
Le « onEvent » est la norme, même si addEventListener apporte une certaine finesse dont on a pas besoin ici et que la gestion des événements est expliquée avec cette fonction dans tous les tutos.
Plutôt que addEventListener, mieux vaut envisager d’utiliser la gestion d’événement de JQuery qui est très fine.
Après chacun fait comme il l’entend.
Enfin le code tel qu’il est n’est pas intrusif :
(function () {})(); qui encapsule le code l’en empêche.
Après rien ne t’empêche de proposer un article sur le sujet.
By Kran 5 mars 2013 - 13 h 40 min
Salut,
merci pour ton compliment.
Je suis entièrement d’accord avec toi sur le fait que addEventListener n’est pas la norme.
Cependant, je reviens sur le window.onload = initialisation;, je me suis peut-être mal exprimé sur le mot intrusif.
Par exemple, je veux utiliser une lib tiers qui contient un window.onload et ensuite je veux intégrer ton jeux dans la même page.
Le résultat sera le suivant ton onload va écraser le onload de la lib tiers.
par exemple :
(function () {
window.onload=function(){alert(‘ok’);}
})();
(function () {
// debut du code isole
// le code de ton jeu
window.onload = initialisation; // appel de la fonction initialisation au chargement de la page
})();
Attention, je ne dis que j’ai la science infuse, je veux juste mettre l’accent sur une potentielle source d’erreur chez les débutants, je ne me permettrai pas de dire que cette solution est la meilleur