Introdução
Este projeto guia você na criação de um jogo web simples, mas envolvente, intitulado "Don't Step on the White Tile" (Não Pise no Azulejo Branco). Seguindo estes passos, você aprenderá a combinar HTML, CSS e JavaScript para construir um jogo interativo onde os jogadores devem evitar pisar nos azulejos brancos para marcar pontos. Este projeto é ideal para iniciantes que buscam praticar suas habilidades de desenvolvimento web.
👀 Pré-visualização
🎯 Tarefas
Neste projeto, você aprenderá:
- Como configurar uma estrutura HTML básica para criar a interface do seu jogo.
- Como utilizar CSS para estilizar o jogo, tornando-o visualmente atraente e fácil de usar.
- Como implementar JavaScript para adicionar funcionalidades dinâmicas, como mover os azulejos, sistemas de pontuação e lógica do jogo.
- Como lidar com as interações do usuário através de eventos como cliques, aprimorando a interatividade do jogo.
- Como manipular o DOM para atualizar dinamicamente o estado do jogo, como a pontuação e as condições de fim de jogo.
- Como aplicar conceitos básicos de desenvolvimento de jogos, como loops de jogo, detecção de colisão e ajustes de velocidade.
🏆 Conquistas
Após concluir este projeto, você será capaz de:
- Demonstrar uma sólida compreensão de como HTML, CSS e JavaScript podem ser combinados para criar aplicações web interativas.
- Aplicar experiência prática em conceitos de desenvolvimento de jogos, como animação, tratamento de entrada do usuário e atualizações em tempo real.
- Manipular o DOM e lidar com eventos para criar aplicações web responsivas.
- Melhorar suas habilidades de resolução de problemas através da implementação da lógica do jogo e do tratamento de casos extremos, como condições de fim de jogo.
- Mostrar sua criatividade em design web e estética de jogos, e explorar personalizações e aprimoramentos adicionais.
- Dar um passo fundamental em direção a projetos de desenvolvimento web e design de jogos mais complexos, preparando o terreno para mais aprendizado e exploração no campo das tecnologias web.
Configurando a Estrutura HTML
Comece criando a estrutura HTML básica para o jogo em index.html. Isso inclui o título do jogo, a exibição da pontuação, a área principal do jogo (#main) e o botão de início. A área principal do jogo conterá as linhas de azulejos em movimento.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Don't Step on the White Tile</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<h2>Score</h2>
<h2 id="score">0</h2>
<div id="main">
<div id="con"></div>
</div>
<div class="btn">
<button class="start" onclick="start()">Start Game</button>
</div>
<script src="index.js"></script>
</body>
</html>
Nesta etapa, você estabeleceu a estrutura HTML fundamental para o jogo. A estrutura inclui um título para o jogo, uma exibição para a pontuação, uma área principal do jogo identificada por #main para os azulejos em movimento e um botão de início para começar o jogo. A área #main será posteriormente preenchida com linhas de azulejos com os quais os jogadores interagirão durante o jogo. Essa configuração é crucial, pois estabelece o esqueleto do jogo, sobre o qual CSS e JavaScript adicionarão estilo e funcionalidade.
Criando os Estilos CSS
Defina os estilos CSS para estruturar visualmente o jogo em index.css. Esta etapa envolve estilizar o contêiner principal do jogo, os azulejos individuais (células) e o botão de início para tornar o jogo visualmente atraente.
#main {
width: 408px;
height: 408px;
background: white;
border: 2px solid gray;
margin: 0 auto;
overflow: hidden;
}
h2 {
text-align: center;
}
#con {
width: 100%;
height: 400px;
position: relative;
top: -408px;
border-collapse: collapse;
}
.row {
height: 100px;
width: 100%;
}
.cell {
height: 100px;
width: 100px;
float: left;
border: rgb(54, 74, 129) 1px solid;
}
.black {
background: black;
}
.btn {
width: 100%;
text-align: center;
}
.start {
margin: 20px auto;
width: 150px;
height: 50px;
border-radius: 10px;
background: yellowgreen;
line-height: 50px;
color: #fff;
}
Você definiu os estilos CSS que determinam os aspectos visuais do jogo. Os estilos incluem o layout da área principal do jogo, a aparência dos azulejos (ou células) e a estilização do botão de início. Ao definir esses estilos, você tornou o jogo visualmente atraente e definiu os elementos da interface do usuário com os quais os jogadores interagirão, como o tabuleiro do jogo e o botão de início. Esses estilos são essenciais para tornar o jogo envolvente e acessível aos jogadores.
Inicialização do Jogo
Nesta etapa, você começará a escrever o JavaScript necessário para dar vida ao seu jogo em index.js. Comece criando as funções start e init para inicializar o jogo e criar dinamicamente o conjunto inicial de linhas para a área do jogo.
// Helper function to get element by ID
function $(id) {
return document.getElementById(id);
}
// Function to create a div with a given class name
function createDiv(className) {
var div = document.createElement("div");
div.className = className;
return div;
}
var gameStarted = false;
// Function to start the game
function start() {
if (!gameStarted) {
init();
} else {
alert("The game has already started, no need to click again!");
}
}
// Initialize the game
function init() {
gameStarted = true;
for (var i = 0; i < 4; i++) {
createRow();
}
}
Nesta fase, você começou a dar vida ao jogo com JavaScript. O código que você escreveu inicializa o jogo e configura a mecânica para criar as linhas iniciais de azulejos. Isso inclui a definição de funções auxiliares para manipulação do DOM, a configuração de uma flag para evitar múltiplos inícios de jogo e a criação da base para adicionar dinamicamente linhas à área do jogo. Esta etapa é crucial, pois configura os elementos dinâmicos do jogo, preparando-se para a parte interativa do jogo, onde os azulejos se movem e os jogadores podem começar a interagir com o jogo.
Manipulação da Movimentação da Linha e Verificação de Fim de Jogo
Estenda a funcionalidade JavaScript para incluir o movimento das linhas para baixo e verificar se o jogo acabou. Isso envolve a criação de um loop de jogo que atualiza a posição das linhas e verifica se alguma linha ultrapassou o limite permitido sem ser 'pisada'.
// Continue in index.js
var speed = 6; // Initial speed of the moving rows
var clock = null;
// Move the rows down
function move() {
var con = $("con");
var top = parseInt(window.getComputedStyle(con, null)["top"]);
if (speed + top > 0) {
top = 0;
} else {
top += speed;
}
con.style.top = top + "px";
checkGameOver();
if (top == 0) {
createRow();
con.style.top = "-102px";
deleteRow();
}
}
// Check if the game is over
function checkGameOver() {
var con = $("con");
var rows = con.childNodes;
var conTop = parseInt(window.getComputedStyle(con, null)["top"]);
var conHeight = con.offsetHeight;
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
var rowTop = conTop + i * row.offsetHeight;
if (rowTop >= conHeight && row.passed !== 1) {
fail();
break;
}
}
}
Aqui, você expandiu a funcionalidade do jogo adicionando a lógica para mover as linhas para baixo e verificar as condições de fim de jogo. A função move atualiza a posição das linhas, simulando o movimento dos azulejos que os jogadores precisam evitar pisar. A função checkGameOver monitora se alguma linha ultrapassou a parte inferior da área do jogo sem ser 'pisada', o que encerraria o jogo. Esta etapa introduz a principal mecânica e desafio do jogo, tornando-o interativo e envolvente.
Implementando a Pontuação e o Aumento de Velocidade
Nesta etapa, concentre-se na implementação do mecanismo de pontuação do jogo e no aumento da velocidade das linhas à medida que a pontuação do jogador aumenta. Isso adiciona um nível de desafio ao jogo, mantendo-o envolvente.
// Continue in index.js
// Update the score
function score() {
var newScore = parseInt($("score").innerHTML) + 1;
$("score").innerHTML = newScore;
if (newScore % 10 == 0) {
speedUp();
}
}
// Increase the speed of the moving rows
function speedUp() {
speed += 2;
if (speed == 20) {
alert("Incredible speed!");
}
}
Nesta etapa, você implementou o sistema de pontuação do jogo e adicionou um recurso para aumentar a velocidade das linhas em movimento à medida que a pontuação do jogador aumenta. Isso não apenas fornece feedback ao jogador sobre seu desempenho, mas também aumenta progressivamente a dificuldade do jogo. O mecanismo de pontuação recompensa os jogadores por evitar com sucesso os azulejos brancos, e o aumento da velocidade desafia os tempos de reação do jogador, tornando o jogo mais envolvente e competitivo.
Manipulação das Interações do Usuário
Implemente a lógica para lidar com os cliques do usuário nos azulejos. Os jogadores devem pontuar ao clicar nos azulejos pretos e perder ao clicar nos azulejos brancos.
// Continue in index.js
// Judge the player's action
function judge(ev) {
ev = ev || event;
if (ev.target.className.indexOf("black") !== -1) {
ev.target.className = "cell";
ev.target.parentNode.passed = 1;
score();
} else if (ev.target.className.indexOf("cell") !== -1) {
fail();
}
}
Nesta etapa, você implementou a função judge para lidar com os cliques do usuário dentro do jogo. Quando um jogador clica em um azulejo, a função determina se o azulejo é preto ou não. Se o azulejo for preto (movimento correto), ele se transforma em uma célula regular e a pontuação é atualizada. Se o azulejo não for preto (movimento incorreto), ele aciona a sequência de fim de jogo. Esta função é crucial para a interatividade do jogo, permitindo que os jogadores interajam com o jogo clicando nos azulejos e recebendo feedback imediato sobre suas ações.
Criando e Excluindo Linhas
Desenvolva funções para criar dinamicamente novas linhas de azulejos e excluir a linha mais antiga quando ela não estiver mais visível, a fim de manter o jogo funcionando sem problemas.
// Continue in index.js
// Randomly assign the black cell in a row
function createCell() {
var temp = ["cell", "cell", "cell", "cell"];
var i = Math.floor(Math.random() * 4);
temp[i] = "cell black";
return temp;
}
// Create a new row of tiles
function createRow() {
var con = $("con");
var row = createDiv("row");
var arr = createCell();
for (var i = 0; i < 4; i++) {
row.appendChild(createDiv(arr[i]));
}
if (con.firstChild == null) {
con.appendChild(row);
} else {
con.insertBefore(row, con.firstChild);
}
}
// Delete the last row if there are more than 5 rows
function deleteRow() {
var con = $("con");
if (con.childNodes.length == 6) {
con.removeChild(con.lastChild);
}
}
Você adicionou a função createRow para gerar dinamicamente linhas de azulejos com um azulejo preto em uma posição aleatória, aprimorando a imprevisibilidade e o desafio do jogo. A função deleteRow remove a linha mais antiga que não está mais visível, otimizando o desempenho do jogo e garantindo que a área do jogo não transborde com elementos não utilizados. Essas funções trabalham juntas para manter um fluxo contínuo de azulejos para o jogador interagir.
Implementando a Lógica de Fim de Jogo
Defina as condições sob as quais o jogo terminará, como clicar em um azulejo branco ou perder um azulejo preto. Exiba a pontuação final do jogador e ofereça uma opção para reiniciar o jogo.
// Continue in index.js
// End the game
function fail() {
clearInterval(clock);
gameStarted = false;
confirm("Your final score is " + parseInt($("score").innerHTML));
window.location.reload();
}
Ao definir a função fail, você estabeleceu as condições sob as quais o jogo termina. Esta função é chamada quando o jogador faz um movimento incorreto ou perde um azulejo preto. Ela interrompe o loop do jogo, exibe a pontuação final do jogador e recarrega a página para um novo começo. Esta etapa é vital para fornecer uma experiência de jogo completa, incluindo o desafio de evitar erros e a finalidade do término do jogo.
Iniciando o Loop do Jogo
Configure o loop principal do jogo que mantém os azulejos movendo-se para baixo na tela. Ajuste a velocidade de movimento com base na pontuação do jogador para aumentar a dificuldade.
// Continue in index.js
// Start the game loop
function start() {
if (!gameStarted) {
init();
clock = setInterval("move()", 30);
}
}
Você configurou o loop principal do jogo com a função move, que move continuamente as linhas para baixo na tela, simulando o progresso do jogo. A velocidade de movimento aumenta à medida que a pontuação do jogador sobe, adicionando dificuldade ao jogo. Este loop é o coração do jogo, impulsionando a jogabilidade e desafiando o jogador a acompanhar o ritmo crescente.
Adicionando Event Listener
Anexe um event listener à área do jogo para detectar e responder às ações do jogador, como clicar nos azulejos.
// Continue in index.js
// Add event listener for the main game container
$("main").onclick = function (ev) {
judge(ev);
};
Nesta etapa, você anexou um event listener à área principal do jogo, permitindo que ele responda aos cliques do jogador. Essa funcionalidade é essencial para capturar as interações do usuário, permitindo que o jogo processe os movimentos do jogador e atualize o estado do jogo de acordo. É o que torna o jogo interativo e responsivo às ações do jogador.
Para ver os seguintes efeitos, clique no botão Go Live no canto inferior direito do WebIDE e mude para a aba "Web 8080".
Resumo
Ao concluir este projeto, você criou um jogo funcional baseado na web intitulado "Don't Step on the White Tile". Este projeto não apenas aprimora sua compreensão de como HTML, CSS e JavaScript trabalham juntos para criar conteúdo web interativo, mas também fornece uma base para criar jogos baseados na web mais complexos no futuro. Experimente diferentes estilos, recursos e funcionalidades para tornar o jogo exclusivamente seu. Boa codificação!
