🌌公転周期🌌 太陽系の公転周期を表したゲームです。画面には、太陽,水星,金星,地球,火星,木星,土星,天王星,海王星が表示されています。全ての星は、JavaScriptのcanvasによって線画されています。太陽以外の星は、太陽を中心に公転しています。各星の速度を考慮しながら、太陽系の公転周期をJavaScriptのcanvasによって描写してください。なお、全ての星が画面内に収まるようにするため、星間の距離は考慮しないものとします。また、公転軌道も白で線画して下さい。's game

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

No:5009

7601

←

Prev Next

→

🌌公転周期🌌 太陽系の公転周期を表したゲームです。画面には、太陽,水星,金星,地球,火星,木星..ALL
Developer anonymous｜Date and time 70/1/1 9:50:16
Build time unknown sec｜Game capacity 3.016KB｜

Script

了解です。以下に示すのは、太陽系の公転周期を表した簡易的なゲームです。

このプログラムは、canvas要素を使用して太陽系の公転周期を描写しています。各星の速度と距離を設定し、それに基づいて星の位置を計算して描画しています。各星の位置は時間によって変化し、公転軌道も白い線で描かれます。

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

了解です。以下に示すのは、太陽系の公転周期を表した簡易的なゲームです。

```html
<!DOCTYPE html>
<html>
<head>
    <title>公転周期</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="800" height="800"></canvas>
    <script>
        const canvas = document.getElementById("myCanvas");
        const context = canvas.getContext("2d");
        
        const sun = { x: canvas.width / 2, y: canvas.height / 2, radius: 50 };
        const planets = [
            { name: "水星", radius: 10, distance: 100, speed: 0.02, color: "#FFC0CB" },
            { name: "金星", radius: 15, distance: 150, speed: 0.015, color: "#FFD700" },
            { name: "地球", radius: 20, distance: 200, speed: 0.01, color: "#6495ED" },
            { name: "火星", radius: 12, distance: 250, speed: 0.0075, color: "#FF4500" },
            { name: "木星", radius: 30, distance: 300, speed: 0.005, color: "#FF6347" },
            { name: "土星", radius: 27, distance: 350, speed: 0.003, color: "#D2B48C" },
            { name: "天王星", radius: 25, distance: 400, speed: 0.0025, color: "#ADD8E6" },
            { name: "海王星", radius: 23, distance: 450, speed: 0.002, color: "#000080" }
        ];
        
        function drawPlanet(planet) {
            const radius = planet.distance + planet.radius;
            const angle = Date.now() * planet.speed;
            const x = sun.x + radius * Math.cos(angle);
            const y = sun.y + radius * Math.sin(angle);
            
            context.beginPath();
            context.arc(x, y, planet.radius, 0, Math.PI * 2, false);
            context.fillStyle = planet.color;
            context.fill();
            context.closePath();
            
            context.beginPath();
            context.moveTo(sun.x, sun.y);
            context.lineTo(x, y);
            context.strokeStyle = "white";
            context.stroke();
            context.closePath();
            
            context.font = "12px Arial";
            context.fillStyle = "white";
            context.fillText(planet.name, x + planet.radius + 5, y);
        }
        
        function draw() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            context.beginPath();
            context.arc(sun.x, sun.y, sun.radius, 0, Math.PI * 2, false);
            context.fillStyle = "yellow";
            context.fill();
            context.closePath();
            
            planets.forEach(drawPlanet);
            
            requestAnimationFrame(draw);
        }
        
        draw();
    </script>
</body>
</html>
```