Privacidade e Cookies
Sobre NĂłs
Fale Conosco
Pesquisar
Facebook Whatsapp Twitter Youtube Linkedin Instagram

đŸ§±A InvasĂŁo dos Coelhos RobĂŽs. A divertida construção passo a passo de um jogo para integrar em seu site!

🎼 Resumo do Jogo

TĂ­tulo: A InvasĂŁo dos Coelhos RobĂŽs
Tema: Coelhos robĂŽs invadindo um planeta desconhecido.
GĂȘnero: Arcade/Tiro espacial
Jogador: Controla uma nave que deve eliminar os coelhos robĂŽs e salvar o planeta.

Clique aqui para o efeito MATRIX

📁 Estrutura de Arquivos

Crie a seguinte estrutura de pastas dentro de nome_de_seu_site/jogos/invasao-coelhos-robos/:

plaintextCopiarEditarinvasao-coelhos-robos/
│
├── index.html
├── style.css
├── game.js
├── assets/
│   ├── images/
│   │   ├── nave.png
│   │   ├── coelho-robo.png
│   │   ├── background.jpg
│   │   ├── chefao.png
│   │   └── powerup.png
│   └── audio/
│       ├── tiro.mp3
│       ├── explosao.mp3
│       ├── musica.mp3
│       └── powerup.mp3

VocĂȘ pode usar imagens e sons gratuitos de sites como:

đŸ§± 1. Criação do HTML (index.html)

htmlCopiarEditar<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>A InvasĂŁo dos Coelhos RobĂŽs</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="tela-inicial">
    <h1>🚀 A Invasão dos Coelhos Robîs</h1>
    <button id="btn-jogar">Jogar</button>
  </div>

  <canvas id="gameCanvas" width="800" height="600"></canvas>

  <script src="game.js"></script>
</body>
</html>

🎹 2. Estilização com CSS (style.css)

cssCopiarEditarbody {
  margin: 0;
  padding: 0;
  background-color: #000;
  color: white;
  font-family: 'Segoe UI', sans-serif;
  text-align: center;
}

#gameCanvas {
  display: none;
  background-image: url("assets/images/background.jpg");
  background-size: cover;
  margin: 0 auto;
  border: 3px solid #00f;
  border-radius: 10px;
}

#tela-inicial {
  margin-top: 150px;
}

button {
  padding: 15px 30px;
  font-size: 20px;
  background-color: #222;
  color: #0f0;
  border: 2px solid #0f0;
  cursor: pointer;
  border-radius: 8px;
}

🧠 3. Lógica do Jogo (game.js)

Vamos começar com a lógica principal. (Resumo abaixo, posso expandir os blocos depois por partes como fases, chefÔes e power-ups.)

javascriptCopiarEditarconst canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
let nave, inimigos, tiros, pontuacao, vidas, chefao, powerUps;
let teclas = {};
let jogando = false;

// Sons
const somTiro = new Audio("assets/audio/tiro.mp3");
const somExplosao = new Audio("assets/audio/explosao.mp3");
const somMusica = new Audio("assets/audio/musica.mp3");
const somPowerUp = new Audio("assets/audio/powerup.mp3");

// Sprites
const imgNave = new Image();
imgNave.src = "assets/images/nave.png";

const imgCoelho = new Image();
imgCoelho.src = "assets/images/coelho-robo.png";

const imgChefao = new Image();
imgChefao.src = "assets/images/chefao.png";

const imgPowerUp = new Image();
imgPowerUp.src = "assets/images/powerup.png";

// Inicializa
document.getElementById("btn-jogar").onclick = () => {
  document.getElementById("tela-inicial").style.display = "none";
  canvas.style.display = "block";
  iniciarJogo();
};

function iniciarJogo() {
  nave = { x: 370, y: 500, w: 60, h: 60 };
  inimigos = [];
  tiros = [];
  powerUps = [];
  pontuacao = 0;
  vidas = 3;
  somMusica.loop = true;
  somMusica.volume = 0.5;
  somMusica.play();
  jogando = true;
  criarInimigos();
  loop();
}

// Input
document.addEventListener("keydown", (e) => teclas[e.key] = true);
document.addEventListener("keyup", (e) => teclas[e.key] = false);

// Game Loop
function loop() {
  if (!jogando) return;
  atualizar();
  desenhar();
  requestAnimationFrame(loop);
}

