A game in which 🥺 avoids falling 👺.'s game

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

No:165

340

←

Prev Next

→

A game in which 🥺 avoids falling 👺.
Developer User2745｜Date and time 23/6/1 15:00:11
Build time 125.605 sec｜Game capacity 3.919KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>👺🥺 Game</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-size: 3rem;
      text-align: center;
    }
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>
  <script>
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");

// Set canvas size to full screen
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

// Initialize game variables
    let playerX = canvas.width/2;
    const playerY = canvas.height - 100;
    let score = 0;
    let isGameOver = false;

// Load emoji images
    const playerImg = new Image();
    playerImg.src = "🥺.png";
    const enemyImg = new Image();
    enemyImg.src = "👺.png";

// Enemy class
    class Enemy {
      constructor(x, y) {
        this.x = x;
        this.y = y;
        this.speed = 7;
      }

update() {
        this.y += this.speed;
        if (this.y > canvas.height) {
          this.respawn();
          score += 1;
        }
        if (this.x === playerX && this.y >= playerY) {
          isGameOver = true;
        }
      }

respawn() {
        this.x = Math.random() * (canvas.width-64);
        this.y = Math.random() * -canvas.height;
      }

render() {
        ctx.drawImage(enemyImg, this.x, this.y, 64, 64);
      }
    }

// Player class
    class Player {
      update() {
        // Move player left and right with arrow keys or touch
        if (isKeyPressed("ArrowLeft") || isTouchingLeft()) {
          playerX -= 10;
        }
        if (isKeyPressed("ArrowRight") || isTouchingRight()) {
          playerX += 10;
        }
        // Keep player within canvas bounds
        if (playerX < 0) {
          playerX = 0;
        }
        if (playerX > canvas.width - 64) {
          playerX = canvas.width - 64;
        }
      }

render() {
        ctx.drawImage(playerImg, playerX, playerY, 64, 64);
      }
    }

// Keyboard input tracking
    const keysPressed = new Set();
    window.addEventListener("keydown", event => {
      keysPressed.add(event.key);
    });
    window.addEventListener("keyup", event => {
      keysPressed.delete(event.key);
    });
    function isKeyPressed(key) {
      return keysPressed.has(key);
    }

// Touch input tracking
    let touchX = null;
    window.addEventListener("touchstart", event => {
      touchX = event.touches[0].clientX;
    });
    window.addEventListener("touchend", event => {
      touchX = null;
    });
    function isTouchingLeft() {
      return touchX !== null && touchX < canvas.width/2;
    }
    function isTouchingRight() {
      return touchX !== null && touchX > canvas.width/2;
    }

// Game loop
    const player = new Player();
    const enemies = [new Enemy(Math.random() * (canvas.width-64), -128)];
    function gameLoop() {
      // Create new enemies at random intervals
      if (Math.random() < 0.02) {
        enemies.push(new Enemy(Math.random() * (canvas.width-64), -128));
      }
      // Update and render player and enemies
      player.update();
      if (!isGameOver) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        player.render();
        for (const enemy of enemies) {
          enemy.update();
          enemy.render();
        }
        // Update score display
        ctx.fillStyle = "white";
        ctx.fillText(`Score: ${score}`, 20, 50);
      }
      // Game over screen
      else {
        ctx.fillStyle = "black";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "red";
        ctx.fillText("GAME OVER", canvas.width/2, canvas.height/2);
        ctx.fillText(`Score: ${score}`, canvas.width/2, canvas.height/2 + 50);
      }
      requestAnimationFrame(gameLoop);
    }
    gameLoop();
  </script>
</body>
</html>