Traduction
Tutoriel Inkscape & Boxy - sommaire
Tutoriel Inkscape & Boxy - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
En fait on démarre l'encodage avec un éditeur WYSIWYG de SVG mais on termine en manuel en particulier pour le script.
Dans ce chapitre je vous propose deux jeux en ligne encodés en SVG & JS (pour la partie animation).
Je rappelle que dans un document HTML l'élément SVG est un élément HTML on peut donc lui appliquer la
propriété background avec pour valeur l'url d'une image ou la définition d'un dégradé.
Chaque objet d'un canevas SVG est un noeud du DOM et peut être manipulé par JS ou CSS.
J'ai opté pour du SVG dans la page web (SVG interne) ; ainsi le problème parfois délicat de l'insertion d'un document SVG
dans un document HTML est contourné.
Attention il y aura deux scripts dans ce documents. Veillez bien à ce que les ID soient bien uniques !
Les ID permettent de relier logiquement le code JS à un élément du DOM.
Pour réaliser ce jeu le recours à un éditeur de SVG tel Inkscape ou Boxy SVG n'était pas vraiment utile ...
Observez les paramètres géométriques des trois formes.
Grâce à la commmande "Géométrie" les valeurs des attributs sont des entiers !
Collez le code ci-dessus dans la page web.
La première instruction ( ... ?xml version="1.0" encoding="utf-8"? ...) peut être supprimée !
Il faut identifier chaque objet et la zone dessin et rendre "responsive" cette dernière.
Donc il faut rajouter l'attribut ID au canevas et aux sprites (balle & raquette) :
Il faut aussi rajouter deux instructions HTML juste sous la balise SVG fin :
Vous déplacez la raquette avec les touches 'gauche' et 'droite' du clavier.
Pour allez comprendre pourquoi il faut ajouter l'attribut ID aux objets et à la zone de dessin.
// animation du premier canevas du document HTML
document.querySelector('button').onclick = function()
{
// variables objet :
var svg = document.querySelector ('#canevas1') ;
var balle = document.querySelector('#balle');
var raquette = document.querySelector('#raquette');
// récupération dimensions aire de jeu :
var X =400 ; var Y =400 ;
// coordonnées initiales balle :
var balleX = X/2; var balleY = Y/6;
// directions initiales X et Y de la balle :
var balleDX = 2; var balleDY = 4;
// la raquette : taille et position initiale
var raquetteX = X/2;
var raquetteH = 10;
var raquetteD = Y - raquetteH;
var raquetteW = X/4;
// appel de la fonction jeuballe toutes les 20 millisecondes
var boucle = setInterval(jeuballe,20);
document.onkeydown = function(e)
{
if (e.keyCode == 37) gauche();
if (e.keyCode == 39) droite();
} // fin fonction
// fonction jeuballe
function jeuballe()
{
// nouvelles coordonnées ballee
balleX = balleX + balleDX ;
balleY = balleY + balleDY ;
balle.setAttribute("cx", balleX);
balle.setAttribute("cy", balleY);
// si balle touche bords gauche ou droit la direction X de la balle est inversée
if (balleX + balleDX > X - 15 || balleX + balleDX < 15) balleDX = -balleDX;
// si balle touche le haut la direction Y de la balle est inversée
if (balleY + balleDY < 15) balleDY = -balleDY;
// si balle touche le bas
else if (balleY + balleDY > Y - 15)
{
// et si balle touche raquette alors direction Y de la balle est inversée
if (balleX > raquetteX && balleX < raquetteX + raquetteW) balleDY = -balleDY;
// sinon fin de partie
else { clearInterval(boucle); alert(' perdu ! ') ; }
} // fin si
} // fin fonction jeuballe
function gauche()
{raquetteX = raquetteX - 20;
if (raquetteX < 0) raquetteX = 0;
raquette.setAttribute("x", raquetteX); }
function droite()
{ raquetteX = raquetteX + 20;
if (raquetteX > X - raquetteW) raquetteX = X - raquetteW;
raquette.setAttribute("x", raquetteX); }
} // fin fonction anonyme appelée par le bouton
Dans le script le canevas et les sprites sont identifiés via leur ID.
La fonction jeuballe() est appelée toutes les 20 millisecondes. Donc si vous trouvez que ça va trop vite il suffit de modifier le deuxième argument de la fonction setInterval()
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.
Déplacez la fusée avec les touches "gauche" et "droite" pour éviter la collision avec la planète.
Je produis un ciel étoilé !
J'ai créé un symbole (ou modèle) que j'ai cloné N fois.
Notez que le fond est transparent ...
Un symbole (une étoile floutée) a été défini et a été cloné N fois.
La première ligne peut être supprimée.
Il faut modifier la balise SVG début pour obtenir comme ci-dessous :
J'ai rajouté le "namespace" pour gérer les liaisons.
Mais aussi l'attribut "style" avec un "background" correspondant à un dégradé linéaire.
Et l'attribut "width" pour un affichage "responsive".
Et enore l'attribut ID au canevas (ID utilisé par le script).
Il faut ajouter avant la balise SVG fin l'insertion d'images par liaison :
Il faut insérer après la balise SVG fin deux instructions HTML :
Dans le conteneur SCRIPT (en fin de document HTML) j'insère :
// animation deuxième canevas du document HTML
document.querySelectorAll('button')[1].onclick = function()
{
var svg = document.querySelector ('#canevas2') ;
var planete = document.getElementById('planete') ;
var fusee = document.getElementById('fusee');
var cote = 80;
var limiteX = 500 -cote;
var limiteY = 500 - cote;
var remontee = -3;
var delta = 3;
// coordonnées de départ planète
var XP = 50;
var YP = 200;
// coordonnées de départ fusée
var XV = 50;
var YV = 400;
var boucle = setInterval(mouvement, 30);
function mouvement()
{
//gestion rebondissement planère
if(XP>=limiteX) {XP = limiteX ; delta = -3; }
if (XP<=0) {XP =0 ; delta = 3;}
XP+=delta;
planete.setAttribute("y",YP);
planete.setAttribute("x",XP);
// La fusée ne doit pas sortir du canevas
if (YV <=0) {YV = limiteY; XV = 175; }
if (XV <=0){ XV = 0 ; }
if (XV >=limiteX) {XV = limiteX;}
YV+=remontee ;
fusee.setAttribute("x",XV);
fusee.setAttribute("y",YV);
// gestion collision
if((Math.abs(XV-XP) < cote) && (Math.abs(YV-YP)< cote))
{alert("perdu"); clearInterval(boucle); }
// gestion clavier
document.onkeydown = function(e)
{
if(e.keyCode ==37) dep_gauche();
if(e.keyCode ==39) dep_droite();
} // fin fonction anonyme
function dep_gauche() {XV-=5; }
function dep_droite() {XV+=5; }
} // fin fonction mouvement
}
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 les X des deux objets ET leurs Y est inférieur à cote
cela signifie que les deux sprites se chevauchent donc collision !
J'admet que c'est un peu basique car la fusée est deux fois plus haute que large ...
Notez aussi la gestion du rebondi de la planète ; son abcisse ne doit pas être inférieure à 0 et supérieur
à limiteX.
delta change de signe à chaque rebond.
Quant à la gestion du clavier en programmation JS, je vous renvoie au premier jeu.
Vous pouvez augmenter le deuxième argument de la fonction setInterval() pour ralentir le déplacement horizontal de la planète.