![[Fléche]](../images/defaut/icones/puce_navig.gif)
Tutorial Flash : Le jeu Snake
Introductions
Informations
Résultat
Ce tutorial va vous permettre de réaliser le jeu "snake" (le serpent) auquel nous avons tous joué sur nos téléphones portables !!
1. Créer un nouveau document flash et préparer la scène
Commençons par créer un nouveau document flash.Attribuez lui les propriétés suivantes :
- dimensions : 400 x 400 pixels (les dimensions définissent certains paramètres du script)
- couleur d'arrière-plan : #99CCCC (vous pouvez bien sur modifier la couleur du background).
- cadence : 12 images par secondes
- unité de la règle : pixels
2. Définir le terrain de jeu
Nous allons continuer par définir les bords du terrain de jeu.Pour le moment cette définition ne sera que graphique : les collisions avec les bords seront gérées par le code AS que nous écrirons après.
Il nous suffit donc de tracer un cadre carré de 360px de côté aligné à 20px sur l'axe des X et à 30px sur l'axe des Y
3. L'affichage du score
Pour ce jeu nous souhaitons afficher le score du joueur : à chaque fois que le serpent mange une pomme, le score augmente de 1 point.Il nous faut donc placer un champs de texte dynamique.
Donnez lui le nom de variable "score".
4. Créer le serpent et la pomme
Nous allons maintenant mettre en place les principaux acteurs de notre jeu : le serpent et la pomme.Commencez par créer un nouveau MC que nous appellerons "snake" et pour dessiner notre serpent, tracez y un carré de 9px de côté aux coordonnées X=0.2 et Y=0 :
Passons maintenant à la pomme.
Créer un nouveau MC que nous appellerons "pom".
Dessinez un petit carré de 2px de côté et dupliquez le 3 fois pour créer ce symbole qui représentera notre pomme.
5. Gestion du déplacement du serpent
Pour gérer les déplacements du serpent, nous allons créer un symbole bouton vide appelé "control".Utilisez le code suivant pour gérer les déplacement du serpent en fonction du pavé directionnel :
Code-source : AS
on (keyPress "<Up>")
{
if (yv == 0 && !mvt)
{
yv = -1;
xv = 0;
mvt = true;
}
}
on (keyPress "<Left>")
{
if (xv == 0 && !mvt)
{
yv = 0;
xv = -1;
mvt = true;
}
}
on (keyPress "<Down>")
{
if (yv == 0 && !mvt)
{
yv = 1;
xv = 0;
mvt = true;
}
}
on (keyPress "<Right>")
{
if (xv == 0 && !mvt)
{
yv = 0;
xv = 1;
mvt = true;
}
}
6. Préparation de la scéne pour le code AS
Nous allons pouvoir préparer notre scène afin d'y écrire le code AS qui permettra de gérer le fonctionnement du jeu.Nous allons dés maintenant définir la frame "GameOver" du jeu.
Créez un nouveau calque et placez-y une image clé vide à la frame 3.
Notez ensuite "GameOver" puis créez un bouton "rejouer" pour y placer le code suivant :
Code-source : AS
on(release){
gotoAndPlay("1");
}Pour finir cette étape placer les MC snake et pom sur un nouveau calque, comme sur l'illustration.
7. Le code ActionScript
Nous allons maintenant pouvoir écrire le code AS qui permettra de gérer le déroulement du jeu.Toute ces parties de code devront être insérées sur le calque "background".
FRAME 1
Nous allons ici définir et initialiser les variables :
Code-source : AS
snake._visible = false;
score = 0;
tete = 3;
queue = 1;
xv = 0;
yv = 1;
x = 200;
y = 200;
s = [];
croix = true;
ajout = false;
mvt = false;
speed = 100;
FRAME 2
Passons maintenant au plus important : la rédaction du code AS qui doit gérer le bon déroulement du jeu
Code-source : AS
function game()
{
// direction de la tete
x += 10*xv;
y += 10*yv;
// on duplique la tete dans le sens de la direction actuelle
tete++;
duplicateMovieClip(snake, "t"+tete, tete);
t = _root["t"+tete];
t._x = x;
t._y = y;
// Si il y a collision "gameover"
if (s[x+30*y] || (x<20) || (x>370) || (y<30) || (y>380))
{
gotoAndStop(3);
}
// initialisation de la valeur du vecteur s[] sur "true"
s[x+30*y] = true;
// si ajout=true on augmente le score
if (ajout)
{
ajout = false;
score++;
// sinon ajout=false, on fait avancer la queue
}
else
{
t = _root["t"+queue];
s[t._x+30*t._y] = false;
removeMovieClip(t);
queue++;
}
// on géle l'affichage
mvt = false;
// mise à jour de l'affichage
updateAfterEvent();
}
pom.onEnterFrame = function()
{
// si le serpent est sur la nourriture, il faut incrementer le score et placer une nouvelle nourriture
if (this._x == x && (this._y == y))
{
croix = ajout=true;
}
// Si croix=true, on place aléatoirement une nouvelle nourriture
if (croix)
{
croix = false;
this._x = 10*(random(36)+2);
this._y = 10*(random(36)+3);
}
};
var jeu = setInterval(game, speed);
stop();
FRAME 3
Et voici l'étape du "GameOver" :
Code-source : AS
clearInterval(jeu);
t = tete;
while (queue<=t)
{
removeMovieClip(this["t"+t]);
t--;
}
stop();
