Todo jogo web começa no HTML (HyperText Markup Language). Ele define os elementos que o jogador vê (o pássaro, o placar, os tubos) e o contêiner que define o limite do nosso mundo de jogo. O JavaScript usará o DOM (Document Object Model) a representação hierárquica desses elementos para manipulá-los (movê-los, escondê-los, etc.).
1. 🖼️ A Estrutura Base (HTML)
Nosso HTML será o esqueleto do jogo. Ele precisa de três elementos principais dentro do contêiner de jogo: o pássaro, o placar e o local onde o JavaScript será carregado.
Crie um arquivo chamado index.html:
HTML
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flappy Geek Bird - Maratona Geek Codes</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="game-container">
<div id="geek-bird"></div>
<div id="score">Pontuação: 0</div>
</div>
<script src="game.js"></script>
</body>
</html>
2. 🎨 Estilizando o Palco (CSS)
O CSS (Cascading Style Sheets) dá vida ao nosso esqueleto, definindo as cores, dimensões e, crucialmente, o posicionamento dos elementos.
Para jogos, a propriedade position: relative no contêiner e position: absolute nos elementos internos (como o pássaro) é essencial, pois permite que o JavaScript mova o pássaro usando coordenadas X e Y.
Crie um arquivo chamado style.css:
CSS
body {
/* Centraliza o contêiner do jogo na tela */
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #333;
font-family: sans-serif;
}
#game-container {
/* Define o tamanho da tela de jogo (como um celular) */
width: 320px;
height: 480px;
background-color: #70c5ce; /* Cor de fundo (Céu) */
border: 3px solid #000;
/* ESSENCIAL: Permite que elementos filhos sejam posicionados de forma absoluta */
position: relative;
/* Garante que o pássaro e os tubos fiquem invisíveis ao sair da área */
overflow: hidden;
}
#geek-bird {
/* ESSENCIAL: Permite movimentação precisa via JavaScript */
position: absolute;
width: 35px;
height: 35px;
background-color: #ffcc00; /* Amarelo do pássaro */
border-radius: 50%; /* Forma redonda */
border: 2px solid #000;
/* Posição inicial: Meio da tela, um pouco à esquerda */
top: 200px;
left: 60px;
/* Garante que o pássaro fique acima de outros elementos */
z-index: 10;
}
#score {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%); /* Centraliza perfeitamente o texto */
color: #fff;
font-size: 1.5em;
font-weight: bold;
text-shadow: 2px 2px #000; /* Para dar destaque */
z-index: 20;
}
3. ✅ Teste seu Palco
Para rodar, salve os dois arquivos (index.html e style.css) na mesma pasta. Abra o index.html no seu navegador. Você verá a tela azul do jogo, um pássaro amarelo no canto e o placar.
Deixe um comentárioVocê precisa entrar para publicar um comentário.