AI game creator

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

No:42370

136

←

Prev Next

→

Grow planet
Developer User18785｜Date and time 24/2/11 15:02:57
Build time 7.963 sec｜Game capacity 2.232KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Grow Planet Game</title>
</head>
<body>
  <canvas id="gameCanvas" width="500" height="500"></canvas>

const planetSize = 100;
    const maxPlanetSize = 300;
    const growingSpeed = 2;
    const scoreIncrement = 10;
    const gameOverSize = 200;

let planet = {
      x: canvas.width / 2 - planetSize / 2,
      y: canvas.height / 2 - planetSize / 2,
      size: planetSize
    };

let score = 0;

function drawPlanet() {
      ctx.beginPath();
      ctx.arc(planet.x, planet.y, planet.size, 0, Math.PI * 2);
      ctx.fillStyle = "#00bfff";
      ctx.fill();
      ctx.closePath();
    }

function drawScore() {
      ctx.font = "20px Arial";
      ctx.fillStyle = "#000";
      ctx.fillText("Score: " + score, 20, 30);
    }

function increasePlanetSize() {
      planet.size += growingSpeed;
    }

function gameOver() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.font = "40px Arial";
      ctx.textAlign = "center";
      ctx.fillStyle = "#f00";
      ctx.fillText("Game Over!", canvas.width / 2, canvas.height / 2 - 50);
      ctx.font = "30px Arial";
      ctx.fillStyle = "#000";
      ctx.fillText("Final Score: " + score, canvas.width / 2, canvas.height / 2);
    }

function mouseClickHandler(event) {
      const rect = canvas.getBoundingClientRect();
      const clickX = event.clientX - rect.left;
      const clickY = event.clientY - rect.top;

if (
        clickX >= planet.x &&
        clickX <= planet.x + planet.size &&
        clickY >= planet.y &&
        clickY <= planet.y + planet.size
      ) {
        score += scoreIncrement;
        increasePlanetSize();
      }
    }

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

drawPlanet();
      drawScore();

if (planet.size >= maxPlanetSize) {
        gameOver();
        return;
      }

requestAnimationFrame(gameLoop);
    }

function startGame() {
      canvas.addEventListener("click", mouseClickHandler);
      gameLoop();
    }

startGame();

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