Desenvolvimento do Jogo Interativo "Detona Ralph" com HTML, CSS e JavaScript Introdução

Desenvolvimento do Jogo Interativo "Detona Ralph" com HTML, CSS e JavaScript

Introdução

Desenvolver jogos interativos utilizando tecnologias web é uma excelente forma de aprender e praticar programação front-end. Neste projeto, apresento o desenvolvimento do jogo "Detona Ralph", inspirado no filme homônimo, utilizando HTML5, CSS3 e JavaScript puro. O objetivo foi aplicar conceitos fundamentais do desenvolvimento web, organização de código e controle de versão via GitHub, em um contexto prático e lúdico.

Como foi feito o projeto

Organização dos arquivos

O projeto foi estruturado na pasta detona-ralph, aberta no Visual Studio Code para facilitar o desenvolvimento. Para controle de versões e compartilhamento, criei um repositório público no GitHub com o nome “Projeto Detona Ralph”.

Estrutura dos recursos

O código está organizado em pastas para melhor manutenção e escalabilidade:

audios/ — arquivos de áudio usados no jogo, como efeitos sonoros e música de fundo.
images/ — imagens e sprites do jogo (exemplo: player.png, ralph.png, wall.png).
src/ — pasta principal contendo:
scripts/ — arquivo JavaScript (engine.js) que contém a lógica do jogo.
styles/ — arquivos CSS, sendo reset.css para padronização dos estilos e main.css para o visual do jogo.

Figura 01: Estrutura de pastas

Desenvolvimento do código

Estrutura HTML (`index.html`)

O arquivo HTML define a estrutura básica do jogo, incluindo um painel de nove quadrados, menus para exibir tempo restante e pontuação, e a área de vidas do jogador. Também faz referência aos estilos e scripts necessários, além de carregar uma música de fundo que inicia após o primeiro clique do usuário.

html
CopiarEditar
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Detona halph</title>

  <!-- Fontes Google -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Press+Start+2P&display=swap" rel="stylesheet" />

  <!-- Estilos -->
  <link rel="stylesheet" href="./src/styles/reset.css" />
  <link rel="stylesheet" href="./src/styles/main.css" />
</head>
<body>
  <main></main>
  <div class="container">
      <div class="menu">
          <div class="menu-time">
              <h2 style="color: red">Time left</h2>
              <h2 id="time-left" class="second">0</h2>
          </div>
          <div class="menu-score">
              <h2 style="color: red">Your Score</h2>
              <h2 id="score" class="second">0</h2>
          </div>
          <div class="lives">
              <img src="./src/images/player.png" alt="foto do jogador" height="60px" />
              <h2>X3</h2>
          </div>
      </div>
      <div class="panel">
          <div class="panel-row">
              <div class="square enemy" id="1"></div>
              <div class="square" id="2"></div>
              <div class="square" id="3"></div>
          </div>
          <div class="panel-row">
              <div class="square" id="4"></div>
              <div class="square" id="5"></div>
              <div class="square" id="6"></div>
          </div>
          <div class="panel-row">
              <div class="square" id="7"></div>
              <div class="square" id="8"></div>
              <div class="square" id="9"></div>
          </div>
      </div>
  </div>

  <script defer src="./src/scripts/engine.js"></script>
  <audio id="bg-music" src="./src/audios/background.mp3" loop></audio>
</body>
</html>

Estilos CSS (`main.css` e `reset.css`)

O CSS foi aplicado para garantir um layout simples e funcional, com uso das fontes “Bebas Neue” e “Press Start 2P” para estilo de texto. O reset.css zera margens, paddings e define o box-sizing para border-box:

css
CopiarEditar
/* reset.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Bebas Neue", sans-serif;
}

O main.css define a estrutura do layout, painel de quadrados, cores e posicionamento:

css
CopiarEditar
body {
  font-family: 'Bebas Neue', sans-serif;
}

h2, .menu-time h2, .menu-score h2 {
  font-family: 'Press Start 2P', cursive;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-image: url("../images/wall.png");
}

.menu {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 90px;
  width: 100%;
  background-color: #000000;
  color: #ffffff;
  border-bottom: 5px solid #ffd700;
}

.panel {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.square {
  height: 150px;
  width: 150px;
  border: 1px solid #000000;
  background-color: #1aeaa5;
}

.enemy {
  background-image: url("../images/ralph.png");
  background-size: cover;
}

.lives {
  display: flex;
  align-items: center;
  justify-content: center;
}

.second {
  margin-top: 10px;
}

Lógica do jogo (`engine.js`)

O JavaScript controla a dinâmica do jogo, incluindo:

Seleção aleatória do quadrado inimigo (randomsquare);
Movimentação do inimigo em intervalos de tempo definidos (moveenemy);
Detecção de cliques válidos para marcar pontos (addlistenerhitbox);
Temporizador regressivo que termina o jogo quando chega a zero (countdawn);
Efeitos sonoros para interação.

js
CopiarEditar
const state = {
view: {
  squares: document.querySelectorAll(".square"),
  enemy: document.querySelector(".enemy"),
  timeleft: document.querySelector("#time-left"),
  score: document.querySelector("#score"),
},
values: {
  timerId: null,
  gamevelocity: 1000,
  hitposition: 0,
  result: 0, 
  currenttime: 10,
  countdawntimerid: null,
}, 
};

function countdawn() {
state.values.currenttime--;
state.view.timeleft.textContent = state.values.currenttime;

if (state.values.currenttime <= 0) {
  clearInterval(state.values.countdawntimerid);
  clearInterval(state.values.timerId);
  alert("GAME OVER! O seu resultado foi:" + state.values.result);
}
}

function playsound() {
let audio = new Audio("./src/audios/hit.m4a");
audio.volume = 0.2;
audio.play();
}

function randomsquare() {
state.view.squares.forEach(square => square.classList.remove("enemy"));
let ramdomnumber = Math.floor(Math.random() * 9);
let ramdomsquare = state.view.squares[ramdomnumber];
ramdomsquare.classList.add("enemy");
state.values.hitposition = ramdomsquare.id;
}

function moveenemy() {
state.values.timerId = setInterval(randomsquare, state.values.gamevelocity);
}

function addlistenerhitbox() {
state.view.squares.forEach(square => {
  square.addEventListener("mousedown", () => {
    if (square.id === state.values.hitposition) {
      state.values.result++;
      state.view.score.textContent = state.values.result;
      state.values.hitposition = null;
      playsound();
    }
  });
});
}

function init() {
moveenemy();
addlistenerhitbox();
state.values.countdawntimerid = setInterval(countdawn, 1000);
}

window.addEventListener("DOMContentLoaded", () => {
const bgMusic = document.getElementById("bg-music");
bgMusic.volume = 0.3;

document.addEventListener("click", function startAudioAndGame() {
  bgMusic.play().catch(error => {
    console.log("Erro ao reproduzir música de fundo:", error);
  });

  init();

  document.removeEventListener("click", startAudioAndGame);
});
});

Integração com GitHub

Para versionar o projeto e manter o código seguro, utilizei os comandos Git abaixo:

bash
CopiarEditar
cd Desktop
cd detona-ralph
git init
git add .
git commit -m "Commit inicial"
git branch -M main
git remote add origin https://github.com/eliabysilva/Detona-ralph.git
git push -u origin main

Figura 02: Tela do jogo Detona Ralph

Com isso, o projeto está disponível online para consulta e evolução contínua.

Como o jogo funciona

O usuário deve clicar rapidamente no quadrado onde o inimigo (personagem Ralph) aparece. Cada acerto aumenta a pontuação exibida em tempo real. O jogo dura 10 segundos, controlados por um temporizador visível na tela. Ao final, o jogo exibe o resultado final com um alerta.

Resultados e aprendizados

Este projeto permitiu consolidar conhecimentos em HTML, CSS e JavaScript, especialmente no que se refere à manipulação dinâmica do DOM, eventos e temporizadores. O uso do GitHub reforçou boas práticas de versionamento e organização.

Conclusão

Desenvolver o jogo "Detona Ralph" foi uma experiência enriquecedora para aprofundar o domínio das tecnologias front-end e ferramentas colaborativas, preparando para desafios futuros em desenvolvimento web.

Referências

ASSOCIAÇÃO BRASILEIRA DE NORMAS TÉCNICAS. NBR 6022:2018 – Informação e documentação – Artigo em publicação periódica técnica e/ou científica – Apresentação. Rio de Janeiro, 2018.
ASSOCIAÇÃO BRASILEIRA DE NORMAS TÉCNICAS. NBR 6023:2018 – Informação e documentação – Referências – Elaboração. Rio de Janeiro, 2018.
ASSOCIAÇÃO BRASILEIRA DE NORMAS TÉCNICAS. NBR 14724:2011 – Informação e documentação – Trabalhos acadêmicos – Apresentação. Rio de Janeiro, 2011.