Animals vs wolf and lions Animals exemples cat dr.'s game

Click here for free DL of the app version that can save data.

No:27483

←

Prev Next

→

Animals vs wolf and lions Animals exemples cat dr.
Developer User13661｜Date and time 23/12/7 5:03:06
Build time 41.647 sec｜Game capacity 3.76KB｜

Script

Neste exemplo, criamos um jogo simples onde o jogador controla três animais (gato, cachorro e leão) com pictogramas representando-os. O objetivo é evitar que o lobo, representado por um quadrado cinza, pegue algum dos animais. Os animais e o lobo se movem em direções diferentes a cada atualização do jogo. Para verificar colisões, comparamos as coordenadas dos animais e do lobo. Se houver uma sobreposição, o jogador perde o jogo e é exibido um alerta. O jogo é reiniciado chamando a função `resetGame()` após uma colisão. O loop principal do jogo é iniciado chamando a função `gameLoop()`, que desenha os elementos no canvas, atualiza suas posições, verifica as colisões e chama novamente o loop principal usando `requestAnimationFrame()`.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
  <head>
    <title>Animais vs Lobo e Leões</title>
  </head>
  <body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
      // Obtendo o elemento do canvas
      const canvas = document.getElementById("gameCanvas");
      const ctx = canvas.getContext("2d");

// Definindo o tamanho dos pictogramas dos animais
      const animalSize = 50;

// Definindo os pictogramas dos animais
      const catImg = new Image();
      catImg.src = "cat.png";

const dogImg = new Image();
      dogImg.src = "dog.png";

const lionImg = new Image();
      lionImg.src = "lion.png";

// Definindo as posições iniciais dos animais e do lobo
      let catX = 50;
      let catY = 200;

let dogX = 150;
      let dogY = 300;

let lionX = 250;
      let lionY = 100;

let wolfX = 350;
      let wolfY = 200;

// Função para desenhar os animais e o lobo no canvas
      function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.drawImage(catImg, catX, catY, animalSize, animalSize);
        ctx.drawImage(dogImg, dogX, dogY, animalSize, animalSize);
        ctx.drawImage(lionImg, lionX, lionY, animalSize, animalSize);

ctx.fillStyle = "gray";
        ctx.fillRect(wolfX, wolfY, animalSize, animalSize);
      }

// Função para atualizar as posições dos animais e do lobo
      function update() {
        catY += 1;
        dogX += 2;
        dogY -= 1;
        lionX -= 1;
        lionY += 2;
      }

// Função para verificar colisões entre os animais e o lobo
      function checkCollisions() {
        if (
          catX < wolfX + animalSize &&
          catX + animalSize > wolfX &&
          catY < wolfY + animalSize &&
          catY + animalSize > wolfY
        ) {
          alert("Você perdeu! O lobo pegou o gato.");
          resetGame();
        }

if (
          dogX < wolfX + animalSize &&
          dogX + animalSize > wolfX &&
          dogY < wolfY + animalSize &&
          dogY + animalSize > wolfY
        ) {
          alert("Você perdeu! O lobo pegou o cachorro.");
          resetGame();
        }

if (
          lionX < wolfX + animalSize &&
          lionX + animalSize > wolfX &&
          lionY < wolfY + animalSize &&
          lionY + animalSize > wolfY
        ) {
          alert("Você perdeu! O lobo pegou o leão.");
          resetGame();
        }
      }

// Função para reiniciar as posições dos animais e do lobo
      function resetGame() {
        catX = 50;
        catY = 200;

dogX = 150;
        dogY = 300;

lionX = 250;
        lionY = 100;

wolfX = 350;
        wolfY = 200;
      }

// Função principal do jogo
      function gameLoop() {
        draw();
        update();
        checkCollisions();
        requestAnimationFrame(gameLoop);
      }

// Iniciando o jogo
      gameLoop();
    </script>
  </body>
</html>
```

Os animais e o lobo se movem em direções diferentes a cada atualização do jogo. Para verificar colisões, comparamos as coordenadas dos animais e do lobo. Se houver uma sobreposição, o jogador perde o jogo e é exibido um alerta.

O jogo é reiniciado chamando a função `resetGame()` após uma colisão. O loop principal do jogo é iniciado chamando a função `gameLoop()`, que desenha os elementos no canvas, atualiza suas posições, verifica as colisões e chama novamente o loop principal usando `requestAnimationFrame()`.