AI game creator

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

No:50717

←

Prev Next

→

Shooting Game
Developer User21391｜Date and time 24/3/9 12:55:16
Build time 10.126 sec｜Game capacity 2.613KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Shooting Game</title>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <script>
    // Game variables
    let canvas = document.getElementById("gameCanvas");
    let ctx = canvas.getContext("2d");
    let player = {x: 200, y: 350, width: 50, height: 50};
    let bullets = [];
    let enemies = [];
    let score = 0;

// Event listener for player movement
    canvas.addEventListener("mousemove", function(event) {
      player.x = event.clientX - canvas.getBoundingClientRect().left - player.width/2;
    });

// Event listener for shooting
    canvas.addEventListener("click", function() {
      bullets.push({x: player.x + player.width/2, y: player.y, width: 5, height: 10});
    });

// Game loop
    function update() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      // Draw player
      ctx.fillStyle = "blue";
      ctx.fillRect(player.x, player.y, player.width, player.height);
      
      // Draw bullets
      ctx.fillStyle = "red";
      bullets.forEach(function(bullet) {
        bullet.y -= 5;
        ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
      });
      
      // Draw enemies
      ctx.fillStyle = "green";
      enemies.forEach(function(enemy) {
        enemy.y += 2;
        ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
        
        // Check for collision between bullet and enemy
        bullets.forEach(function(bullet, index) {
          if (bullet.x < enemy.x + enemy.width &&
              bullet.x + bullet.width > enemy.x &&
              bullet.y < enemy.y + enemy.height &&
              bullet.y + bullet.height > enemy.y) {
            bullets.splice(index, 1);
            enemies.splice(enemies.indexOf(enemy), 1);
            score++;
          }
        });
        
        // Check for collision between player and enemy
        if (player.x < enemy.x + enemy.width &&
            player.x + player.width > enemy.x &&
            player.y < enemy.y + enemy.height &&
            player.y + player.height > enemy.y) {
          alert("Game Over. Your score: " + score);
          document.location.reload();
        }
      });
      
      // Spawn new enemies
      if (Math.random() < 0.02) {
        enemies.push({x: Math.random() * (canvas.width - 20), y: 0, width: 20, height: 20});
      }
      
      // Display score
      ctx.fillStyle = "black";
      ctx.font = "20px Arial";
      ctx.fillText("Score: " + score, 10, 30);
      
      requestAnimationFrame(update);
    }
    
    update();
  </script>
</body>
</html>