Accueil

Traduction

Dessiner avec SVG - sommaire

Dessiner avec SVG - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

SVG & JavaScript : jeux vidéos

Dans ce chapitre je vous présente deux jeux réalisés en combinant deux standards du web : SVG & Javascript.
à la place de SVG j'aurais pu utiliser la librairie Canvas ...

Premier jeu

Un carré rouge balaie la fenêtre de jeu.
Un carré vert remonte inexorablement vers le bord supérieur.
Grâce aux touches directionnelles "gauche" et "droite" vous devez piloter le carré vert pour qu'il n'entre pas en collision avec le carré rouge.

Le rendu dans un Iframe

Le code HTML et SVG de cette page

Le script de la page

Le code ne pose pas de difficulté majeure.
La fonction mouvement() est appelée toutes les 30 millisecondes.
Gestion des collisions : si l'écart absolu entre entre les abcisses des deux carrés ET leurs ordonnées est inférieur à cote cela signifie que les deux carrés se chevauchent donc collision !
Notez aussi la gestion du rebondi du carré vert : XR (abcisse du carré rouge) ne doit pas être inférieur à 0 et supérieur à limiteX. delta doit changer de signe lors de chaque rebond.
Notez aussi la gestion du clavier en JS.

Deuxième jeu vidéo : le squash

Vous déplacez la raquette avec les touches 'gauche' et 'droite' du clavier pour que la balle (boule rouge) ne touche pas le bord inférieur.
Pour lancer le jeu il suffit de cliquer sur le bouton "jouez" !

Le code HTML & SVG de la page

Le script

Commentaire

Le code HTML et SVG ne pose aucune difficulté : un cercle (la balle) et un rectangle (la raquette) dans la zone de dessin SVG et un bouton de commande avec la la légende "jouez !".
La fonction jeuballe() qui est appelée toutes les 20 millisecondes. Donc si vous trouvez que ça va trop vite ...

Etudions la fonction jeuballe en détail.
Cette fonction détermine les nouvelles coordonnées cx et cy de la balle.
La position de la balle est fonction des variables balleDX et balleDY. Si la balle heurte le côté gauche ou droit, la valeur de balleDX s’inverse, et donc celle-ci rebondit dans la direction opposée.
De même, si la balle heurte le plafond, la valeur balleDY s’inverse, et celle-ci rebondit dans la direction opposée.
Si la balle heurte le bas un test est effectué pour savoir si elle a touché aussi la raquette. Si oui la valeur balleDY  s’inverse pour que la balle rebondisse. En revanche, si la balle heurte le bas (mais sans toucher la raquette) alors la partie est terminée !
Si la partie est terminée, la boucle de jeu est arrêtée grâce à clearInterval et un message s’affiche pour annoncer la fin de la partie.

Les fonctions gauche et droite permettent de modifier les coordonnées du coin supérieur gauche de la raquette.
Ces fonctions sont appelées respectivement par la touche gauche et droite du clavier.

Nous aurions pu utiliser CANVAS plutôt que SVG pour réaliser ce jeu de SQUASH.
Superbes animations et jeux vidéos avec Canvas