Skip to content

J
js-e004
Commit e57520c2 by Cristhian Ortellado
Options

Se termino el modo computadora vs humano

parents
Showing with 427 additions and 0 deletions
css/styles.css 0 → 100644
/*generales*/
* {
font-family: 'Indie Flower', cursive;
}
h1 {
text-align: center;
font-family: 'Shadows Into Light', cursive;
text-shadow: 2px 9px 6px #CE5937;
font-size: 3rem;
}
.rojo {
color: rgba(250, 0, 0, .6);
}
.verde {
color: rgba(0, 150, 0, 0.5);
}
body {
background-color: #EF921A;
}
/****Carga de datos***/
.jugadores {
font-size: larger;
text-align: center;
}
#jg-1,
#jg-2,
#jugar {
border-radius: 10px;
font-size: .9em;
}
/**Mensaje error **/
#mensaje {
width: 25%;
border-radius: 5px;
height: 30px;
position: absolute;
right: 15px;
top: 15px;
text-align: center;
font-weight: 60;
color: white;
}
.error {
background-color: rgba(250, 0, 80, .5);
transition: all ease-in-out .3s;
transform: translate(0px, -200px) rotate(180deg);
}
.hidden {
transform: translate(0px, 0px) rotate(0deg);
}
/**juego*/
.juego {
width: 60%;
margin: 0 auto;
transition: all ease-in-out 1s;
transform: translate(-600px, -6000px) rotate(180deg);
}
table {
/* border: 1px solid black; */
width: 100%;
text-align: center;
}
td {
padding: 5rem;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.x {
background-image: url(../img/x.png);
}
.o {
background-image: url(../img/O.png);
}
tr:first-child td,
tr:nth-child(2) td {
border-bottom: 1px solid black;
}
tr td:nth-child(1),
tr td:nth-child(2) {
border-right: 1px solid black;
}
/**animacion del tablero*/
.jugar {
transform: translate(0px, 0px) rotate(0deg);
}
/**juego finalizado*/
.finalizado {
width: 70%;
height: 200px;
position: relative;
text-align: center;
background-color: rgba(0, 150, 0, 0.8);
color: white;
font-weight: bold;
z-index: 2;
border-radius: 20px;
margin: 0 auto;
top: -400px;
transition: all ease-in-out 1s;
transform: translate(-1400px, 500px) rotate(360deg);
}
.final-mostrar {
transform: translate(0px, 0px) rotate(0deg);
}
\ No newline at end of file
img/O.png 0 → 100644
img/O.png

21.4 KB
img/x.png 0 → 100644
img/x.png

33.2 KB
js/main.js 0 → 100644
/**
* Mucho del codigo que se repite se debe a que no encontre una forma
de parar el javascrip a la hora de tomar ciertas decisiones
*/
//guardamos los nombres como variables globales
var nombreJ1;
var nombreJ2;
//radio button (forma de los jugadores X O)
var tipoForma;
var computadora = 0; //determina si juega o no la computadora
var listo = 0; //sirve para pausar los tiempos cuando juega la computadora
//cuando le de click al boton Iniciar juego se validara lo siguiente
var jugar = document.getElementById("jugar");
jugar.addEventListener("click", empezarJuego);
//validamos que ambos no esten vacios y si jugara la computadora
function validarNombres() {
nombreJ1 = document.getElementById("jg-1").value;
nombreJ2 = document.getElementById("jg-2").value;
if (nombreJ1.length != 0 && nombreJ2.length != 0) {
var maquina = document.getElementById("computadora").checked;
//si esta selecionada la opcion computadora
if (maquina == true)
computadora = 1;
return true;
}
return false;
}
//comprobamos que haya seleccionado una forma
function validarRadio() {
var radio;
var x = document.querySelector("input#tipoJugador").checked;
if (x) {
radio = ["x", "o"];
} else {
radio = ["o", "x"];
}
return radio;
}
//si todo esta correcto empezamos el juego
function empezarJuego() {
if (validarNombres()) {
var cargaDatos = document.querySelector("div.jugadores");
cargaDatos.hidden = "true";
tipoForma = validarRadio();
//comenzamos a escuchar el juego
var tabla = document.querySelector("div.juego");
tabla.classList.add("jugar");
} else {
//lanzamos un mensaje de error
var error = document.querySelector("div#mensaje");
error.classList.add("hidden");
//esperamos unos segundos para sacarlo
setTimeout(function() {
error.classList.remove("hidden");
}, 3500);
}
}
//controlamos los sucesos en la tabla
var celdas = document.getElementsByTagName("td");
//cargamos los eventos
for (let i = 0; i < celdas.length; i++) {
celdas[i].addEventListener("click", verificarMovimiento);
}
var turno = 0; //determina el turno
var termino = 0; //si termina antes de las 9 jugadas
var matriz = [
["a", "b", "c"],
["d", "e", "f"],
["g", "h", "i"]
]; //matriz que guarda los movimientos
var movimiento = 0;
//funcion para verificar si el movimiento es valido
function verificarMovimiento() {
//si ya se ejecuto los milisegundos entonces lo realiza
if (listo == 0) {
if (termino == 0) {
var clase = this.classList.length; //si aun no posee ninguna clase entonces es una casilla habilitada
if (clase == 0) {
if (turno == 0) {
this.classList.add(tipoForma[0]);
movimiento++;
cargarMatriz(this.id);
turno = 1;
} else if (computadora == 0) { //si no esta jugando la computadora
this.classList.add(tipoForma[1]);
movimiento++;
cargarMatriz(this.id);
turno = 0;
}
}
termino = comprobarGanador();
if (computadora == 1 && termino == 0 && turno == 1) {
listo = 1;
movimientoComputadora();
}
if (movimiento == 9 && termino == 0) {
termino = 2; //si termino por movimientos entonces es empate
finalizarJuego();
}
if (termino == 1)
finalizarJuego();
} else {
finalizarJuego();
}
}
}
//funcion para cargar la matriz
function cargarMatriz(cadena) {
var columna = parseInt(cadena.charAt(1));
var fila;
switch (cadena.charAt(0)) {
case 'A':
fila = 0;
break;
case 'B':
fila = 1;
break;
case 'C':
fila = 2;
break;
default:
break;
}
matriz[fila][columna] = tipoForma[turno];
}
function comprobarGanador() {
//comprobamos si todas las posibilidades
//columnas
if (matriz[0][0] == matriz[1][0] && matriz[1][0] == matriz[2][0])
return 1;
if (matriz[0][1] == matriz[1][1] && matriz[1][1] == matriz[2][1])
return 1;
if (matriz[0][2] == matriz[1][2] && matriz[1][2] == matriz[2][2])
return 1;
//las filas
if (matriz[0][0] == matriz[0][1] && matriz[0][1] == matriz[0][2])
return 1;
if (matriz[1][0] == matriz[1][1] && matriz[1][1] == matriz[1][2])
return 1;
if (matriz[2][0] == matriz[2][1] && matriz[2][1] == matriz[2][2])
return 1;
//diagonales
if (matriz[0][0] == matriz[1][1] && matriz[1][1] == matriz[2][2])
return 1;
if (matriz[2][0] == matriz[1][1] && matriz[1][1] == matriz[0][2])
return 1;
return 0;
}
//mostramos el mensaje de finalizacion
function finalizarJuego() {
var final = document.querySelector("div.finalizado");
final.classList.add("final-mostrar");
if (termino == 2) {
//hubo empate
var ganador = document.querySelector("p.ganador");
ganador.innerHTML = "Hubo un empate entre " + nombreJ1 + " y " + nombreJ2;
} else {
//gano un jugador
var ganador = document.querySelector("p.ganador");
if (turno == 0) {
ganador.innerHTML = "El ganador es " + nombreJ2;
} else {
ganador.innerHTML = "El ganador es " + nombreJ1;
}
}
}
//movimiento de la computadora
function movimientoComputadora() {
setTimeout(function() {
var casilla = [
['A0', 'A1', 'A2'],
['B0', 'B1', 'B2'],
['C0', 'C1', 'C2']
];
var ban = 0; //bandera que determina si se termino o no el proceso de busqueda
//buscamos un elemento vacio en la tabla
var j = 0;
var i = 0;
while (true) {
//tiramos numeros aleatorios para simular una opcion
j = Math.floor(Math.random() * (3));
i = Math.floor(Math.random() * (3));
var elemento = document.getElementById(casilla[j][i]);
//si aun no posee ninguna clase significa que aun no esta seleccionado
if (elemento.classList.length == 0) {
cargarMatriz(elemento.id);
elemento.classList.add(tipoForma[1]);
turno = 0;
movimiento++;
termino = comprobarGanador();
if (termino == 1)
finalizarJuego();
ban = 1;
break;
}
}
listo = 0;
}, 200);
}
\ No newline at end of file
tateti.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejercicio 4</title>
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap" rel="stylesheet">
</head>
<body>
<div id="mensaje" class="error correcto ">ERROR! Los nombres son obligatorios</div>
<h1>TA <span class="rojo">TE</span> <span class="verde">TI</span></h1>
<div class="jugadores">
<div class="datos">
<label for="jg-1">Jugador 1 </label>
<input type="text" name="jg-1" id="jg-1" placeholder="Ingrese su nombre"><br>
<label for="jg-2">Jugador 2 </label>
<input type="text" name="jg-2" id="jg-2" placeholder="Ingrese su nombre">
</div>
<!-- datos -->
<div class="datos">
<h2>Indique que forma usara el Jugador nro 1</h2>
<label for="forma">X</label>
<input type="radio" name="forma" id="tipoJugador" checked="checked"><br>
<label for="forma">O</label>
<input type="radio" name="forma"><br>
<label for="computadora">Desea que el segundo jugador sea la computadora </label>
<input type="checkbox" name="computadora" id="computadora"><br><br>
<input type="button" value="Iniciar Juego" id="jugar">
</div>
<!-- datos -->
</div>
<!-- jugadores -->
<div class="juego">
<table>
<tr>
<td id="A0"></td>
<td id="A1"></td>
<td id="A2"></td>
</tr>
<tr>
<td id="B0"></td>
<td id="B1"></td>
<td id="B2"></td>
</tr>
<tr>
<td id="C0"></td>
<td id="C1"></td>
<td id="C2"></td>
</tr>
</table>
</div>
<!-- juego -->
<div class="finalizado">
<h2>Juego finalizado</h2>
<p class="ganador"></p>
</div>
<!-- finalizado -->
</body>
<script src="js/main.js"></script>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment