La Estancia Azul

Ejemplo sencillo de uso de Javascript, para mediante manipulaciones del DOM, poder diseñar un sencillo juego del 3 en Raya (está sin implementar la lógica para detectar el ganador del de la partida).

Los elementos utilizados en este ejemplo incluyen:

• Eventos: mouseover, mouseout y click
• Selectores: querySelector y querySelectorAll
• Propiedades: textContent y style.backgroundColor

Para colocar una ficha, haga click en las casillas del tablero.

Código HTML del ejemplo:

<a id="restart" class="btn btn-primary btn-lg" href="#" role="button">Restart</a>

<table id="tablero" class="table table-bordered text-center" style="width: 450px; height: 450px;">
    <tbody>
        <tr>
            <td id="cas1" class="celda"></td>
            <td id="cas2" class="celda"></td>
            <td id="cas3" class="celda"></td>
        </tr>
        <tr>
            <td id="cas4" class="celda"></td>
            <td id="cas5" class="celda"></td>
            <td id="cas6" class="celda"></td>
        </tr>
        <tr>
            <td id="cas7" class="celda"></td>
            <td id="cas8" class="celda"></td>
            <td id="cas9" class="celda"></td>
        </tr>
    </tbody>
</table>

Código CSS del ejemplo:

<style>
    .celda {
        height: 150px;
        width: 150px;
        font-size: 80px;
        text-align: center;
        color: white;
        background-color: #212529;
        padding: 0px;
    }
</style>

Javascript:

// Declaracion de constantes
const players = [["#0000cc", "X"],["#cc0000", "O"]];
const colours = ["#212529","#00cc00"]
// Declaracion de variables
var playerTurn = 0;
var playerCount = 0;
var btnRestart = document.querySelector("#restart");
var btnCeldas = document.querySelectorAll(".celda");

// Asociar eventos
btnRestart.addEventListener("click", restartGame)
for (var i=0;i<btnCeldas.length;i++) {
    btnCeldas[i].addEventListener("click", cambiarCelda);
    btnCeldas[i].addEventListener("mouseover", overCelda);
    btnCeldas[i].addEventListener("mouseout", outCelda);
}

// Funciones del juego
function overCelda (e) {
    if (e.target.textContent == "" ) {
        e.target.style.backgroundColor = colours[1];
    }
}

function outCelda (e) {
    if (e.target.textContent == "" ) {
        e.target.style.backgroundColor = colours[0];
    }
}

function cambiarCelda () {
    if (this.textContent == "" ) {
        this.style.backgroundColor = players[playerTurn][0];
        this.textContent = players[playerTurn][1];
        playerTurn = playerTurn==0?1:0;
        playerCount++;
        checkWin();
    }
}

function restartGame () {
    playerTurn = 0;
    playerCount = 0;
    for (var i=0;i<btnCeldas.length;i++) {
        btnCeldas[i].style.backgroundColor = colours[0];
        btnCeldas[i].textContent = "";
    }
    var txtWin = document.querySelector("#textWin");
    txtWin.textContent = ""
    txtWin.className="text-hide";
}

function checkWin () {
    var txtWin = document.querySelector("#textWin");
    if (playerCount == 9) {
        txtWin.textContent = "Tablas!!!"
        txtWin.className="";
    } // To-do check win
}