En esta publicación, vamos a implementar tres en raya para 2 jugadores usando jQuery. Es bastante fácil de desarrollar con algunas validaciones simples y comprobaciones de errores. El jugador 1 comienza a jugar y ambos jugadores hacen sus movimientos en turnos consecutivos. El jugador que hace una string recta de 3 bloques gana el juego. Aquí, implementaremos este juego en el front-end utilizando solo lógicas simples y comprobaciones de validación.
Prerrequisitos: Conocimiento básico de algunas tecnologías front-end como HTML , CSS , jQuery y Bootstrap .
Desarrollo del diseño:En primer lugar, desarrollaremos un diseño de cuadrícula de 3 * 3 y aplicaremos algunos efectos CSS en el mismo. También debe mostrar un texto que muestre el turno del jugador. También debe contener un botón para reiniciar el juego cuando sea necesario.
- Código HTML:
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" /> <script src= "https://code.jquery.com/jquery-3.4.1.slim.min.js"> </script> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"> </script> <link rel="stylesheet" href= "https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity= "sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous"> </head> <body> <!-- Heading --> <div class="container-fluid text-center"> <h1 style="color: white;">TIC-TAC-TOE</h1></div> <br> <br> <div class="container-fluid text-center"> <!-- Inform area for player's turn --> <h4 id="screen" style="color: white;"> PLAYER 1 TURN FOLLOWS </h4> </div> <br> <div class="container-fluid"> <div class="row"> <div class="col-lg-4"> </div> <div class="col-lg-4"> <!-- Playing Canvas --> <center> <table> <tr> <td colspan="3"> </tr> <tr> <td> <button class="sq1 r"></button> </td> <td> <button class="sq2 r"></button> </td> <td> <button class="sq3 r"></button> </td> </tr> <tr> <td> <button class="sq4 r"></button> </td> <td> <button class="sq5 r"></button> </td> <td> <button class="sq6 r"></button> </td> </tr> <tr> <td> <button class="sq7 r"></button> </td> <td> <button class="sq8 r"></button> </td> <td> <button class="sq9 r"></button> </td> </tr> </table> <br> <br> <!-- Reset button for Game --> <input type="button" class="reset btn btn-lg btn-danger btn-block" value="RESET" onClick="reset()" /> </center> </div> <div class="col-lg-4"> </div> </div> </div> </body> </html>
- Código CSS:
CSS
<!-- Applying CSS Properties -->
<style>
body {
background-color: #000000;
}
button {
height: 80px;
width: 80px;
background-color: white;
border: 0px transparent;
border-radius: 50%;
margin: 4px;
padding: 4px;
}
.fa {
font-size: 48px;
color: black;
}
.reset {
padding: 8px;
}
.reset:hover {
opacity: 0.8;
}
</style>
- Producción:
Implementación de la lógica: ahora, debemos implementar los siguientes pasos en nuestro código principal para imitar la lógica de un juego de tres en raya.
- Turnos de jugadores consecutivos: Los turnos consecutivos seguirán después de que el primer jugador juegue su movimiento. Además, el texto que notifica el turno del jugador también debe actualizarse en consecuencia.
JavaScript
<!-- Consecutive player Turns -->
<script>
// Flag variable for checking Turn
// We'll be modifying our base logic in the
// next steps as per requirements
var turn = 1;
$("button").click(function() {
if(turn == 1) {
$("#screen").text("PLAYER 2 TURN FOLLOWS");
// Check sign font from font-awesome
$(this).addClass("fa fa-check");
turn = 2;
}
else {
$("#screen").text("PLAYER 1 TURN FOLLOWS");
// Cross sign font from font-awesome
$(this).addClass("fa fa-times");
turn = 1;
}
});
</script>
- Marcar/Notificar movimientos no válidos: Además, debemos asegurarnos de que el jugador en el turno no realice ningún movimiento no válido. Para esto, verificaremos si el botón en el que se hizo clic no está siendo utilizado por otra clase de fuente en el proceso. Si ya está marcado con una fuente, marque el movimiento como no válido durante un breve intervalo.
JavaScript
<!-- Script for checking any invalid moves -->
$("button").click(function() {
if($(this).hasClass("fa fa-times") ||
$(this).hasClass("fa fa-check"))
{
$(this).css("background-color", "red");
setTimeout(() => {
$(this).css("background-color", "white");
}, 800);
}
});
- Comprobar movimientos ganadores: desarrollaremos una función que comprobará si el jugador ha completado la cuadrícula o no. Para esto, necesitamos verificar 8 configuraciones ganadoras del jugador. Enviaremos la clase de fuente a la función para verificar la misma.
JavaScript
<!-- Function to check the winning move -->
function check(symbol) {
if ($(".sq1").hasClass(symbol) &&
$(".sq2").hasClass(symbol) &&
$(".sq3").hasClass(symbol))
{
$(".sq1").css("color", "green");
$(".sq2").css("color", "green");
$(".sq3").css("color", "green");
return true;
} else if ($(".sq4").hasClass(symbol)
&& $(".sq5").hasClass(symbol)
&& $(".sq6").hasClass(symbol))
{
$(".sq4").css("color", "green");
$(".sq5").css("color", "green");
$(".sq6").css("color", "green");
return true;
} else if ($(".sq7").hasClass(symbol)
&& $(".sq8").hasClass(symbol)
&& $(".sq9").hasClass(symbol))
{
$(".sq7").css("color", "green");
$(".sq8").css("color", "green");
$(".sq9").css("color", "green");
return true;
} else if ($(".sq1").hasClass(symbol)
&& $(".sq4").hasClass(symbol)
&& $(".sq7").hasClass(symbol))
{
$(".sq1").css("color", "green");
$(".sq4").css("color", "green");
$(".sq7").css("color", "green");
return true;
} else if ($(".sq2").hasClass(symbol)
&& $(".sq5").hasClass(symbol)
&& $(".sq8").hasClass(symbol))
{
$(".sq2").css("color", "green");
$(".sq5").css("color", "green");
$(".sq8").css("color", "green");
return true;
} else if ($(".sq3").hasClass(symbol)
&& $(".sq6").hasClass(symbol)
&& $(".sq9").hasClass(symbol))
{
$(".sq3").css("color", "green");
$(".sq6").css("color", "green");
$(".sq9").css("color", "green");
return true;
} else if ($(".sq1").hasClass(symbol)
&& $(".sq5").hasClass(symbol)
&& $(".sq9").hasClass(symbol))
{
$(".sq1").css("color", "green");
$(".sq5").css("color", "green");
$(".sq9").css("color", "green");
return true;
} else if ($(".sq3").hasClass(symbol)
&& $(".sq5").hasClass(symbol)
&& $(".sq7").hasClass(symbol))
{
$(".sq3").css("color", "green");
$(".sq5").css("color", "green");
$(".sq7").css("color", "green");
return true;
} else {
return false;
}
}
- Restablecimiento del juego: al hacer clic en este botón, se restablecerá el juego.
JavaScript
<!-- Resetting the game -->
function reset()
{
$("#screen").text("PLAYER 1 TURN FOLLOWS");
$("#screen").css("background-color", "transparent");
$(".r").removeClass("fa fa-check");
$(".r").removeClass("fa fa-times");
turn=1;
// Reset Colors
$(".sq1").css("color", "black");
$(".sq2").css("color", "black");
$(".sq3").css("color", "black");
$(".sq4").css("color", "black");
$(".sq5").css("color", "black");
$(".sq6").css("color", "black");
$(".sq7").css("color", "black");
$(".sq8").css("color", "black");
$(".sq9").css("color", "black");
}
Salida: Combinando todos los códigos escritos arriba, será un juego completo de tres en raya.
Publicación traducida automáticamente
Artículo escrito por devproductify y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA