Aprendemos JavaScript: Juego de las 3 en raya

El primer jugador rellena sus espacios de rojo.
El segundo lo hace de azul.

Ver las tres en raya en ventana emergente.
Este es el código exacto del documento que se muestra:

<!DOCTYPE html>
<html>
<head>
<title>Juego de 3 en raya</title>
<meta charset="UTF-8" />
<meta name="author" content="MOC CodeMadrid y Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
<script>
var mapa = [0, 0, 0, 0, 0, 0, 0, 0, 0,];
var jugador = 1;
function dibujar(){
for(i=0; i<9; i++){
if(mapa[i] == 0) document.getElementById("c"+i).style="background-color: white";
if(mapa[i] == 1) document.getElementById("c"+i).style="background-color: red";
if(mapa[i] == 2) document.getElementById("c"+i).style="background-color: blue";
}
}
function pcelda(celda){
if (mapa[celda]==0) {
if (jugador==1){
mapa[celda]=1;
jugador=2;
} else {
mapa[celda]=2;
jugador=1;
}
} else {
window.alert("No puedes pulsar sobre una celda coloreada");
}
dibujar();
var r = ganador();
switch(r){
case 0:
break;
case 1:
window.alert("¡Ganó el rojo!");
break;
case 2:
window.alert("¡Ganó el azul!");
break;
case 3:
window.alert("¡Empate!");
break;
}
}
function ganador(){
var numEspacios=0;
for(i=0; i<9; i++){
if(mapa[i] == 0) numEspacios++;
}
// Las líneas horizontales
if(mapa[0] == mapa[1] && mapa[1] == mapa[2] && mapa[0] !=0) return mapa[0];
if(mapa[3] == mapa[4] && mapa[4] == mapa[5] && mapa[3] !=0) return mapa[3];
if(mapa[6] == mapa[7] && mapa[7] == mapa[8] && mapa[6] !=0) return mapa[6];
//Las líneas verticales
if(mapa[0] == mapa[3] && mapa[3] == mapa[6] && mapa[0] !=0) return mapa[0];
if(mapa[1] == mapa[4] && mapa[4] == mapa[7] && mapa[1] !=0) return mapa[1];
if(mapa[2] == mapa[5] && mapa[5] == mapa[8] && mapa[2] !=0) return mapa[2];
//Las diagonales
if(mapa[0] == mapa[4] && mapa[4] == mapa[8] && mapa[0] !=0) return mapa[0];
if(mapa[2] == mapa[4] && mapa[4] == mapa[6] && mapa[2] !=0) return mapa[2];

if (numEspacios > 0){
return 0;
} else {
return 3;
}
}
</script>
</head>
<body>
<table align="center" border="0">
<tr>
<td width="300" align="center">TRES EN RAYA</td>
</tr>
</table>
<table align="center" border="1">
<tr>
<td width="100" height="100" id="c0" onclick="pcelda(0)"></td>
<td width="100" height="100" id="c1" onclick="pcelda(1)"></td>
<td width="100" height="100" id="c2" onclick="pcelda(2)"></td>
</tr>
<tr>
<td width="100" height="100" id="c3" onclick="pcelda(3)"></td>
<td width="100" height="100" id="c4" onclick="pcelda(4)"></td>
<td width="100" height="100" id="c5" onclick="pcelda(5)"></td>
</tr>
<tr>
<td width="100" height="100" id="c6" onclick="pcelda(6)"></td>
<td width="100" height="100" id="c7" onclick="pcelda(7)"></td>
<td width="100" height="100" id="c8" onclick="pcelda(8)"></td>
</tr>
</table>
<table align="center" border="0">
<tr>
<td width="300" align="center"><br />
<a href="javascript:location.reload()">
<button>Reiniciar</button></a>
</td>
</tr>
</table>
</body>
</html>

NOTA: Acabamos de comprobar que este script no funciona correctamente en los dispositivos móviles de APPLE.
El problema es que no se visualiza el color al pulsar cualquiera de las celdas. Sí que se almacena la información sobre qué jugador ha pulsado qué celda y se obtienen todos los mensajes correspondientes: de no se puede volver a pulsar una celda coloreada, ha ganado el rojo, ha ganado el azul, empate...
He intentado modificar el código cambiando las palabras de los colores por sus correspondientes códigos hexadecimales... Pero sigue sin funcionar...

miércoles, 9 de marzo de 2016

Juego de las 3 en raya

3 comentarios: