![Como instalar o Docker no Linux(Ubuntu)](https://paulorb.dev/wp-content/uploads/2022/07/docker.png)
Como instalar o Docker no Linux(Ubuntu)
Para instalar o docker no ubuntu basta seguir os passos abaixo: Abra o terminal do Linux copie e cole os... Leia mais
Desenvolvedor de Software
Vamos hoje desenvolver uma atividade que é comum em alguns testes de programação onde iremos desenvolver um simples jogo da velha usando apenas HTML, CSS e JavaScript.
Primeiramente vamos criar três arquivos chamados index.html, styles.css e game.js.
O Arquivo index.html irá conter a estrutura básica do nosso jogo, o arquivo styles.css irá conter o código responsável pela formatação do nosso jogo e o arquivo game.js será responsável por realizar toda a lógica.
Então vamos lá. Abra no seu editor de código o arquivo index.html e cole o seguinte conteúdo:
<!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="styles.css">
</head>
<body>
<div id="gameBoard" class="game-board"></div>
<button class="btn-restart" onclick="startGame()">Reiniciar Jogo</button>
<script src="game.js"></script>
</body>
</html>
Agora vamos montar o arquivo styles.css
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
font-family: 'Arial', sans-serif;
background-color: #f7f7f7;
}
.game-board {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 20px;
}
.cell {
width: 100px;
height: 100px;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 2em;
color: #333;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
transition: background-color 0.3s, color 0.3s;
cursor: pointer;
}
.cell:hover {
background-color: #e1e1e1;
}
.btn-restart {
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #007BFF;
border: none;
border-radius: 5px;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
transition: background-color 0.3s;
}
.btn-restart:hover {
background-color: #0056b3;
}
e por últimos vamos a parte mais interessante que é a lógica do nosso jogo
// Inicializa o tabuleiro como um array vazio.
const board = [];
// Obtém o elemento HTML onde o tabuleiro do jogo será exibido.
const gameBoard = document.getElementById('gameBoard');
// Define o número de linhas e colunas do tabuleiro.
const rows = 3;
const cols = 3;
// Define qual jogador começa o jogo. 'X' será o primeiro.
let currentPlayer = 'X';
// Função para iniciar ou reiniciar o jogo.
function startGame() {
// Limpa o conteúdo do tabuleiro no HTML para um novo jogo.
gameBoard.innerHTML = '';
// Reinicia o jogador para 'X'.
currentPlayer = 'X';
// Preenche o tabuleiro com células vazias e adiciona elementos HTML para cada célula.
for (let i = 0; i < rows; i++) {
board[i] = [];
for (let j = 0; j < cols; j++) {
board[i][j] = '';
const cell = document.createElement('div');
// Adiciona a classe 'cell' para estilização.
cell.classList.add('cell');
// Armazena a posição da célula para uso posterior.
cell.dataset.row = i;
cell.dataset.col = j;
// Adiciona um ouvinte de evento para tratar o clique na célula.
cell.addEventListener('click', cellClicked);
// Adiciona a célula ao tabuleiro no HTML.
gameBoard.appendChild(cell);
}
}
}
// Função chamada quando uma célula é clicada.
function cellClicked() {
// Obtém a linha e coluna da célula clicada.
const row = this.dataset.row;
const col = this.dataset.col;
// Verifica se a célula já está ocupada.
if (board[row][col] !== '') return;
// Define o jogador atual na célula e atualiza o texto exibido.
this.innerText = currentPlayer;
board[row][col] = currentPlayer;
// Verifica se o jogador atual ganhou.
if (checkWinner(currentPlayer)) {
alert(currentPlayer + ' ganhou!');
startGame();
return;
}
// Verifica se o jogo terminou em empate.
if (checkDraw()) {
alert('Empate!');
startGame();
return;
}
// Troca o jogador atual.
currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
}
// Função para verificar se há um vencedor.
function checkWinner(player) {
// Verifica todas as linhas para ver se há uma vitória.
for (let i = 0; i < rows; i++) {
if (board[i].every(cell => cell === player)) return true;
}
// Verifica todas as colunas para ver se há uma vitória.
for (let j = 0; j < cols; j++) {
if (board.map(row => row[j]).every(cell => cell === player)) return true;
}
// Verifica as duas diagonais para ver se há uma vitória.
if (board.map((row, idx) => row[idx]).every(cell => cell === player)) return true;
if (board.map((row, idx) => row[cols - 1 - idx]).every(cell => cell === player)) return true;
return false;
}
// Função para verificar se o jogo terminou em empate.
function checkDraw() {
// Verifica se todas as células estão preenchidas e nenhuma condição de vitória foi atendida.
return board.flat().every(cell => cell !== '');
}
// Evento que inicializa o jogo assim que o conteúdo do DOM estiver carregado.
document.addEventListener('DOMContentLoaded', startGame);
E por fim o resultado da nossa atividade:
Para instalar o docker no ubuntu basta seguir os passos abaixo: Abra o terminal do Linux copie e cole os... Leia mais
Em React, o estado refere-se a uma estrutura de dados que determina o comportamento do componente e como ele será... Leia mais
Vamos lá a mais um estudo de caso. Na tela abaixo temos um crud simples cujo frontend foi feito com... Leia mais
Como todo mundo na programação já passou por este clichê, aqui não poderia ser diferente então o primeiro post desse... Leia mais