Créer un jeu de morpion en flash

le 5 juillet 2011 • Flash • par Dawlin

Vous vous souvenez de quand on avait appris ce que c'était que les maps ? Bien, aujourd'hui on va en faire une petite application toute simple : un jeu de morpion.

Parce que si on y réfléchit bien, un jeu de morpion, c'est une map de 3x3 cases, que l'on remplit avec une valeur 0 pour vide, 1 pour joueur 1 et 2 pour joueur 2.

C'est donc tout simple, allons-y !

Petit rappel, ce tutoriel indispensable sur les maps est ici

Déroulement du tuto

Pour commencer, il faut que je vous explique comment je compte organiser ce tutoriel. Vous vous trouvez dans la première partie d'un tutoriel en trois parties.

Dans la première partie, nous allons apprendre à créer un jeu de morpion pour deux joueurs sur un même ordinateur :

Dans la deuxième partie, puisque c'est plus fun, nous allons apprendre à créer un morpion en ligne entre deux joueurs. Ce tutoriel utilisera PhP.

(Mais je dois vous avouer que le système sera très rudimentaire et qu'il ne servira qu'à préparer la troisième partie)

Et enfin, dans la troisième partie, nous ferons un système de morpion à deux joueurs en ligne multiutilisateurs. Ce tutoriel utilisera PhP.

Ce jeu sera organisé sous forme de salon où chacun pourra rentrer, "défier" un autre joueur puis jouer avec lui. Ce tutoriel est encore loin d'être terminé, ne vous attendez pas à ce qu'il paraisse avant longtemps

/!\ Attention : En raison de la complexité du code et de l'inutilité de le faire, nous ne programmerons pas d'Intelligence Artificielle capable de jouer toute seule contre l'utilisateur

Partie 1 : création d'un morpion deux joueurs

Le résultat, ce sera ça (plus une autre version en bas de page) :

Préparation du jeu

Bon. Il va nous falloir, avant de coder, une map de neuf cases, des pions (une croix et un rond), des boutons pour cliquer dessus, un cadre qui indique à qui c'est de jouer, etc, etc...

Créons un carré de 360x360 pixels, blanc, découpé tous les 120 pixels en 9 carrés, on en fait un symbole "map" et son occurrence est "map" :

Dedans, on crée un bouton rose flashy (qui est destiné à devenir transparent, et chez moi, ce qui est destiné à devenir transparent est rose flashy comme ça je sait), que moi perso j'ai appelé "boutonTransp" le bien-nommé, et on le duplique 9 fois sur toutes les cases (on aurait pu demander au code de le faire, mais on trime, c'est mieux )

devient

Puis, on clique sur les actions de chaque bouton et on leur met le code suivant :


on(release){
	//On lui dit de faire la fonction caser en fonction de sa position à lui :
	_parent.caser(0,0);	
}

Vous comprendrez plus tard ce qu'est la fonction caser, quand on codera. en attendant, attention ! chaque bouton doit avoir ses numéros de case !! : ici on a mis 0,0 parce que c'est la première en haut à gauche, mais chaque bouton doit avoir son propre numéro pour qu'on sache dans quelle case placer le symbole (croix ou rond). Pour vous aider voici un petit schéma de quel bouton a quels numéros :

Vous comprendrez plus tard ce que ça signifie quand on codera la map

Les jetons ! J'ai oublié les jetons !

Il ne vous faut que deux symboles, une croix et un rond (un carré et une étoile, un jaune et un vert, un 0 et un 1, une fille et un garçon... ce que vous voulez) :

Ces symboles ont, dans la bibliothèque, des occurrences bibliothèques (et si vous ne savez pas ce que c'est, c'est que vous brûlez les étapes et que vous devriez être en train de lire les tutoriels du débutant).

Respectivement "croix" et "rond". Oh comme c'est bizarre

Voilà pour les pions.

Bon. Maintenant on pourrait commencer à coder, notre jeu marcherait. Mais on va agrémenter un peu ce que j'appelle le "parajeu", c'est à dire tout le reste. On va faire un cadre qui dit "c'est à joueur n de jouer !"

Alors on dessine un joli rectangle et on le convertit en un symbole appellé "parajeu" :

Et dedans on va lui mettre deux images-clés :

Première image clé : C'est à joueur 1 de jouer :

