AI game creator

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

No:50038

←

Prev Next

→

Asteroid destroyer
Developer User21218｜Date and time 24/3/7 14:21:27
Build time 8.858 sec｜Game capacity 2.406KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Asteroid Destroyer</title>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <script>
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");

let player = {
      x: 200,
      y: 350,
      size: 20,
      color: "blue"
    };

let asteroids = [];
    let score = 0;

function drawPlayer() {
      ctx.fillStyle = player.color;
      ctx.fillRect(player.x, player.y, player.size, player.size);
    }

function drawAsteroids() {
      for (let i = 0; i < asteroids.length; i++) {
        ctx.fillStyle = "red";
        ctx.fillRect(asteroids[i].x, asteroids[i].y, asteroids[i].size, asteroids[i].size);
      }
    }

function createAsteroid() {
      const newAsteroid = {
        x: Math.random() * 380,
        y: 0,
        size: Math.random() * 20 + 10
      };
      asteroids.push(newAsteroid);
    }

function drawScore() {
      ctx.fillStyle = "black";
      ctx.font = "20px Arial";
      ctx.fillText("Score: " + score, 10, 25);
    }

function updateGame() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

drawPlayer();
      drawAsteroids();
      moveAsteroids();
      checkCollision();
      drawScore();

if (score < 0) {
        alert("Game Over! Final Score: " + score);
        clearInterval(interval);
      }
    }

const interval = setInterval(function() {
      createAsteroid();
      updateGame();
    }, 1000);

</script>
</body>
</html>