Space game that you make planets but fun plus stars and planet can collect gas's game

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

No:8079

1348

←

Prev Next

→

Space game that you make planets but fun plus star..ALL
Developer User4131｜Date and time 23/7/12 21:21:51
Build time 20.895 sec｜Game capacity 3.64KB｜

Script

Sure! Here's a simple space-themed game that you can play by creating, collecting gas, and having fun with planets and stars. Since it's a program, you can copy and run it in a single HTML file enclosed in script tags. Let's get started:

To play the game, simply copy the above code into an HTML file, save it with a `.html` extension, and open it in a web browser (preferably on a smartphone for optimal viewing). You'll see a canvas element representing the game area. Tap or click on the planets to collect gas and increase your score. The gas count on each planet will be displayed, along with the overall score. The game loop continuously redraws the canvas to update the positions of planets, stars, and the score. The gas count is incremented whenever you click on a planet. The game also includes two stars, represented by yellow circles, for visual variety. Feel free to customize the game further by adding more planets, stars, or implementing additional features.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// Planet object
    class Planet {
      constructor(x, y, radius, color) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.color = color;
        this.gas = 0;
      }

draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.fill();
        ctx.closePath();
      }
    }

// Star object
    class Star {
      constructor(x, y) {
        this.x = x;
        this.y = y;
      }

draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, 3, 0, Math.PI * 2);
        ctx.fillStyle = "yellow";
        ctx.fill();
        ctx.closePath();
      }
    }

// Create initial planets and stars
    planets.push(new Planet(200, 200, 30, "red"));
    stars.push(new Star(100, 100));
    stars.push(new Star(300, 300));

// Event listener for mouse click
    canvas.addEventListener("click", function(event) {
      const rect = canvas.getBoundingClientRect();
      const clickX = event.clientX - rect.left;
      const clickY = event.clientY - rect.top;

// Check if the click is inside a planet
      for (let i = 0; i < planets.length; i++) {
        const planet = planets[i];
        const dx = clickX - planet.x;
        const dy = clickY - planet.y;

if (Math.sqrt(dx * dx + dy * dy) <= planet.radius) {
          planet.gas += 1; // Collect gas
          score += 1; // Increase score
          break;
        }
      }
    });

// Game loop
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw stars
      for (let i = 0; i < stars.length; i++) {
        stars[i].draw();
      }

// Draw planets
      for (let i = 0; i < planets.length; i++) {
        planets[i].draw();

// Display gas count on planets
        ctx.font = "20px Arial";
        ctx.fillStyle = "white";
        ctx.fillText(`Gas: ${planets[i].gas}`, planets[i].x - 20, planets[i].y + 10);
      }

// Display score
      ctx.font = "30px Arial";
      ctx.fillStyle = "white";
      ctx.fillText(`Score: ${score}`, 10, 30);

requestAnimationFrame(draw); // Call draw function recursively
    }

draw(); // Start the game loop
  </script>
</body>
</html>
```

The game loop continuously redraws the canvas to update the positions of planets, stars, and the score. The gas count is incremented whenever you click on a planet. The game also includes two stars, represented by yellow circles, for visual variety.

Feel free to customize the game further by adding more planets, stars, or implementing additional features.