Skip to content

D
dia009
Commit a8cc979d by Joel Florentin
Options

tateti

parents
Showing with 138 additions and 0 deletions
tateti.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ta te ti</title>
<style>
table{
width: 300px;
height: 300px;
margin-top: 10%;
margin-left: 40%;
table-layout: fixed;
text-align: center;
}
table, th, td {
border: 1px solid black;
}
tr.fila{
margin:0;
padding:0;
width: 30px;
height: 30px;
}
.gano{
background-color: aqua;
}
</style>
</head>
<body>
Turno del jugador <p id="jugador">X</p>
<button onclick="location.reload()">Reset</button>
<table id="tablero">
</table>
<script>
let tablero = document.querySelector("#tablero");
let jugador = document.querySelector("#jugador");
let primero = true;
var tableroValue = [[],[],[]];
var contador = 0;
function creacionTabla(){
for (let fila = 0; fila < 3; fila++) {
let tr = document.createElement("tr")
tr.setAttribute('data-fila',fila)
tr.classList.add('fila')
for (let columna = 0; columna < 3; columna++) {
let td = document.createElement("td")
td.setAttribute('data-columna',columna)
tr.append(td)
}
tablero.append(tr)
}
}
function ganar(){
if(contador<5)return false;
let match = 0;
//control por columna
for (let fila = 0; fila < 3; fila++) {
let anterior = tableroValue[fila][0]
match = 0;
for (let columna = 1; columna < 3; columna++) {
let actual = tableroValue[fila][columna]
if(actual==anterior && (actual == "X" || actual == "O")) {
match++;
}
anterior = actual
}
if(match==2) {
tablero.children[fila].classList.add('gano')
return true
}
}
//control por fila
for (let columna = 0; columna < 3; columna++) {
let anterior = tableroValue[0][columna]
match = 0;
for (let fila = 1; fila < 3; fila++) {
let actual = tableroValue[fila][columna]
if(actual==anterior && (actual == "X" || actual == "O")) {
match++;
}
anterior = actual
}
if(match==2) {
document.querySelectorAll(`td[data-columna="${columna}"]`).forEach(
td => td.classList.add("gano")
);
return true
}
}
//diagonales
if((tableroValue[0][0] == "O"||tableroValue[0][0] == "X")&&tableroValue[0][0]==tableroValue[1][1]&&tableroValue[1][1]==tableroValue[2][2]) {
for (let index = 0; index < 3; index++) {
document.querySelector(`tr[data-fila="${index}"] > td[data-columna="${index}"]`).classList.add("gano")
}
return true;
}
if((tableroValue[0][2] == "O"||tableroValue[0][2] == "X")&&tableroValue[0][2]==tableroValue[1][1]&&tableroValue[1][1]==tableroValue[2][0]) {
for (let index = 0; index < 3; index++) {
document.querySelector(`tr[data-fila="${index}"] > td[data-columna="${2-index}"]`).classList.add("gano")
}
return true;
}
return false;
}
function entrada(evt){
if(evt.target.innerHTML.length!=0) return ;
const fila = evt.target.parentElement.getAttribute('data-fila');
const col = evt.target.getAttribute('data-columna');
let valor = primero ? "X" : "O";
evt.target.innerHTML = valor;
primero = !primero;
if(tableroValue[fila]==null) tableroValue[fila]=[]
tableroValue[fila][col] = valor;
contador++;
if(ganar()) console.log("ganooo");
jugador.innerHTML = primero ? "X" : "O";;
}
creacionTabla()
document.querySelectorAll('td').forEach(
td =>{
td.addEventListener('click',entrada)
}
)
</script>
</body>
</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