Código de JavaScript - Juego de memoria (Memorama)

Imágen de perfil
Val: 1.288
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Juego de memoria (Memorama)gráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(12)
Actualizado el 25 de Noviembre del 2017 por Alejandro (Publicado el 25 de Febrero del 2017)
25.546 visualizaciones desde el 25 de Febrero del 2017
Hice modificaciones a un código que saque de un libro ya que:
1.- Las cartas no siempre generaban pares
2.- Podía voltear mas de 2 cartas sin cubrirlas
3.- Cuando se terminaban las cartas quedaba el fondo

Así que las cartas ya siempre son en pares y limita a descubrir solo 2.
Al terminar las cartas dice "juego terminado" y al clickar comienza uno nuevo.

Es muy sencillo pero es base para desarrollos mas complejos, si tengo oportunidad luego lo publico con imágenes jeje

memorama

memorama11

Requerimientos

Navegador que soporte Canvas.

1.0
estrellaestrellaestrellaestrellaestrella(8)

Actualizado el 6 de Febrero del 2018 (Publicado el 25 de Febrero del 2017)gráfica de visualizaciones de la versión: 1.0
7.664 visualizaciones desde el 25 de Febrero del 2017
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

58b0c7472fc79-memorama21
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<head>
	<script language="javascript" type="text/javascript">
		var ctx, canvas;
		var primerCarta = true;
		var cartaPrimera, cartaSegunda;
		var colorDelante="yellow";
		var colorAtras="blue";
		var colorCanvas="green";
		var inicioX=30;
		var inicioY=30;
		var cartaMargen=30;
		var cartaLon=30;
		var cartaAncho=cartaLon*4;
		var cartaAlto=cartaLon*4;
		var cartas_array=new Array();
		var iguales=false;
		var cartas=0;
 
		window.onload = iniciar;
 
		function iniciar(){
			canvas=document.getElementById("miCanvas");
			canvas.width=630;
			canvas.height=510;
			if(canvas && canvas.getContext){
				ctx = canvas.getContext("2d");
				if(ctx){
					canvas.removeEventListener("click",iniciar,false);
					canvas.addEventListener("click",selecciona,false);
					tablero();
					barajar();
					aciertos();
				}else{
					document.write("Tu navegador no soporta canvas");
				}
			}
		}
 
		function tablero(){
			var i, j;
			var carta;
			var x=inicioX;
			var y=inicioY;
			for(i=0; i<4; i++){
				for(j=0; j<3; j++){
					carta=new Carta(x,y,cartaAncho,cartaAlto,i);
					cartas_array.push(carta);
					carta.dibuja();
 
					y +=inicioY+cartaAlto;
				}
				y = inicioY;
				x+=cartaAncho+cartaMargen;
			}
		}
 
		function Carta(x,y,ancho,largo,info){
			this.x=x;
			this.y=y;
			this.ancho=ancho;
			this.largo=largo;
			this.info=info;
			this.dibuja=dibujaCarta;
		}
		function dibujaCarta(){
			ctx.fillStyle=colorAtras;
			ctx.fillRect(this.x,this.y,this.ancho,this.largo);
		}
 
 
		function barajar(){
			var i,j;
			var aTemp1= new Array();
			var aTemp2= new Array();
			var lon=cartas_array.length/2;
			for(i=0; i<lon;i++){
				do{
					j=Math.floor(Math.random()*lon);
				}while(aTemp1.indexOf(j)!=-1)
				aTemp1.push(j);
				do{
					j=Math.floor(Math.random()*lon);
				}while(aTemp2.indexOf(j)!=-1)
				aTemp2.push(j);
			}
			aTemp1 = aTemp2.concat(aTemp1);
			for(i=0; i<lon*2; i++){
				cartas_array[i].info=aTemp1[i];
			}
		}
 
		function ajusta(xx,yy){
			var posCanvas = canvas.getBoundingClientRect();
			var x = xx-posCanvas.left;
			var y = yy-posCanvas.top;
			return {x:x,y:y}
		}
		function selecciona(e){
			var pos=ajusta(e.clientX,e.clientY);
			//alert(pos.x+','+pos.y);
 
			for(var i=0; i<cartas_array.length; i++){
				var carta = cartas_array[i];
				if(carta.x>0){
					if( (pos.x>carta.x) && (pos.x<carta.x+carta.ancho) && (pos.y>carta.y) && (pos.y<carta.y+carta.largo)){
						if((primerCarta) || (i!=cartaPrimera)) {
							break;
						}
					}
				}
			}
			if(i<cartas_array.length){
				if(primerCarta){
					cartaPrimera=i;
					primerCarta=false;
					pinta(carta);
				}else{
					canvas.removeEventListener("click",selecciona,false);
					cartaSegunda=i;
					pinta(carta);
					primerCarta=true;
					if(cartas_array[cartaPrimera].info==cartas_array[cartaSegunda].info){
						iguales=true;
						cartas++;
						aciertos();
					}else{
						iguales=false;
					}
					setTimeout(volteaCarta,1000);
				}
			}
		}
		function pinta(carta){
			ctx.fillStyle = colorDelante;
			ctx.fillRect(carta.x,carta.y,carta.ancho,carta.largo);
 
			ctx.font="bold 40px comic";
			ctx.fillStyle = "black";
			ctx.fillText(String(carta.info), carta.x+carta.ancho/2-10, carta.y+carta.largo/2+10);
		}
		function volteaCarta(){
			if(!iguales){
				cartas_array[cartaPrimera].dibuja();
				cartas_array[cartaSegunda].dibuja();
			}else{
				ctx.clearRect(	cartas_array[cartaPrimera].x,
								cartas_array[cartaPrimera].y,
								cartas_array[cartaPrimera].ancho,
								cartas_array[cartaPrimera].largo);
 
				ctx.clearRect(	cartas_array[cartaSegunda].x,
								cartas_array[cartaSegunda].y,
								cartas_array[cartaSegunda].ancho,
								cartas_array[cartaSegunda].largo);
 
				cartas_array[cartaPrimera].x = -1;
				cartas_array[cartaSegunda].x = -1;
			}
			if(cartas<6){
				canvas.addEventListener("click",selecciona,false);
			}else{
				cartas=0;
				cartas_array=[];
				canvas.addEventListener("click",iniciar,false);
				ctx.fillStyle="white";
				ctx.fillText("JUEGO TERMINADO",120,canvas.height/2);
			}
		}
 
		function aciertos(){
			ctx.save();
			ctx.clearRect(0,480,canvas.width,canvas.height);
			ctx.fillStyle="gray"
			ctx.fillRect(0,480,canvas.width,canvas.height);
			ctx.font = "bold 40px comic";
			ctx.fillStyle="black";
			ctx.fillText("Aciertos: "+String(cartas),canvas.width-220,510);
			ctx.restore();
		}
	</script>
	<style>
		body{
			width: 630px;
			margin: auto;
		}
		h1{
			text-align:center;
		}
		#miCanvas{
			border:dotted 2px yellow;
			background:green;
		}
	</style>
</head>
<body>
	<h1>Memorama Canvas</h1>
	<canvas id="miCanvas"></canvas>
</body>



Comentarios sobre la versión: 1.0 (8)

Imágen de perfil
25 de Febrero del 2017
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
Imágen de perfil
25 de Febrero del 2017
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
Imágen de perfil
2 de Abril del 2017
estrellaestrellaestrellaestrellaestrella
Excelete Alejandro gracias por el aporte. Se podra ampliar las filas y columnas? tambien reemplazar por imagenes?
Responder
Imágen de perfil
4 de Abril del 2017
estrellaestrellaestrellaestrellaestrella
No he tenido tiempo para hacerlo con imagenes, el trabajo y el pacman que llamo mas mi atencion no me han dejado jejeje.

El codigo fuente esta las limitaciones tu te las pones.
Responder
lizzy
13 de Mayo del 2017
estrellaestrellaestrellaestrellaestrella
Gracias, es de mucha ayuda, al menos ya tengo de dónde partir. =D
Responder
brendyta
14 de Mayo del 2017
estrellaestrellaestrellaestrellaestrella
Excelente, alguien puede ayudarme a ponerlo con imagenes :(
Responder
Augusto
10 de Agosto del 2017
estrellaestrellaestrellaestrellaestrella
Gracias..!! pero también necesito que [Se podra ampliar las filas y columnas? tambien reemplazar por imagenes?]
Responder
Imágen de perfil
25 de Noviembre del 2017
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder

Comentar la versión: 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

1.1
estrellaestrellaestrellaestrellaestrella(4)

Publicado el 25 de Noviembre del 2017gráfica de visualizaciones de la versión: 1.1
17.883 visualizaciones desde el 25 de Noviembre del 2017
http://lwp-l.com/s3878