A 2d zombie shooter where you are a hippo's game

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

No:41663

←

Prev Next

→

A 2d zombie shooter where you are a hippo
Developer User18657｜Date and time 24/2/8 22:54:56
Build time 17.607 sec｜Game capacity 4.026KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<HTML>
  <head>
    <style>
      canvas {
        border: 1px solid black;
        background-color: lightgray;
        display: block;
        margin-left: auto;
        margin-right: auto;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <script>
      const canvas = document.getElementById("gameCanvas");
      const ctx = canvas.getContext("2d");

// Game variables
      let gameRunning = false;
      let gameOver = false;
      let score = 0;

// Hippo position and size
      let hippo = {
        x: canvas.width / 2,
        y: canvas.height - 50,
        width: 50,
        height: 50,
      };

// Zombie positions and size
      let zombies = [
        { x: 100, y: 100, width: 40, height: 40 },
        { x: 400, y: 200, width: 40, height: 40 },
        { x: 600, y: 300, width: 40, height: 40 },
      ];

// Bullet variables
      let bullet = {
        x: 0,
        y: 0,
        width: 10,
        height: 20,
        speed: 5,
        active: false,
      };

// Event listeners for mobile controls
      canvas.addEventListener("touchstart", handleTouchStart, false);
      canvas.addEventListener("touchend", handleTouchEnd, false);

function startGame() {
        gameRunning = true;
        gameLoop();
      }

function endGame() {
        gameRunning = false;
        gameOver = true;
        alert("Game Over! Your score: " + score);
      }

function gameLoop() {
        if (!gameRunning) return;

ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the hippo
        drawHippo();

// Draw the zombies
        for (let i = 0; i < zombies.length; i++) {
          drawZombie(i);
          moveZombie(i);
          checkCollision(i);
        }

// Shoot the bullet
        if (bullet.active) {
          drawBullet();
          moveBullet();
        }

requestAnimationFrame(gameLoop);
      }

function handleTouchStart(event) {
        event.preventDefault();

if (!gameRunning && !gameOver) {
          startGame();
          return;
        }

if (!bullet.active) {
          let touchX = event.targetTouches[0].pageX - canvas.offsetLeft;
          let touchY = event.targetTouches[0].pageY - canvas.offsetTop;

bullet.active = true;
          bullet.x = touchX;
          bullet.y = touchY;
        }
      }

function handleTouchEnd(event) {
        event.preventDefault();
      }

function drawHippo() {
        ctx.fillStyle = "orange";
        ctx.fillRect(hippo.x, hippo.y, hippo.width, hippo.height);
      }

function drawZombie(index) {
        ctx.fillStyle = "green";
        ctx.fillRect(
          zombies[index].x,
          zombies[index].y,
          zombies[index].width,
          zombies[index].height
        );
      }

function drawBullet() {
        ctx.fillStyle = "red";
        ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
      }

function moveBullet() {
        bullet.y -= bullet.speed;

if (bullet.y < 0) {
          bullet.active = false;
        }
      }

function checkCollision(index) {
        if (
          bullet.x < zombies[index].x + zombies[index].width &&
          bullet.x + bullet.width > zombies[index].x &&
          bullet.y < zombies[index].y + zombies[index].height &&
          bullet.y + bullet.height > zombies[index].y
        ) {
          score++;
          zombies[index].y = -zombies[index].height;
          zombies[index].x = Math.random() * (canvas.width - zombies[index].width);

if (score >= 10) {
            endGame();
          }
        }
      }
    </script>
  </body>
</HTML>