太陽系シミュレーター's game

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

No:40918

←

Prev Next

→

太陽系シミュレーター
Developer User18209｜Date and time 24/2/4 15:48:02
Build time 8.32 sec｜Game capacity 2.246KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>太陽系シミュレーター</title>
</head>
<body>
    <canvas id="canvas" width="800" height="800"></canvas>

const planets = [
            {
                x: canvas.width / 2 - 150,
                y: canvas.height / 2,
                radius: 10,
                color: 'blue',
                speed: 0.02,
                angle: 0
            },
            {
                x: canvas.width / 2 + 150,
                y: canvas.height / 2,
                radius: 15,
                color: 'red',
                speed: 0.01,
                angle: 0
            },
            {
                x: canvas.width / 2,
                y: canvas.height / 2 - 150,
                radius: 20,
                color: 'green',
                speed: 0.03,
                angle: 0
            }
        ];

function draw() {
            // 背景を描画
            ctx.fillStyle = 'black';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

// 太陽を描画
            ctx.beginPath();
            ctx.arc(sun.x, sun.y, sun.radius, 0, Math.PI * 2);
            ctx.fillStyle = sun.color;
            ctx.fill();

// 惑星を描画
            planets.forEach(planet => {
                ctx.beginPath();
                ctx.arc(planet.x, planet.y, planet.radius, 0, Math.PI * 2);
                ctx.fillStyle = planet.color;
                ctx.fill();

// 惑星を回転させる
                planet.angle += planet.speed;

// 惑星の位置を更新
                planet.x = sun.x + Math.cos(planet.angle) * 150;
                planet.y = sun.y + Math.sin(planet.angle) * 150;
            });

// アニメーションフレームをリクエスト
            requestAnimationFrame(draw);
        }

// 初回の描画を実行
        draw();
    </script>
</body>
</html>