Memory

Game engine experiences
Open source code

Présentation

Le jeu se compose de paires de cartes portant des illustrations identiques. L’ensemble des cartes est mélangé, puis étalé face contre table. À son tour, chaque joueur retourne deux cartes de son choix. S’il découvre deux cartes identiques, il les ramasse et les conserve, ce qui lui permet de rejouer. Si les cartes ne sont pas identiques, il les retourne faces cachées à leur emplacement de départ.

Le jeu se termine quand toutes les paires de cartes ont été découvertes et ramassées. Le gagnant est le joueur qui possède le plus de paires.

Un jeu très simple qui, pour notre exercice, se jouera en solo.

Le code Javascript

// variables
var canvas,ctx,posX,posY,c1,c2,i,reste;					// globales
var images, tuiles, paires;						// tableaux
 
// paramètres
var C = 	6;
var T = 	80;
var W = 	480;
var H = 	480;
var nbImg = 	20;
var dos = 	19;
var vide = 	20;
 
window.onload = function() {						// préparation du jeu
    canvas = 		document.getElementById('canvas');
    ctx = 			canvas.getContext('2d');
	posX = 			canvas.offsetLeft;
	posY = 			canvas.offsetTop;
	canvas.width = 	W;
	canvas.height = H
	loadImages();
}
 
function loadImages(){							// chargement des images
	images = [];
	for(var i=1; i<nbImg+1; i++){
		var b = new Image();
		b.src = "assets/img"+i+".jpg";
		b.onload = function() {
			images.push(this);
			if(--nbImg==0) init();
		};
	}
}
 
function init() {							// initialisation de la partie
	tuiles = 	[];
	paires = 	[];
	total = 	C*C;
	for (i=0; i<total*.5; i++){
		paires.push(i,i);
	}
	for (i=0; i<total; i++){
		var c = {};
		c.x = parseInt(i%C)*T;
		c.y = parseInt(i/C)*T;
		var r = parseInt(Math.random()*paires.length);
		c.ref = paires[r]+1;
		paires.splice(r,1);
		c.frame = dos;
		tuiles.push(c);
	}
	render();
	canvas.addEventListener("click", choisir, false);
}
 
function choisir(e){												// cliquer sur une case
 
	var c = tuiles[parseInt((e.clientX-posX)/T)+parseInt((e.clientY-posY)/T)*C];				// trouve la case sur laquelle on a cliqué
 
	if(c.frame != vide) {											// si ce n'est pas une case vide
		c.frame = c.ref;										// enregistre l'image à afficher
		if (!c1){											// si aucune carte n'a été retournée
			c1 = c;											// la carte choisie est la première 
		} else if (c1 == c){										// sinon si la carte choisie est déjà retournée
			c1.frame = dos;										// masque la carte
			c1 = null;										// la première carte n'est plus sélectionnée
		} else if (!c2) {										// sinon si la deuxième carte n'est pas choisie
			c2 = c;											// la carte choisie est la deuxième carte
			if (c1.ref == c2.ref) {									// si les références des deux cartes est identique
				c1.frame = c2.frame = vide;							// supprime les deux cartes de l'affichage
				c1 = c2 = null;									// déselectionne les deux cartes
				total -=  2;									// décrémente le total des cartes
				if (total == 0)	finPartie();							// si il n'y a plus de carte à découvrir la partie est terminée
			} 
		} else {											// sinon la paire n'est pas bonne
			c1.frame = c2.frame = dos;								// masque les deux cartes
			c2 = null;										// déslectionne la deuxième carte
			c1 = c;											// enregistre la première carte
		}
	}
	render();												// mise à jour de l'affichage
}
 
function finPartie(){												// fin de partie
	alert("Fin de partie, cliquez pour rejouer.");
	init();
}
 
function render() {												// Dessine le jeu
	for(var i=0; i<tuiles.length; i++){
		ctx.drawImage(images[tuiles[i].frame-1], tuiles[i].x, tuiles[i].y);
	}
}

A retenir

Voilà une fois encore un jeu au code très très simple que vous n’aurez sans doute pas de difficulté à prendre en main.

Commentaires

avatar
  S’abonner  
S'abonner
Facebook Google Linked Skype Twitter
© 2019 Cmarzin - Tous droits réservés | SIRET: 483 511 101 00030 | Mentions légales