Afk pixel space invaders player moves and shoots random color enemy pixels's game

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

No:48507

←

Prev Next

→

Afk pixel space invaders player moves and shoots r..ALL
Developer User18896｜Date and time 24/3/2 11:59:41
Build time 6.889 sec｜Game capacity 1.876KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Pixel Space Invaders</title>
  <style>
    canvas {
      border: 1px solid black;
      background: #000;
    }
  </style>
</head>
<body>
  <canvas width="400" height="400"></canvas>
  
  <script>
    const canvas = document.querySelector("canvas");
    const ctx = canvas.getContext("2d");
    
    const player = {
      x: canvas.width / 2,
      y: canvas.height - 20,
      width: 10,
      height: 10,
      color: "white"
    };
    
    let enemies = [];
    
    function createEnemy() {
      let enemy = {
        x: Math.random() * canvas.width,
        y: 0,
        width: 10,
        height: 10,
        color: `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`
      };
      enemies.push(enemy);
    }
    
    function moveEnemies() {
      enemies.forEach(enemy => {
        enemy.y += 1;
        if (enemy.y > canvas.height) {
          enemies = enemies.filter(e => e !== enemy);
        }
      });
    }
    
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      // Draw player
      ctx.fillStyle = player.color;
      ctx.fillRect(player.x, player.y, player.width, player.height);
      
      // Draw enemies
      enemies.forEach(enemy => {
        ctx.fillStyle = enemy.color;
        ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
      });
    }
    
    function update() {
      moveEnemies();
      draw();
    }
    
    setInterval(() => {
      if (Math.random() > 0.9) {
        createEnemy();
      }
      update();
    }, 50);
    
    document.addEventListener("keydown", event => {
      if (event.key === "ArrowLeft" && player.x > 0) {
        player.x -= 10;
      }
      if (event.key === "ArrowRight" && player.x < canvas.width - player.width) {
        player.x += 10;
      }
    });
  </script>
</body>
</html>