Criando Jogo da Velha Javascript
Criando Jogo da Velha Javascript estilo Neon.
Criando Jogo da Velha Javascript, neste tutorial mostro como criar um Jogo da Velha em Javascript no estilo Neon usando apenas html, CSS e Javascript, será um breve tutorial que mostro como construir e estilizar um jogo da velha usando html, css e javascript.
Segue abaixo o código utilizado para criar a estrutura do Jogo da Velha:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Jogo da Velha</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1>Jogo da Velha</h1> <div class="game-board"> <div class="cell" data-index="0"></div> <div class="cell" data-index="1"></div> <div class="cell" data-index="2"></div> <div class="cell" data-index="3"></div> <div class="cell" data-index="4"></div> <div class="cell" data-index="5"></div> <div class="cell" data-index="6"></div> <div class="cell" data-index="7"></div> <div class="cell" data-index="8"></div> </div> <div class="status"></div> <button class="reset-button">Reiniciar</button> </div> <script src="script.js"></script> </body> </html>
Segue abaixo o código utilizado para estilizar o jogo:
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #000;
font-family: Arial, sans-serif;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
h1 {
color: #fff;
font-size:48px;
line-height: 48px;
text-shadow: 0 0 3vw #2356FF;
animation: neon 3s linear infinite;
-moz-animation: neon 3s linear infinite;
-webkit-animation: neon 3s linear infinite;
-o-animation: neon 3s linear infinite;
}
@keyframes neon {
0%,
100% {
text-shadow: 0 0 1vw #1041FF, 0 0 3vw #1041FF, 0 0 10vw #1041FF, 0 0 10vw #1041FF, 0 0 .4vw #8BFDFE, .5vw .5vw .1vw #147280;
color: #fff;
}
50% {
text-shadow: 0 0 .5vw #082180, 0 0 1.5vw #082180, 0 0 5vw #082180, 0 0 5vw #082180, 0 0 .2vw #082180, .5vw .5vw .1vw #0A3940;
color: #698c94;
}
}
.game-board {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
gap: 10px;
}
.cell {
width: 100px;
height: 100px;
background-color: transparent;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
font-weight: bold;
cursor: pointer;
color: #fff;
border-radius: 8px;
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff00ff, 0 0 30px #ff00ff,
0 0 40px #ff00ff, 0 0 50px #ff00ff, 0 0 60px #ff00ff;
border: 2px solid #fff; /* Borda branca */
box-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff, 0 0 30px #ff00ff;
transition: transform 0.2s ease-in-out;
}
.cell:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.cell:active {
transform: scale(1.2);
}
.cell.x {
color: #fff;
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #00ff00, 0 0 30px #00ff00,
0 0 40px #00ff00, 0 0 50px #00ff00, 0 0 60px #00ff00;
}
.cell.o {
color: #fff;
text-shadow: 0 0 10px #fff, 0 0 20px #00f, 0 0 30px #00f, 0 0 40px #00f,
0 0 50px #00f, 0 0 60px #00f, 0 0 70px #00f;
}
.status {
margin-top: 20px;
font-size: 24px;
font-weight: bold;
color: #fff;
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #00ff00, 0 0 30px #00ff00,
0 0 40px #00ff00, 0 0 50px #00ff00, 0 0 60px #00ff00;
}
.status.x {
color: #fff;
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #00ff00, 0 0 30px #00ff00,
0 0 40px #00ff00, 0 0 50px #00ff00, 0 0 60px #00ff00;
}
.status.o {
color: #fff;
text-shadow: 0 0 10px #fff, 0 0 20px #00f, 0 0 30px #00f, 0 0 40px #00f,
0 0 50px #00f, 0 0 60px #00f, 0 0 70px #00f;
}
.reset-button {
margin-top: 10px;
padding: 10px 20px;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
background-color: #000;
color: #fff;
border: 2px solid #fff;
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #00ff00, 0 0 30px #00ff00,
0 0 40px #00ff00, 0 0 50px #00ff00, 0 0 60px #00ff00;
box-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00;
}
.reset-button:hover {
background-color: rgba(255, 255, 255, 0.1);
}
Segue abaixo o código Javascript usado no tutorial:
document.addEventListener("DOMContentLoaded", () => {
const cells = document.querySelectorAll(".cell");
const statusDisplay = document.querySelector(".status");
const resetButton = document.querySelector(".reset-button");
let currentPlayer = "X";
let gameState = ["", "", "", "", "", "", "", "", ""];
const winningConditions = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6],
];
const handleCellClick = (e) => {
const clickedCell = e.target;
const clickedCellIndex = parseInt(clickedCell.getAttribute("data-index"));
if (gameState[clickedCellIndex] !== "" || !isGameActive()) {
return;
}
gameState[clickedCellIndex] = currentPlayer;
clickedCell.textContent = currentPlayer;
clickedCell.classList.add(currentPlayer.toLowerCase());
if (checkWinner()) {
statusDisplay.textContent = `Jogador ${currentPlayer} venceu!`;
statusDisplay.classList.add(currentPlayer.toLowerCase());
} else if (!gameState.includes("")) {
statusDisplay.textContent = `Empate!`;
statusDisplay.classList.remove("x", "o");
} else {
currentPlayer = currentPlayer === "X" ? "O" : "X";
updateStatusDisplay();
}
};
const checkWinner = () => {
for (let i = 0; i < winningConditions.length; i++) {
const [a, b, c] = winningConditions[i];
if (
gameState[a] &&
gameState[a] === gameState[b] &&
gameState[a] === gameState[c]
) {
return true;
}
}
return false;
};
const isGameActive = () => {
return (
!statusDisplay.textContent.includes("vence") &&
!statusDisplay.textContent.includes("Empate")
);
};
const handleResetGame = () => {
gameState = ["", "", "", "", "", "", "", "", ""];
currentPlayer = "X";
updateStatusDisplay();
cells.forEach((cell) => {
cell.textContent = "";
cell.classList.remove("x", "o");
});
statusDisplay.classList.remove("x", "o");
};
const updateStatusDisplay = () => {
statusDisplay.textContent = `Vez do jogador ${currentPlayer}`;
statusDisplay.classList.remove("x", "o");
statusDisplay.classList.add(currentPlayer.toLowerCase());
};
cells.forEach((cell) => cell.addEventListener("click", handleCellClick));
resetButton.addEventListener("click", handleResetGame);
updateStatusDisplay();
});
Você pode visualizar o resultado do jogos neste link :
Vídeo Tutorial Criando Jogo da Velha:
Código fonte do tutorial:
