AI game creator

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

No:15582

117

←

Prev Next

→

Solar system 3d
Developer User6688｜Date and time 23/9/10 2:11:36
Build time 36.296 sec｜Game capacity 3.462KB｜

Script

Sure, here's an example of a simple Solar System 3D game implemented as a single HTML file using JavaScript and enclosed in script tags:

This HTML file creates a canvas element and uses JavaScript to render the Sun, Earth, Mars, Venus, and a Moon around the Earth in a simple 3D representation of the Solar System. The objects' positions are updated using their respective speeds and angles. The `drawSolarSystem()` function is responsible for rendering the objects on the canvas, and the `animate()` function continuously updates and redraws the scene using the `requestAnimationFrame()` method. Please note that this is a simplified example for demonstration purposes, and it can be further improved and enhanced according to your specific requirements.

←

Prev　Next

→ 　

Back　

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

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

Sure, here's an example of a simple Solar System 3D game implemented as a single HTML file using JavaScript and enclosed in script tags:

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Solar System 3D Game</title>
  <style>
    #canvas {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>

// Define the solar system objects
    const sun = { size: 50, color: 'yellow', x: 300, y: 200 };
    const earth = { size: 30, color: 'blue', distance: 150, speed: 0.02, angle: 0 };
    const mars = { size: 25, color: 'red', distance: 250, speed: 0.008, angle: 0 };
    const venus = { size: 20, color: 'orange', distance: 100, speed: 0.03, angle: 0 };
    const moon = { size: 10, color: 'gray', distance: 40, speed: 0.05, angle: 0 };

function drawSolarSystem() {
      // Clear the canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the sun
      ctx.beginPath();
      ctx.arc(sun.x, sun.y, sun.size, 0, Math.PI * 2);
      ctx.fillStyle = sun.color;
      ctx.fill();
      ctx.closePath();

// Draw the Earth
      ctx.beginPath();
      const earthX = sun.x + Math.cos(earth.angle) * earth.distance;
      const earthY = sun.y + Math.sin(earth.angle) * earth.distance;
      ctx.arc(earthX, earthY, earth.size, 0, Math.PI * 2);
      ctx.fillStyle = earth.color;
      ctx.fill();
      ctx.closePath();

// Draw Mars
      ctx.beginPath();
      const marsX = sun.x + Math.cos(mars.angle) * mars.distance;
      const marsY = sun.y + Math.sin(mars.angle) * mars.distance;
      ctx.arc(marsX, marsY, mars.size, 0, Math.PI * 2);
      ctx.fillStyle = mars.color;
      ctx.fill();
      ctx.closePath();

// Draw Venus
      ctx.beginPath();
      const venusX = sun.x + Math.cos(venus.angle) * venus.distance;
      const venusY = sun.y + Math.sin(venus.angle) * venus.distance;
      ctx.arc(venusX, venusY, venus.size, 0, Math.PI * 2);
      ctx.fillStyle = venus.color;
      ctx.fill();
      ctx.closePath();

// Draw the Moon orbiting Earth
      const moonX = earthX + Math.cos(moon.angle) * moon.distance;
      const moonY = earthY + Math.sin(moon.angle) * moon.distance;

ctx.beginPath();
      ctx.arc(moonX, moonY, moon.size, 0, Math.PI * 2);
      ctx.fillStyle = moon.color;
      ctx.fill();
      ctx.closePath();

// Update the angles
      earth.angle += earth.speed;
      mars.angle += mars.speed;
      venus.angle += venus.speed;
      moon.angle += moon.speed;
    }

function animate() {
      drawSolarSystem();
      requestAnimationFrame(animate);
    }

animate();
  </script>
</body>
</html>
```

Please note that this is a simplified example for demonstration purposes, and it can be further improved and enhanced according to your specific requirements.