function atualizar() {
  if (teclas["ArrowLeft"]) nave.x -= 5;
  if (teclas["ArrowRight"]) nave.x += 5;
  if (teclas[" "]) atirar();

  // Movimento dos tiros
  tiros.forEach((t, i) => {
    t.y -= 10;
    if (t.y < 0) tiros.splice(i, 1);
  });

  // ColisĂŁo e movimento inimigos
  inimigos.forEach((ini, i) => {
    ini.y += 2;
    if (colidiu(ini, nave)) {
      vidas--;
      inimigos.splice(i, 1);
      if (vidas <= 0) fimDeJogo();
    }

    tiros.forEach((tiro, j) => {
      if (colidiu(tiro, ini)) {
        pontuacao += 10;
        somExplosao.play();
        inimigos.splice(i, 1);
        tiros.splice(j, 1);
      }
    });
  });

  // Power-ups
  powerUps.forEach((p, i) => {
    p.y += 2;
    if (colidiu(p, nave)) {
      vidas++;
      somPowerUp.play();
      powerUps.splice(i, 1);
    }
  });
}

function desenhar() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(imgNave, nave.x, nave.y, nave.w, nave.h);

  inimigos.forEach(i => ctx.drawImage(imgCoelho, i.x, i.y, 50, 50));
  tiros.forEach(t => {
    ctx.fillStyle = "red";
    ctx.fillRect(t.x, t.y, 4, 20);
  });

  powerUps.forEach(p => ctx.drawImage(imgPowerUp, p.x, p.y, 30, 30));

  ctx.fillStyle = "white";
  ctx.font = "20px Arial";
  ctx.fillText("Pontuação: " + pontuacao, 10, 20);
  ctx.fillText("Vidas: " + vidas, 700, 20);
}

function atirar() {
  if (!teclas["_ultimoTiro"] || Date.now() - teclas["_ultimoTiro"] > 400) {
    tiros.push({ x: nave.x + 28, y: nave.y });
    somTiro.play();
    teclas["_ultimoTiro"] = Date.now();
  }
}

function criarInimigos() {
  for (let i = 0; i < 5; i++) {
    inimigos.push({ x: Math.random() * 740, y: -Math.random() * 300 });
  }

  // Power-up aleatĂłrio
  setInterval(() => {
    powerUps.push({ x: Math.random() * 770, y: 0 });
  }, 15000);

  // ChefĂŁo
  setTimeout(() => {
    inimigos.push({ x: 350, y: -100, w: 100, h: 100, vida: 20, chefao: true });
  }, 30000);
}

function colidiu(a, b) {
  return a.x < b.x + b.w && a.x + (a.w || 50) > b.x && a.y < b.y + b.h && a.y + (a.h || 50) > b.y;
}

function fimDeJogo() {
  jogando = false;
  somMusica.pause();
  alert("Fim de Jogo! Pontuação: " + pontuacao);
  location.reload();
}

🚀 4. Publicação no seu site

📂 Upload dos arquivos

  1. Acesse o painel de controle do seu site (como cPanel ou FTP).
  2. Vå até o diretório: public_html/jogos/invasao-coelhos-robos/.
  3. Faça upload de todos os arquivos e pastas criadas.

🌐 Acessar o jogo:

VocĂȘ poderĂĄ acessar em:

rubyCopiarEditarhttps://nome_de_seu_site/jogos/invasao-coelhos-robos/

đŸ› ïž 5. PrĂłximas melhorias sugeridas

  • ✅ Fases com dificuldade crescente
  • ✅ ChefĂ”es com barras de vida
  • ✅ Mais power-ups (escudo, tiro duplo)
  • ✅ Ranking com pontuação
  • ✅ Mobile responsive
  • ✅ Tela de game over com botĂŁo “Recomeçar”
  1. Pixabay – Efeitos de laser
    Ótima seleção de sons de disparo, laser e blaster, com downloads em MP3/OGG livres de royalties mixkit.co+6pixabay.com+6uppbeat.io+6.
  2. Pixabay – Sons robóticos
    Centenas de sons de robĂŽs, servos, zumbidos tecnolĂłgicos — perfeito para coelhos e chefĂ”es mecĂąnicos forums.unrealengine.com.
  3. Mixkit – Free Sci‑Fi Sound Effects
    Efeitos sci‑fi de alta qualidade (alarme, zaps, portais), ideais para momentos especiais no jogo reddit.com+11mixkit.co+11mixkit.co+11uppbeat.io.
  4. Uppbeat – Sci‑Fi robot & laser
    Sons estilizados modernos, como quem dispara e robĂŽs em movimento reddit.com+6uppbeat.io+6uppbeat.io+6sonniss.com.
  5. ElevenLabs – Gerador de efeitos de laser/sci‑fi
    Permite customizar e gerar sons exclusivos de laser ou componentes robóticos — formato WAV/MP3, desde que atribua mixkit.co+3elevenlabs.io+3elevenlabs.io+3.
  6. ZapSplat – Biblioteca sci-fi completa
    Inclui robîs, lasers, efeitos de porta, alarmes, atmosfera espacial — muitos com licença gratuita zapsplat.com.