Vous noterez que je fais attention à mettre le clip rond, parce que si je veux changer de design il changer tout seul

De même pour joueur 2, je vous fais pas de screen

Par contre, on va vérifier quelle image on affiche, donc dans les actions de l'image 1 on met :


stop();
//On vérifie en permanence
this.onEnterFrame = function(){
	//Et on va à la case qui correspond au numéro du joueur
	if(_parent.quiJoue==1){
		gotoAndStop(1);	
	}
	else{
		gotoAndStop(2);	
	}
}

Alors la variable "quiJoue" on la définira dans le code.

Dernier point, après on passe au code :

Quand quelqu'un gagne, il nous faut une fenêtre qui dit "ouééé, il a gagnééé". Donc on va créer un clip qui s'appelle "finJeu" et qui aura trois images clés comme ceci :

Et sur les actions de la première image de ce clip :


gotoAndStop(_parent.gagnant);

Pareil, la variable gagnant sera définie dans le code quand quelqu'un aura gagné.

Note : Le clip "finJeu" a une occurrence bibliothèque "finJeu".

On peut maintenant programmer le morpion en lui-même

Le code

Comme on l'a dit tout à l'heure, on va se servir de maps. D'une seule, j'entends . Dernière chance de rattraper son retard sur les maps, après je considère que je peux bourriner

Notre map 3x3 s'organisera comme ceci :


//Tout d'abord je crée une map comme ceci :
myMap=[
[0,0,0],
[0,0,0],
[0,0,0]];
/*
Organisée comme ceci, on voit qu'elle correspond aux 9 cases du jeu...
pour lire le contenu d'une case, j'utilise
myMap[i][j];
i étant la ligne, j la colonne
*/

Créons maintenant une fonction verifier pour lire le contenu de la case :


verifier = function(vi,vj){
	return(myMap[vj][vi]);	
}
//Exemple : trace(verifier(0,0));

/!\ Attention : Une array commence par 0, ainsi la case en haut à gauche ne s'appelle pas 1-1 mais bien 0-0, et celle en bas à droite 2-2

Nous avons donc une map et nous pouvons lire le contenu de chaque case. essayons maintenant d'écrire :


/*
Petit récapitulatif du contenu :
0 = case vide
1 = joueur 1 (rond)
2 = joueur 2 (croix)
*/

/*
Si quiJoue = 1, je mettrai un rond,
Si quiJoue = 2, je mettrai une croix,
nous définissons cette variable maintenant mais elle sera redéfinie à chaque
nouveau tour d'un joueur.
*/
quiJoue = 1;

/* la fonction caser sert à caser un symbole dans une case définie par 
son numéro de ligne i
son numéro de colonne j
*/
caser = function(vi,vj){

	//trace(vi+"-"+vj);
	//On vérifie si la case est vide et si le jeu n'est pas fini
	if(verifier(vi,vj)==0 && !gagnant){
		if(quiJoue==1){
			var clp=map.attachMovie("rond","r"+((vi*10)+(vj)),((vi*10)+(vj)));	
		}
		else{
			var clp=map.attachMovie("croix","c"+((vi*10)+(vj)),((vi*10)+(vj)));
		}
		//On met la map à jour ...
		myMap[vj][vi]=quiJoue;
		//Et on vérifie si gagnant (Cette fonction est définie dans le calque "GAGNANT")
		verifEnsemble();
		//On a crée un clip dans le clip map en fonction de qui jouait, maintenant on le place
		clp._x = 120*vi;
		clp._y = 120*vj;
		//Note : mes cases font 120 pixels.
		
		/*
		Maintenant il faut faire en sorte que le joueur change à chaque fois qu'on a joué
		*/
		//Si on est joueur 1...
		if(quiJoue==1){
			//On passe joueur 2
			quiJoue=2;
		}
		//Si on est joueur 2...
		else{
			//On passe joueur 1
			quiJoue=1;
		}
	}
	//Si elle est pleine on ne fait rien...
	else{}
}
//Exemple :
//caser(1,2);

(On retrouve la fonction "caser" qu'on a mise dans les boutons tout à l'heure !)

Cette fonction permet de modifier la map, mais aussi de vérifier si le jeu est terminé. Cette fonction, dénommée "verifEnsemble()", je la définie dans un deuxième calque de scripts que j'appelle "GAGNANT" (c'est plus clair pour s'y retrouver).

