Pas encore membre ? Enregistrez-vous ! | Identifiants égarés ?
Fermer

Le jeu du serpent

  • Introduction
  • Informations
Le jeu du serpent Ce tutoriel va vous permettre de réaliser le jeu "snake" (le serpent) auquel nous avons tous joué sur nos téléphones portables !!  
Netger
  • Auteur : Netger
  • Publication : 15 juil. 2006 16:33
  • Consultations : 6489
 

1. Nouveau document

Commençons par créer un nouveau document flash.
Le jeu du serpent image 1 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

Le jeu du serpent image 2 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

Le jeu du serpent image 3 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 :

Le jeu du serpent image 4 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

Le jeu du serpent image 5 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 actionscript
  1. on (keyPress "")
  2. {
  3. 	if (yv == 0 && !mvt)
  4. 	{
  5. 		yv = -1;
  6. 		xv = 0;
  7. 		mvt = true;
  8. 	}
  9. }
  10.  
  11. on (keyPress "")
  12. {
  13. 	if (xv == 0 && !mvt)
  14. 	{
  15. 		yv = 0;
  16. 		xv = -1;
  17. 		mvt = true;
  18. 	}
  19. }
  20.  
  21. on (keyPress "")
  22. {
  23. 	if (yv == 0 && !mvt)
  24. 	{
  25. 		yv = 1;
  26. 		xv = 0;
  27. 		mvt = true;
  28. 	}
  29. }
  30.  
  31. on (keyPress "")
  32. {
  33. 	if (xv == 0 && !mvt)
  34. 	{
  35. 		yv = 0;
  36. 		xv = 1;
  37. 		mvt = true;
  38. 	}
  39. }
 

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.

Le jeu du serpent image 6 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 actionscript
  1. on(release)
  2. {
  3. 	gotoAndPlay("1");
  4. }
 
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.

Le jeu du serpent image 7 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 actionscript
  1. snake._visible = false;
  2. score = 0;
  3. tete = 3;
  4. queue = 1;
  5. xv = 0;
  6. yv = 1;
  7. x = 200;
  8. y = 200;
  9. s = [];
  10. croix = true;
  11. ajout = false;
  12. mvt = false;
  13. 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 actionscript
  1. function game()
  2. {
  3. 	// direction de la tete
  4. 	x += 10*xv;
  5. 	y += 10*yv;
  6.  
  7. 	// on duplique la tete dans le sens de la direction actuelle
  8. 	tete++;
  9.  
  10. 	duplicateMovieClip(snake, "t"+tete, tete);
  11.  
  12. 	t = _root["t"+tete];
  13.  
  14. 	t._x = x;
  15. 	t._y = y;
  16.  
  17. 	// Si il y a collision "gameover"
  18. 	if (s[x+30*y] || (x<20) || (x>370) || (y<30) || (y>380))
  19. 	{ 
  20. 		gotoAndStop(3);
  21. 	}
  22.  
  23. 	// initialisation de la valeur du vecteur s[] sur "true"
  24. 	s[x+30*y] = true;
  25.  
  26. 	// si ajout=true on augmente le score
  27. 	if (ajout)
  28. 	{
  29. 		ajout = false;
  30. 		score++;
  31. 		// sinon ajout=false, on fait avancer la queue
  32. 	}
  33. 	else
  34. 	{
  35. 		t = _root["t"+queue];
  36. 		s[t._x+30*t._y] = false;
  37. 		removeMovieClip(t);
  38. 		queue++;
  39. 	}
  40.  
  41. 	// on géle l'affichage
  42. 	mvt = false;
  43.  
  44. 	// mise à jour de l'affichage
  45. 	updateAfterEvent();
  46. }
  47.  
  48. pom.onEnterFrame = function()
  49. {
  50. 	// si le serpent est sur la nourriture, il faut incrementer le score et placer une nouvelle nourriture
  51. 	if (this._x == x && (this._y == y))
  52. 	{
  53. 		croix = ajout=true;
  54. 	}
  55.  
  56. 	// Si croix=true, on place aléatoirement une nouvelle nourriture
  57. 	if (croix)
  58. 	{
  59. 		croix = false;
  60.  
  61. 		this._x = 10*(random(36)+2);
  62. 		this._y = 10*(random(36)+3);
  63. 	}
  64. };
  65.  
  66. var jeu = setInterval(game, speed);
  67. stop();
 
FRAME 3
Et voici l'étape du "GameOver" :
Code-source actionscript
  1. clearInterval(jeu);
  2. t = tete;
  3. while (queue<=t)
  4. {
  5. 	removeMovieClip(this["t"+t]);
  6. 	t--;
  7. }
  8. stop();
 
 
  • Rédiger un commentaire
  • Afficher les commentaires (0)
Vous devez être identifié pour poster un commentaire
Aucun commentaire