Exsaple of owe sola system moving in real time's game

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

No:49024

114

←

Prev Next

→

Exsaple of owe sola system moving in real time
Developer User18896｜Date and time 24/3/3 13:53:49
Build time 5.944 sec｜Game capacity 2.06KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

```
<!DOCTYPE html>
<html>
<head>
    <title>Solar System Simulation</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="solarSystemCanvas"></canvas>

const sun = {
            x: 250,
            y: 250,
            radius: 30,
            color: 'yellow'
        };

const planets = [
            { x: 0, y: 0, radius: 10, color: 'blue', speed: 1.2 },
            { x: 0, y: 0, radius: 15, color: 'red', speed: 0.8 },
            { x: 0, y: 0, radius: 20, color: 'green', speed: 0.5 },
            { x: 0, y: 0, radius: 25, color: 'orange', speed: 0.3 }
        ];

function drawSun() {
            ctx.beginPath();
            ctx.arc(sun.x, sun.y, sun.radius, 0, Math.PI * 2);
            ctx.fillStyle = sun.color;
            ctx.fill();
        }

function drawPlanets() {
            planets.forEach(planet => {
                ctx.beginPath();
                ctx.arc(planet.x, planet.y, planet.radius, 0, Math.PI * 2);
                ctx.fillStyle = planet.color;
                ctx.fill();
            });
        }

function updatePlanetsPosition() {
            planets.forEach((planet, index) => {
                const distanceFromSun = 50 * (index + 1);
                const angle = planet.speed * Date.now() / 1000;
                planet.x = sun.x + distanceFromSun * Math.cos(angle);
                planet.y = sun.y + distanceFromSun * Math.sin(angle);
            });
        }

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

function draw() {
            clearCanvas();
            drawSun();
            drawPlanets();
            updatePlanetsPosition();
            requestAnimationFrame(draw);
        }

canvas.width = 500;
        canvas.height = 500;
        
        draw();
    </script>
</body>
</html>
```