Elle va être chargée, en combinant des fonctions qui vérifient le contenu des lignes et des colonnes, de définir un "score" pour ces lignes et colonnes, et si ce score est égal à 3, c'est que quelqu'un a gagné.


/*
Voici ma fonction qui se passe si un gagnant est détecté
en fonction du numéro de joueur (3 est match nul)
*/
gagne = function(vid){
	gagnant = vid;
	this.attachMovie("finJeu","fj",1);
}
/*
Créons une fonction pour verifier si quelqu'un a gagné...
pour ça je crée une fonction pour vérifier si c'est gagné, une qui vérifie pour une ligne,
une pour une colonne, un pour les diagonale, puis une grosse fonction d'ensemble...
*/
sommeG = function(v1,v2,v3){
	/*
	On a nos trois valeurs pour une ligne, une colonne, une diagonale... 
	Logiquement, si toutes ces valeurs sont différentes de 0 et que
	la somme des valeurs est égale à 3, alors joueur 1 a gagné,
	si la somme de toutes ces valeurs est égale à 6, alors joueur 2 a gagné
	*/
	if(v1!=0 && v2!=0 && v3!=0 && v1+v2+v3==3){
		gagne(1);
	}
	else if(v1+v2+v3==6){
		gagne(2);	
	}
}
//Pour vérifier une ligne grâce à cette fonction
verifLigne = function(vi){
	col0 = verifier(0,vi);
	col1 = verifier(1,vi);
	col2 = verifier(2,vi);
	
	sommeG(col0,col1,col2);
}
//Pour vérifier une colonne grâce à cette fonction
verifCol = function(vj){
	col0 = verifier(vj,0);
	col1 = verifier(vj,1);
	col2 = verifier(vj,2);
	
	sommeG(col0,col1,col2);
}
//Pour vérifier les diagonales
verifDiags = function(){
	//diagonale 1
	col0 = verifier(0,0);
	col1 = verifier(1,1);
	col2 = verifier(2,2);
	
	sommeG(col0,col1,col2);
	//diagonale 2
	col0 = verifier(0,2);
	col1 = verifier(1,1);
	col2 = verifier(2,0);
	
	sommeG(col0,col1,col2);
}
//et enfin une fonction pour vérifier les matchs nuls
verifMatchNul=function(){
	/* Si toutes les cases sont remplies et que leur sommes est égale à 14 ou 13,
	et qu'aucun gagnant n'a été repéré par une des fonctions ci-dessus, alors il y a match nul*/
	
	v00 = verifier(0,0);
	v01 = verifier(0,1);
	v02 = verifier(0,2);
	s0 = v00+v01+v02;
	
	v10 = verifier(1,0);
	v11 = verifier(1,1);
	v12 = verifier(1,2);
	s1 = v10+v11+v12;
	
	v20 = verifier(2,0);
	v21 = verifier(2,1);
	v22 = verifier(2,2);
	s2 = v20+v21+v22;
	
	somme=s0+s1+s2;
	
	if(somme>=13 || somme>=14){
	gagne(3);
	//On définira dans la fonction gagne() que si "3" a gagné,  c'est match nul ...
	}
}

//Et cette fonction met en oeuvre toutes celles ci-dessus
verifEnsemble = function(){
	verifLigne(0);
	verifLigne(1);
	verifLigne(2);
	
	verifCol(0);
	verifCol(1);
	verifCol(2);
	
	verifDiags();
	
	verifMatchNul();
}

Voilà. C'est fini Pourquoi c'est fini ? parce que si on gagne/ on fait match nul, la fonction "gagne()" va attacher le clip "finjeu" qu'on avait créé tout à l'heure, et celui-ci va se charger d'afficher qui a gagné.

Alors. Maintenant, exercice sur un cahier propre : créez un bouton rejouer, placé dans le clip "finJeu", qui réinitialise la map, enlève tous les pions, et recommence tout

Ze veux les sources !!

Voici la source du tutoriel n°1 sur les morpions (petit jeu de mot pas fait exprès )

Petit variante de design

Bawi, vous avez votre jeu de morpion, à vous de le décorer pour en faire votre jeu. Puisque c'est bientôt l'été, moi, mon pied et ma serviette on vous a fait un petit design maison :

Voilà, vivement le tuto 2 ,

Dawlin