Olá, tudo bem?
Eu fiz um jogo da velha apenas com front end usando quatro paginas (uma em html, uma em css e outras duas em javascript). Entretanto, não gostei do resultado primeiramente porque não consegui substituir as letras por simbolos visuais (toda vez que eu colocava um emoji travava) e segundo toda vez que eu clico o quadrado move para baixo desformatando. Tem como me ajudar? Vou colocar o codigo aqui como uma pagina só
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Jogo da Velha</title>
<style>
body {
text-align: center;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
}
.square {
width: 100px;
height: 100px;
background-color: beige;
border: 1px solid gray;
display: inline-block;
position: relative; /* Adicionado para manter as letras fixas */
}
.o::after,
.x::after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-size: 50px;
line-height: 100px;
text-align: center;
}
</style>
</head>
<body>
<h1>Jogo da Velha</h1>
<div class="stage">
<div>
<div id="0" class="square">
<div class="o"></div>
</div>
<div id="1" class="square">
<div class="x"></div>
</div>
<div id="2" class="square"></div>
</div>
</div>
<div class="stage">
<div id="3" class="square"></div>
<div id="4" class="square"></div>
<div id="5" class="square"></div>
</div>
<div class="stage">
<div id="6" class="square"></div>
<div id="7" class="square"></div>
<div id="8" class="square"></div>
</div>
</div>
<button id="restart-button">Reiniciar</button>
<script>
let board = ['', '', '', '', '', '', '', '', ''];
let playerTime = 0;
let symbols = ['O', 'X'];
let gameOver = false;
let winStates = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6],
];
function handleMove(position) {
if (gameOver) {
return;
}
if (board[position] == '') {
board[position] = symbols[playerTime];
gameOver = isWin();
if (!gameOver) {
playerTime = (playerTime == 0) ? 1 : 0;
}
}
return gameOver;
}
function isWin() {
for (let i = 0; i < winStates.length; i++) {
let seq = winStates[i];
let pos1 = seq[0];
let pos2 = seq[1];
let pos3 = seq[2];
if (board[pos1] == board[pos2] &&
board[pos1] == board[pos3] &&
board[pos1] != '') {
return true;
}
}
return false;
}
document.addEventListener("DOMContentLoaded", () => {
let squares = document.querySelectorAll(".square");
squares.forEach((square) => {
square.addEventListener("click", handleClick);
});
});
function handleClick(event) {
let square = event.target;
let position = square.id;
if (handleMove(position)) {
setTimeout(() => {
alert("O JOGO ACABOU");
}, 10);
}
updateSquare(position);
}
function updateSquare(position) {
let square = document.getElementById(position.toString());
let symbol = board[position];
square.innerHTML = `<div class="${symbol.toLowerCase()}">${symbol}</div>`;
}
function restartGame() {
board = ['', '', '', '', '', '', '', '', ''];
playerTime = 0;
gameOver = false;
let squares = document.querySelectorAll(".square");
squares.forEach((square) => {
square.innerHTML = "";
});
}
document.getElementById("restart-button").addEventListener("click", restartGame);
</script>
</body>
</html>
Obrigado pela atenção, Guilherme Tavares.
