“Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6...
Transcript of “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6...
![Page 1: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/1.jpg)
“Taller de Videojuegos con HTML 5”
Rogelio Ferreira Escutia
Creación del Videojuego “Memoria”
![Page 2: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/2.jpg)
2
HTML Básico
![Page 3: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/3.jpg)
3
HTML Básico
<!DOCTYPE html>
<html><head>
<title>Memoria</title><meta charset="utf-8" />
</head></html>
![Page 4: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/4.jpg)
4
CSS
![Page 5: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/5.jpg)
5
CSS
body– Anchura de 960 pixeles– Margen 0.
h1– centrado.
miCanvas– Borde de 2pixeles punteado color amarillo.– Color del fondo verde.
![Page 6: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/6.jpg)
6
CSS
/* memoria.css */
body{width:960px;margin:0 auto;
}h1{
text-align:center;}#miCanvas{
border:dotted 2px yellow;background:green;
}
![Page 7: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/7.jpg)
7
CSS
Agregar a nuestro html el CSS.
<link rel="stylesheet" href="memoria.css" />
![Page 8: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/8.jpg)
8
Canvas
![Page 9: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/9.jpg)
9
Canvas
Agregar el Canvas al HTML y definimos su tamaño:
<body><h1>Memoria CANVAS</h1><canvas id="miCanvas" width="960px" height="450px">
Tu navegador no soporta CANVAS</canvas>
</body>
![Page 10: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/10.jpg)
10
![Page 11: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/11.jpg)
11
JavaScript
![Page 12: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/12.jpg)
12
JavaScript
Creamos nuestro archivo JavaScript (memoria.js) con variables globales para nuestro programa.
![Page 13: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/13.jpg)
13
JavaScript
//// memoria.js//
/*** Variables ****/var ctx, canvas;var colorAtras = "blue";var inicioX = 45;var inicioY = 50;var cartaMargen = 30;var cartaLon = 30;var cartaAncho = cartaLon * 4;var cartaLargo = cartaLon * 4;var cartas_array = new Array();
![Page 14: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/14.jpg)
14
JavaScript
Hacemos referencia al archivo JavaScript desde nuestro código html:
<script language="javascript" src="memoria.js"></script>
![Page 15: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/15.jpg)
15
JavaScript
Declaramos los objetos que necesitaremos en nuestro código JavaScript:
/***** Objetos ****/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;
}
![Page 16: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/16.jpg)
16
JavaScript
Creamos la función dibujaCarta:
function dibujaCarta(){ctx.fillStyle = colorAtras;ctx.fillRect(this.x, this.y, this.ancho, this.largo);
}
![Page 17: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/17.jpg)
17
Arranque del Canvas
![Page 18: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/18.jpg)
18
JavaScript
Arrancamos el Canvas dentro de nuestro JavaScript::
window.onload = arrancarCanvas;
function arrancarCanvas(){canvas=document.getElementById('miCanvas');if(canvas&&canvas.getContext){
ctx=canvas.getContext("2d");if (ctx) {
//Aqui va a ir el código
} else { alert("Error al crear el contexto"); }}
}
![Page 19: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/19.jpg)
19
Dibujar Tablero
![Page 20: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/20.jpg)
20
JavaScript
Agregamos la función para dibujar el tablero:
function tablero(){var i;var carta;var x = inicioX;var y = inicioY;for(i=0; i<6; i++){
carta = new Carta(x, y, cartaAncho, cartaLargo, i);cartas_array.push(carta);carta.dibuja();//Creamos la segunda cartacarta = new Carta(x, y+cartaAncho+cartaMargen, cartaAncho, cartaLargo, i);cartas_array.push(carta);carta.dibuja();//Aumentamos el valos de xx += cartaAncho + cartaMargen;
}}
![Page 21: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/21.jpg)
21
![Page 22: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/22.jpg)
22
Barajear Cartas
![Page 23: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/23.jpg)
23
JavaScript
Agregamos la función para barajear las cartas y la mandamos llamar después de llamar a la función “tablero”:
function barajear(){var i, j, k;var temporal;var lon = cartas_array.length;for(j=0; j<lon*3; j++){
i = Math.floor(Math.random()*lon);k = Math.floor(Math.random()*lon);//temporal = cartas_array[i].info;//cartas_array[i].info = cartas_array[k].info;cartas_array[k].info = temporal;
}}
![Page 24: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/24.jpg)
24
Manejo del click
![Page 25: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/25.jpg)
25
JavaScript
Detectamos el evento click y mandamos llamar a la función “selecciona”:
canvas.addEventListener("click",selecciona,false);
![Page 26: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/26.jpg)
26
JavaScript
El código de detección se coloca en nuestro arranque de Canvas y queda así:
function arrancarCanvas(){canvas=document.getElementById('miCanvas');if(canvas&&canvas.getContext){
ctx=canvas.getContext("2d");if (ctx) {
//Aqui va a ir el códigocanvas.addEventListener("click",selecciona,false);tablero();barajear();
} else { alert("Error al crear el contexto"); }}
}
![Page 27: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/27.jpg)
27
JavaScript
Creamos la función “selecciona” la cual extrae los valores x,y de donde hicimos click, y se los envía a la función “ajusta”:
function selecciona(e){var pos = ajusta(e.clientX, e.clientY);alert(pos.x+", "+pos.y);
}
![Page 28: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/28.jpg)
28
JavaScript
La función “ajusta” los valores x,y a la esquina superior del rectángulo donde se hizo click, esto con el objeto de dibujar en esa posición la carta:
function ajusta(xx, yy){var posCanvas = canvas.getBoundingClientRect();var x = xx - posCanvas.left;var y = yy - posCanvas.top;return {x:x, y:y}
}
![Page 29: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/29.jpg)
29
![Page 30: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/30.jpg)
30
Detectar en que cartase hizo click
![Page 31: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/31.jpg)
31
JavaScript
Modificamos la función “selecciona” para detectar en qué carta se hizo click:
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)){
break;}
}}if(i<cartas_array.length){
alert(i);}
}
![Page 32: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/32.jpg)
32
![Page 33: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/33.jpg)
33
Variables globales paraManipular cartas
![Page 34: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/34.jpg)
34
JavaScript
Se agregan variables globales, para detectar si es la primera carta (primerCarta) y para hacer referencia a la primera y segunda carta:
/*** Variables ****/var ctx, canvas;var primerCarta = true;var cartaPrimera, cartaSegunda;var colorDelante = "yellow";var colorAtras = "blue";var colorCanvas = "green";var inicioX = 45;var inicioY = 50;var cartaMargen = 30;var cartaLon = 30;var cartaAncho = cartaLon * 4;var cartaLargo = cartaLon * 4;var cartas_array = new Array();
![Page 35: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/35.jpg)
35
Detectar doble clickSobre la misma carta
![Page 36: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/36.jpg)
36
JavaScript Modificamos “selecciona” para detectar si se hizo
click 2 veces sobre la misma carta y pintamos la carta: 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;}
}}//Encontramos la cartaif(i<cartas_array.length){
cartaPrimera = i;primerCarta = false;pinta(carta);
} }
![Page 37: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/37.jpg)
37
JavaScript Modificamos “selecciona” para detectar si se hizo
click 2 veces sobre la misma carta y pintamos la carta: 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;}
}}//Encontramos la cartaif(i<cartas_array.length){
cartaPrimera = i;primerCarta = false;pinta(carta);
} }
![Page 38: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/38.jpg)
38
JavaScript Creamos la función “pinta” para pintar la carta donde
se hizo click:
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);
}
![Page 39: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/39.jpg)
39
![Page 40: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/40.jpg)
40
Seleccionar segunda carta
![Page 41: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/41.jpg)
41
JavaScript Modificamos “selecciona” para poder seleccionar la
segunda carta, y cuando eso suceda, dejar pasar un tiempo (setTimeOut) y manda llamar a una nueva función “volteaCarta”:
![Page 42: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/42.jpg)
42
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;}
}}//Encontramos la cartaif(i<cartas_array.length){
if(primerCarta){cartaPrimera = i;primerCarta = false;pinta(carta);
} else {cartaSegunda = i;pinta(carta);primerCarta = true;setTimeout(volteaCarta,1000);
}}
}
![Page 43: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/43.jpg)
43
JavaScript
Creamos la función “volteaCarta”:
function volteaCarta(){cartas_array[cartaPrimera].dibuja();cartas_array[cartaSegunda].dibuja();
}
![Page 44: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/44.jpg)
44
![Page 45: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/45.jpg)
45
Determinar si son igualeslas cartas seleccionadas
![Page 46: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/46.jpg)
46
JavaScript
Agregamos 2 variables globales para detectar si son iguales la cartas seleccionadas:
var cartas_array = new Array();var iguales = false;
![Page 47: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/47.jpg)
47
JavaScript
Dentro de la función “selecciona” tenemos el siguiente código:
} else {cartaSegunda = i;pinta(carta);primerCarta = true;setTimeout(volteaCarta,10000);
}
![Page 48: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/48.jpg)
48
JavaScript
El código anterior lo cambiamos por este, esto nos permitirá determinar si las cartas son iguales:
} else {cartaSegunda = i;pinta(carta);primerCarta = true;if(cartas_array[cartaPrimera].info==cartas_array[cartaSegunda].info){
iguales = true;} else {
iguales = false;}setTimeout(volteaCarta,1000);
}
![Page 49: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/49.jpg)
49
JavaScript
Modificamos la función “volteaCarta” para pintar las cartas que son iguales, que da el efecto de borrar
function volteaCarta(){if(iguales==false){
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;
}}
![Page 50: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/50.jpg)
50
![Page 51: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/51.jpg)
51
Creando un marcador
![Page 52: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/52.jpg)
52
JavaScript
Agregamos la variable global “cartas” para llevar el control de las cartas:
var cartas = 0;
![Page 53: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/53.jpg)
53
JavaScript
Mandamos llamar a la función “aciertos” que vamos a crear para controlar el número de aciertos, y nuestra función “arrancarCanvas” queda así:
function arrancarCanvas(){canvas=document.getElementById('miCanvas');if(canvas&&canvas.getContext){
ctx=canvas.getContext("2d");if (ctx) {
//Aqui va a ir el códigocanvas.addEventListener("click",selecciona,false);tablero();barajear();aciertos();
} else { alert("Error al crear el contexto"); }}
}
![Page 54: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/54.jpg)
54
JavaScript
Creamos la función “aciertos” para llevar el marcador:
function aciertos(){ctx.fillStyle = "black";if(cartas==6){
ctx.font = "bold 80px Comic";ctx.clearRect(0,0, canvas.width, canvas.height);ctx.fillText("Muy bien, ¡eres un genio!", 60, 220);
} else {ctx.save();ctx.clearRect(0,340, canvas.width/2, 100);ctx.font = "bold 40px Comic";ctx.fillText("Aciertos: "+String(cartas), 30, 380);ctx.restore();
}}
![Page 55: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/55.jpg)
55
JavaScript
En la función “aciertos” se guarda y se reestablece el contexto para poder ir pintando los elementos que van cambiando, en este caso el marcador
![Page 56: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/56.jpg)
56
JavaScript
En la función “selecciona” tenemos el siguiente código:
} else {cartaSegunda = i;pinta(carta);primerCarta = true;if(cartas_array[cartaPrimera].info==cartas_array[cartaSegunda].info){
iguales = true;} else {
iguales = false;}setTimeout(volteaCarta,1000);
}
![Page 57: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/57.jpg)
57
JavaScript
Lo cambiamos por el siguiente, que incrementa las cartas y los aciertos cuando el usuario le atina:
} else {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);
}
![Page 58: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/58.jpg)
58
JavaScript
Cuando se tienen los 6 pares de cartas, finaliza el juego e imprime el mensaje que viene dentro de la función “aciertos” que se hizo anteriormente:
if(cartas==6){ctx.font = "bold 80px Comic";ctx.clearRect(0,0, canvas.width, canvas.height);ctx.fillText("Muy bien, ¡eres un genio!", 60, 220);
}
![Page 59: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/59.jpg)
59
![Page 60: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/60.jpg)
60
Y nuestro juego finaliza!!!!
![Page 61: “Taller de Videojuegos con HTML 5”sagitario.itmorelia.edu.mx › ~rogelio › tvh_videojuego...6 CSS /* memoria.css */ body{width:960px; margin:0 auto;} h1{text-align:center;}](https://reader033.fdocumento.com/reader033/viewer/2022042403/5f16605a39cdbf0ddb147316/html5/thumbnails/61.jpg)
61
Rogelio Ferreira Escutia
Instituto Tecnológico de MoreliaDepartamento de Sistemas y Computación
Correo: [email protected] [email protected]
Página Web: http://antares.itmorelia.edu.mx/~kaos/http://www.xumarhu.net/
Twitter: http://twitter.com/rogeplusFacebook: http://www.facebook.com/groups/xumarhu.net/