Skip to content

T
tateti
Commit a71b1589 by Nahuel Mereles Rodriguez
Options

initial commmit

parents
Showing with 644 additions and 0 deletions
estilos.css 0 → 100644
*{
padding: 0;
margin: 0;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.game-container{
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
background: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);
}
.game-container-dk{
background: radial-gradient(circle, rgba(161,0,33,1) 0%, rgba(1,16,91,1) 100%);
}
.game-container-box{
display: block;
}
.form{
display: block;
}
.game-title{
color: #05E4FA;
text-align: center;
}
.form-title{
font-size: 15px;
margin: 12px 0;
color: #ccc;
}
.form-imputs-container input{
display: block;
width: 96%;
height: 35px;
margin-left: 1%;
margin: 10px 0 10px 1%;
}
.input-text{
border: none;
border-bottom: 3px solid #002758;
background: transparent;
color: #0798F0;
}
.input-text::placeholder{
padding-left: 15px;
color: #E1E1E1;
}
.input-text:focus{
outline: none;
border-bottom: 3px solid#0798F0;
}
/*Modo claro y oscuro*/
.light-mode{
width: 65px;
height: 30px;
background: #fc466b;
border-radius: 25px;
margin: 22px 5px;
transition: 1s;
}
.mode-button-lg{
display: flex;
justify-content: center;
align-items: center;
width: 34px;
height: 34px;
border-radius: 100%;
background: #620062;
transform: translate(0, -2px);
color: #fff;
transition: 1s;
}
.dark-mode{
background: #620062;
}
.mode-button-dk{
background: #fc466b;
transform: translate(33px, -2px);
}
.button-Off{
display: none;
}
.input-submit{
background: #fc466b;
border: none;
font-size: 16px;
}
.input-submit:hover{
background: #FF2BAE;
}
.input-submit:focus{
outline: none;
}
.tablero-container{
display: grid;
grid-template-columns: repeat(3, 150px);
grid-template-rows: repeat(3, 150px);
grid-gap: 5px;
margin: 20px 0;
}
.tablero-input{
border: none;
font-size: 85px;
background: #fff;
color: #0798F0;
}
.tablero-input-dk{
border: none;
font-size: 85px;
background: #fff;
background: #000;
color: #fff;
}
.tablero-input-dk:hover{
background: #343434;
}
.tablero-input-dk:focus{
outline: none;
}
.tablero-input:hover{
background: #D6D5D6;
}
.tablero-input:focus{
outline: none;
}
.input-reiniciar{
background: #fc466b;
width: 100%;
height: 40px;
border: none;
font-size: 17px;
margin-bottom: 18px;
}
.input-reiniciar:hover{
background: #FF2BAE;
}
.input-reiniciar:focus{
outline: none;
}
.ganadorJuego{
background: #4B057C;
}
.ganadorJuego:hover{
background: #4B057C;
}
.infoTurno{
color: #0798F0;
font-size: 25px;
}
\ No newline at end of file
index.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.">
<link rel="stylesheet" href="estilos.css">
<link rel="icon" type="image/icon" href="/img/favicon.ico" />
<script src="https://kit.fontawesome.com/65c05c0a98.js" crossorigin="anonymous"></script>
<title>Tateti Game</title>
</head>
<body>
<div class="game-container" id="gameContainer">
<div class="game-container-box">
<form class="form" id="form">
<h1 class="game-title">Ta te ti Game</h1>
<div class="form-imputs-container">
<h2 class="form-title">Registrese para comenzar el juego</h2>
<input type="text" name="nameJ1" id="nameJ1" class="input-text" placeholder="Nombre del Jugador 1...">
<input type="text" name="nameJ1" id="nameJ2" class="input-text" placeholder="Nombre del Jugador 2...">
<input type="submit" value="Aceptar" class="input-submit">
<div class="light-mode" id="fondoBoton">
<div class="mode-button-lg" id="cambiarModo">
<div class="button-Off" id="lgMode" title="Cambiar a modo claro">
<i class="fa fa-sun-o" aria-hidden="true"></i>
</div>
<div id="dkMode">
<i class="fa fa-moon-o" aria-hidden="true" title="Cambiar a modo oscuro"></i>
</div>
</div>
</div>
</div>
</form>
<label id="infoTurno" class="infoTurno"></label>
<div class="tablero-container">
<input type="button" value="" id="b1" class="tablero-input">
<input type="button" value="" id="b2" class="tablero-input">
<input type="button" value="" id="b3" class="tablero-input">
<input type="button" value="" id="b4" class="tablero-input">
<input type="button" value="" id="b5" class="tablero-input">
<input type="button" value="" id="b6" class="tablero-input">
<input type="button" value="" id="b7" class="tablero-input">
<input type="button" value="" id="b8" class="tablero-input">
<input type="button" value="" id="b9" class="tablero-input">
</div>
<input type="button" value="Reiniciar" id="input_reiniciar" class="input-reiniciar" title="Reiniciar el juego">
</div>
</div>
<script src="scripts.js"></script>
</body>
</html>
\ No newline at end of file
scripts.js 0 → 100644
const form = document.getElementById("form");
const jugador1 = document.getElementById("nameJ1");
const jugador2 = document.getElementById("nameJ2");
const infoTurno = document.getElementById("infoTurno");
let turno = "j1";
const botonFondo = document.getElementById("fondoBoton");
const botonCambioMode = document.getElementById("cambiarModo");
const lgMode = document.getElementById("lgMode");
const dkMode = document.getElementById("dkMode");
const gameContainer = document.getElementById("gameContainer");
let lightMode = true;
const boton1 = document.getElementById("b1");
const boton2 = document.getElementById("b2");
const boton3 = document.getElementById("b3");
const boton4 = document.getElementById("b4");
const boton5 = document.getElementById("b5");
const boton6 = document.getElementById("b6");
const boton7 = document.getElementById("b7");
const boton8 = document.getElementById("b8");
const boton9 = document.getElementById("b9");
const botonReiniciar = document.getElementById("input_reiniciar");
let iniciarJuego = false;
let bloquearSubmit = false;
let contadorCasillasMarcadas = 0;
botonCambioMode.addEventListener("click", ()=>{
if(lightMode){
botonCambioMode.classList.add("mode-button-dk");
botonFondo.classList.add("dark-mode");
lgMode.classList.remove("button-Off");
dkMode.classList.add("button-Off");
boton1.classList.replace("tablero-input", "tablero-input-dk");
boton2.classList.replace("tablero-input", "tablero-input-dk");
boton3.classList.replace("tablero-input", "tablero-input-dk");
boton4.classList.replace("tablero-input", "tablero-input-dk");
boton5.classList.replace("tablero-input", "tablero-input-dk");
boton6.classList.replace("tablero-input", "tablero-input-dk");
boton7.classList.replace("tablero-input", "tablero-input-dk");
boton8.classList.replace("tablero-input", "tablero-input-dk");
boton9.classList.replace("tablero-input", "tablero-input-dk");
gameContainer.classList.add("game-container-dk");
lightMode = false;
}else{
botonCambioMode.classList.remove("mode-button-dk");
botonFondo.classList.remove("dark-mode");
lgMode.classList.add("button-Off");
dkMode.classList.remove("button-Off");
boton1.classList.replace("tablero-input-dk", "tablero-input");
boton2.classList.replace("tablero-input-dk", "tablero-input");
boton3.classList.replace("tablero-input-dk", "tablero-input");
boton4.classList.replace("tablero-input-dk", "tablero-input");
boton5.classList.replace("tablero-input-dk", "tablero-input");
boton6.classList.replace("tablero-input-dk", "tablero-input");
boton7.classList.replace("tablero-input-dk", "tablero-input");
boton8.classList.replace("tablero-input-dk", "tablero-input");
boton9.classList.replace("tablero-input-dk", "tablero-input");
gameContainer.classList.remove("game-container-dk");
lightMode = true;
}
})
form.addEventListener("submit", (e)=>{
e.preventDefault();
if(bloquearSubmit == false)
if(jugador1.value.length < 1 || jugador2.value.length < 1){
alert("Debe ingresar el nombre de ambos jugadores")
}else{
iniciarJuego = true;
bloquearSubmit = true;
infoTurno.textContent = `Turno de ${jugador1.value}`
}
else{
alert("Reinicie el juego para otra partida")
}
})
boton1.addEventListener("click", (e)=>{
if(iniciarJuego){
if(turno == "j1"){
if(e.target.value == ""){
e.target.value = "X";
turno = "j2";
infoTurno.textContent = `Turno de ${jugador2.value}`;
contadorCasillasMarcadas++;
corroborarGanador(e.target.value)
}else{
infoTurno.textContent = "Esa casilla esta ocupada"
}
}else{
if(e.target.value == ""){
e.target.value = "O";
turno = "j1";
infoTurno.textContent = `Turno de ${jugador1.value}`;
contadorCasillasMarcadas++;
corroborarGanador(e.target.value)
}else{
infoTurno.textContent = "Esa casilla esta ocupada"
}
}
}else{
alert("Debe ingresar el nombre de ambos jugadores")
}
})
boton2.addEventListener("click", (e)=>{
if(iniciarJuego){
if(turno == "j1"){
if(e.target.value == ""){
e.target.value = "X";
turno = "j2";
infoTurno.textContent = `Turno de ${jugador2.value}`;
contadorCasillasMarcadas++;
corroborarGanador(e.target.value)
}else{
infoTurno.textContent = "Esa casilla esta ocupada"
}
}else{
if(e.target.value == ""){
e.target.value = "O";
turno = "j1";
infoTurno.textContent = `Turno de ${jugador1.value}`;
contadorCasillasMarcadas++;
corroborarGanador(e.target.value)
}else{
infoTurno.textContent = "Esa casilla esta ocupada"
}
}
}else{
alert("Ingrese el nombre de ambos jugadores")
}
})
boton3.addEventListener("click", (e)=>{
if(iniciarJuego){
if(turno == "j1"){
if(e.target.value == ""){
e.target.value = "X";
turno = "j2";
infoTurno.textContent = `Turno de ${jugador2.value}`;
contadorCasillasMarcadas++;
corroborarGanador(e.target.value)
}else{
infoTurno.textContent = "Esa casilla esta ocupada"
}
}else{
if(e.target.value == ""){
e.target.value = "O";
turno = "j1";
infoTurno.textContent = `Turno de ${jugador1.value}`;
contadorCasillasMarcadas++;
corroborarGanador(e.target.value)
}else{
infoTurno.textContent = "Esa casilla esta ocupada"
}
}
}else{
alert("Debe ingresar el nombre de ambos jugadores")
}
})
boton4.addEventListener("click", (e)=>{
if(iniciarJuego){
if(turno == "j1"){
if(e.target.value == ""){
e.target.value = "X";
turno = "j2";
infoTurno.textContent = `Turno de ${jugador2.value}`;
contadorCasillasMarcadas++;
corroborarGanador(e.target.value)
}else{
infoTurno.textContent = "Esa casilla esta ocupada"
}
}else{
if(e.target.value == ""){
e.target.value = "O";
turno = "j1";
infoTurno.textContent = `Turno de ${jugador1.value}`;
contadorCasillasMarcadas++;
corroborarGanador(e.target.value)
}else{
infoTurno.textContent = "Esa casilla esta ocupada"
}
}
}else{
alert("Debe ingresar el nombre de ambos jugadores")
}
})
boton5.addEventListener("click", (e)=>{
if(iniciarJuego){
if(turno == "j1"){
if(e.target.value == ""){
e.target.value = "X";
turno = "j2";
infoTurno.textContent = `Turno de ${jugador2.value}`;
contadorCasillasMarcadas++;
corroborarGanador(e.target.value)
}else{
infoTurno.textContent = "Esa casilla esta ocupada"
}
}else{
if(e.target.value == ""){
e.target.value = "O";
turno = "j1";
infoTurno.textContent = `Turno de ${jugador1.value}`;
contadorCasillasMarcadas++;
corroborarGanador(e.target.value)
}else{
infoTurno.textContent = "Esa casilla esta ocupada"
}
}
}else{
alert("Debe ingresar el nombre de ambos jugadores")
}
})
boton6.addEventListener("click", (e)=>{
if(iniciarJuego){
if(turno == "j1"){
if(e.target.value == ""){
e.target.value = "X";
turno = "j2";
infoTurno.textContent = `Turno de ${jugador2.value}`;
contadorCasillasMarcadas++;
corroborarGanador(e.target.value)
}else{
infoTurno.textContent = "Esa casilla esta ocupada"
}
}else{
if(e.target.value == ""){
e.target.value = "O";
turno = "j1";
infoTurno.textContent = `Turno de ${jugador1.value}`;
contadorCasillasMarcadas++;
corroborarGanador(e.target.value)
}else{
infoTurno.textContent = "Esa casilla esta ocupada"
}
}
}else{
alert("Debe ingresar el nombre de ambos jugadores")
}
})
boton7.addEventListener("click", (e)=>{
if(iniciarJuego){
if(turno == "j1"){
if(e.target.value == ""){
e.target.value = "X";
turno = "j2";
infoTurno.textContent = `Turno de ${jugador2.value}`;
contadorCasillasMarcadas++;
corroborarGanador(e.target.value)
}else{
infoTurno.textContent = "Esa casilla esta ocupada"
}
}else{
if(e.target.value == ""){
e.target.value = "O";
turno = "j1";
infoTurno.textContent = `Turno de ${jugador1.value}`;
contadorCasillasMarcadas++;
corroborarGanador(e.target.value)
}else{
infoTurno.textContent = "Esa casilla esta ocupada"
}
}
}else{
alert("Debe ingresar el nombre de ambos jugadores")
}
})
boton8.addEventListener("click", (e)=>{
if(iniciarJuego){
if(turno == "j1"){
if(e.target.value == ""){
e.target.value = "X";
turno = "j2";
infoTurno.textContent = `Turno de ${jugador2.value}`;
contadorCasillasMarcadas++;
corroborarGanador(e.target.value)
}else{
infoTurno.textContent = "Esa casilla esta ocupada"
}
}else{
if(e.target.value == ""){
e.target.value = "O";
turno = "j1";
infoTurno.textContent = `Turno de ${jugador1.value}`;
contadorCasillasMarcadas++;
corroborarGanador(e.target.value)
}else{
infoTurno.textContent = "Esa casilla esta ocupada"
}
}
}else{
alert("Debe ingresar el nombre de ambos jugadores")
}
})
boton9.addEventListener("click", (e)=>{
if(iniciarJuego){
if(turno == "j1"){
if(e.target.value == ""){
e.target.value = "X";
turno = "j2";
infoTurno.textContent = `Turno de ${jugador2.value}`;
contadorCasillasMarcadas++;
corroborarGanador(e.target.value)
}else{
infoTurno.textContent = "Esa casilla esta ocupada"
}
}else{
if(e.target.value == ""){
e.target.value = "O";
turno = "j1";
infoTurno.textContent = `Turno de ${jugador1.value}`;
contadorCasillasMarcadas++;
corroborarGanador(e.target.value)
}else{
infoTurno.textContent = "Esa casilla esta ocupada"
}
}
}else{
alert("Debe ingresar el nombre de ambos jugadores")
}
})
/*Funcion para corroborar si hubo un ganador*/
const corroborarGanador = (v)=>{
if(boton1.value == v && boton2.value == v && boton3.value == v){
if(v == "X"){
infoTurno.textContent = `Victoria de ${jugador1.value}!!`
}else{
infoTurno.textContent = `Victoria de ${jugador2.value}!!`
}
boton1.classList.add("ganadorJuego");
boton2.classList.add("ganadorJuego");
boton3.classList.add("ganadorJuego");
iniciarJuego = false;
}else if(boton4.value == v && boton5.value == v && boton6.value == v){
if(v == "X"){
infoTurno.textContent = `Victoria de ${jugador1.value}!!`
}else{
infoTurno.textContent = `Victoria de ${jugador2.value}!!`
}
boton4.classList.add("ganadorJuego");
boton5.classList.add("ganadorJuego");
boton6.classList.add("ganadorJuego");
iniciarJuego = false;
}else if(boton7.value == v && boton8.value == v && boton9.value == v){
if(v == "X"){
infoTurno.textContent = `Victoria de ${jugador1.value}!!`
}else{
infoTurno.textContent = `Victoria de ${jugador2.value}!!`
}
boton7.classList.add("ganadorJuego");
boton8.classList.add("ganadorJuego");
boton9.classList.add("ganadorJuego");
iniciarJuego = false;
}else if(boton1.value == v && boton4.value == v && boton7.value == v){
if(v == "X"){
infoTurno.textContent = `Victoria de ${jugador1.value}!!`
}else{
infoTurno.textContent = `Victoria de ${jugador2.value}!!`
}
boton1.classList.add("ganadorJuego");
boton4.classList.add("ganadorJuego");
boton7.classList.add("ganadorJuego");
iniciarJuego = false;
}else if(boton2.value == v && boton5.value == v && boton8.value == v){
if(v == "X"){
infoTurno.textContent = `Victoria de ${jugador1.value}!!`
}else{
infoTurno.textContent = `Victoria de ${jugador2.value}!!`
}
boton2.classList.add("ganadorJuego");
boton5.classList.add("ganadorJuego");
boton8.classList.add("ganadorJuego");
iniciarJuego = false;
}else if(boton3.value == v && boton6.value == v && boton9.value == v){
if(v == "X"){
infoTurno.textContent = `Victoria de ${jugador1.value}!!`
}else{
infoTurno.textContent = `Victoria de ${jugador2.value}!!`
}
boton3.classList.add("ganadorJuego");
boton6.classList.add("ganadorJuego");
boton9.classList.add("ganadorJuego");
iniciarJuego = false;
}else if(boton1.value == v && boton5.value == v && boton9.value == v){
if(v == "X"){
infoTurno.textContent = `Victoria de ${jugador1.value}!!`
}else{
infoTurno.textContent = `Victoria de ${jugador2.value}!!`
}
boton1.classList.add("ganadorJuego");
boton5.classList.add("ganadorJuego");
boton9.classList.add("ganadorJuego");
iniciarJuego = false;
}else if(boton3.value == v && boton5.value == v && boton7.value == v){
if(v == "X"){
infoTurno.textContent = `Victoria de ${jugador1.value}!!`
}else{
infoTurno.textContent = `Victoria de ${jugador2.value}!!`
}
boton3.classList.add("ganadorJuego");
boton5.classList.add("ganadorJuego");
boton7.classList.add("ganadorJuego");
iniciarJuego = false;
}else if(contadorCasillasMarcadas == 9){
infoTurno.textContent = "El juego termino empatado";
iniciarJuego = false;
}
}
botonReiniciar.addEventListener("click",()=>{
boton1.value = "";
boton2.value = "";
boton3.value = "";
boton4.value = "";
boton5.value = "";
boton6.value = "";
boton7.value = "";
boton8.value = "";
boton9.value = "";
iniciarJuego = true;
infoTurno.textContent = `Turno de ${jugador1.value}`;
turno = "j1";
boton1.classList.remove("ganadorJuego");
boton2.classList.remove("ganadorJuego");
boton3.classList.remove("ganadorJuego");
boton4.classList.remove("ganadorJuego");
boton5.classList.remove("ganadorJuego");
boton6.classList.remove("ganadorJuego");
boton7.classList.remove("ganadorJuego");
boton8.classList.remove("ganadorJuego");
boton9.classList.remove("ganadorJuego");
contadorCasillasMarcadas = 0;
})
\ 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