đŸ› ïž Como integrar no seu projeto

  1. Faça download dos efeitos e coloque-os em assets/audio/, por exemplo:
    • laser.mp3, robot-move.mp3, explosion.mp3
  2. No game.js, adicione referĂȘncias: jsCopiarEditarconst somLaser = new Audio("assets/audio/laser.mp3"); const somRobot = new Audio("assets/audio/robot-move.mp3"); const somExplosao = new Audio("assets/audio/explosion.mp3");
  3. Toque os sons nos momentos corretos: jsCopiarEditar// No disparo: somLaser.play(); // Quando um coelho robĂŽ aparece/anda: somRobot.play(); // Na explosĂŁo/inimigo eliminado: somExplosao.play();

✅ Resumo de fontes

FonteTipo de SFXLicença
PixabayLaser, robĂŽGratuito, livre para uso
MixkitSci‑fi, alarmeGratuito, uso comercial permitido
UppbeatSci‑fi robĂłticoGratuito, sem restriçÔes
ElevenLabsLaser/sci‑fi customGratuito (Ă© necessĂĄrio creditar)
ZapSplatAmbiente sci‑fiGratuito com conta básica

Aqui estĂŁo excelentes sugestĂ”es de sons gratuitos para completar seu jogo “A InvasĂŁo dos Coelhos RobĂŽs”:

🎧 Fontes de Efeitos Sonoros Sci‑Fi/Robóticos

Pixabay

Mixkit

Uppbeat

  • Efeitos de Sci‑Fi e lasers limpos, royalty‑free .

ZapSplat

SoundImage

  • RobĂŽ (passos/funçÔes) e ambiĂȘncia de chat espacial: “Robot Footstep”, “Cosmic Chatter” – gratuitos com atribuição soundimage.org.

ElevenLabs

🔧 Como integrar esses sons no jogo

  1. Download e organização:
    • Baixe e coloque em assets/audio/: arduinoCopiarEditarlaser.mp3 robot-move.mp3 robot-step.mp3 explosion.mp3 cosmic-chatter.mp3
  2. Importe no game.js: jsCopiarEditarconst somLaser = new Audio("assets/audio/laser.mp3"); const somMoverRobot = new Audio("assets/audio/robot-move.mp3"); const somPassoRobot = new Audio("assets/audio/robot-step.mp3"); const somExplosao = new Audio("assets/audio/explosion.mp3"); const somAmbiencia = new Audio("assets/audio/cosmic-chatter.mp3");
  3. Use no momento certo: jsCopiarEditar// Ao atirar: somLaser.play(); // Ao mover um coelho‑robĂŽ: somMoverRobot.play(); // Quando ele pisa: somPassoRobot.play(); // Ao explodir inimigo ou nave: somExplosao.play(); // Loop de ambiĂȘncia: somAmbiencia.loop = true; somAmbiencia.volume = 0.3; somAmbiencia.play();

đŸ—„ïž Resumo das fontes

FonteTipo de som
PixabayLasers, robîs, ambiente sci‑fi (ampla variedade)
MixkitEfeitos curtos específicos de sci‑fi
UppbeatLasers e efeitos eletrĂŽnicos limpos
ZapSplatBiblioteca completa sci‑fi
SoundImagePassos robĂłticos e ambiĂȘncia espacial com atribuição
ElevenLabsGeração custom de sons laser com atribuição

Este é somente um exemplo de jogo. Ele pode ser desenvolvido em qualquer linguagem de programação. Quer saber mais? Pergunte-me como:

PublicaçÔes mais recentes:

Visitas: 4
pĂĄgina inicial

---Sobre o autor---

foto perfil KGC

KleberCoelho DIGITAL

Kleber Coelho – Graduação em AnĂĄlise de Sistemas, PĂłs-graduado em GestĂŁo de TI e PĂłs-graduado em CiĂȘncia de Dados. Certificação ITIL Foundation V3.  Desenvolvedor Python e Piloto profissional de Drones. Entusiasta na ĂĄrea de Tecnologia e InteligĂȘncia Artificial.

  • Envie um ComentĂĄrio:

Aqui vocĂȘ encontrarĂĄ informaçÔes atualizadas sobre tecnologia e as Ășltimas novidades da ĂĄrea. Curiosidades, assuntos sobre drones e links relacionados Ă  ĂĄrea da computação. TambĂ©m minhas receitas de culinĂĄria, jogo de xadrez, ciĂȘncia, cubo mĂĄgico e muitos mais. Venha me acompanhar e embarque nessa aventura digital.

Categorias

Institucional

Contato

Facebook Whatsapp Twitter Youtube Linkedin Instagram

© 2023. Todos os  Direitos Reservados

Este blog utiliza cookies para garantir uma melhor experiĂȘncia. Se vocĂȘ continuar assumiremos que vocĂȘ estĂĄ satisfeito com ele.
PolĂ­ticas de Privacidade