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

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

No:5011

7450

🌍公転周期②🌍 太陽系の公転周期を表したゲームです。画面には、太陽,水星,金星,地球,火星,木..ALL
Developer もちきなこ｜Date and time 23/6/29 9:04:39
Build time 31.989 sec｜Game capacity 3.911KB｜

はい、了解しました。以下に示すコードは、指定された要件に基づいて太陽系の公転周期を表現した簡単なゲームです。スマホの画面をタップすると公転が一時停止し、もう一度タップすると再び公転が始まります。速度は比較的ゆっくりめに設定しています。このコードを1枚のHTMLファイルに実装していただければと思います。

このコードは、1枚のHTMLファイルに記述されており、JavaScriptのコードは`
`タグで囲まれています。canvas要素を使用して太陽系の惑星を表現し、タップイベントを使用して公転の一時停止と再開を制御しています。このコードを実行すると、画面上に太陽と惑星が表示され、惑星は太陽を中心に公転します。公転軌道も白線で描画され、タップすると公転が一時停止し、再度タップすると再開します。速度はゆっくりめに設定されているため、円滑な公転を楽しむことができます。

→ 　

3　

2　

[PR]現在の売れ筋グッズランキング

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

(C)2023 HisashiApp

はい、了解しました。以下に示すコードは、指定された要件に基づいて太陽系の公転周期を表現した簡単なゲームです。スマホの画面をタップすると公転が一時停止し、もう一度タップすると再び公転が始まります。速度は比較的ゆっくりめに設定しています。このコードを1枚のHTMLファイルに実装していただければと思います。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        canvas {
            background-color: #000;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas"></canvas>

<script>
        const canvas = document.getElementById("myCanvas");
        const context = canvas.getContext("2d");

const sunRadius = 20;
        const planetRadii = [4, 6, 8, 10, 12, 14, 16, 18];
        const planetColors = ["#975A16", "#8C6E93", "#4A8B41", "#1D3455", "#E0CF0B", "#9F7C60", "#EEA1B2", "#1A659E"];

let shouldRotate = true;

function drawSolarSystem() {
            context.clearRect(0, 0, canvas.width, canvas.height);

const centerX = canvas.width / 2;
            const centerY = canvas.height / 2;

// Draw the sun
            context.beginPath();
            context.arc(centerX, centerY, sunRadius, 0, 2 * Math.PI);
            context.fillStyle = "#ECA700";
            context.fill();
            context.closePath();

// Draw the planets
            const numPlanets = planetRadii.length;
            const revolutionSpeeds = Array.from({ length: numPlanets }, (_, i) => (i + 1) / 10000);

for (let i = 0; i < numPlanets; i++) {
                const planetRadius = planetRadii[i];
                const revolutionSpeed = revolutionSpeeds[i];
                const angle = (Date.now() * revolutionSpeed) % (2 * Math.PI);

const planetX = centerX + (sunRadius + 50) * Math.cos(angle);
                const planetY = centerY + (sunRadius + 50) * Math.sin(angle);

// Draw the planet's orbit
                context.beginPath();
                context.arc(centerX, centerY, sunRadius + 50, 0, 2 * Math.PI);
                context.strokeStyle = "white";
                context.setLineDash([5, 5]);
                context.stroke();
                context.closePath();

// Draw the planet
                context.beginPath();
                context.arc(planetX, planetY, planetRadius, 0, 2 * Math.PI);
                context.fillStyle = planetColors[i];
                context.fill();
                context.closePath();
            }

if (shouldRotate) {
                requestAnimationFrame(drawSolarSystem);
            }
        }

canvas.addEventListener("click", function() {
            shouldRotate = !shouldRotate;
            if (shouldRotate) {
                drawSolarSystem();
            }
        });

canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        drawSolarSystem();

window.addEventListener("resize", function() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });
    </script>
</body>
</html>
```

このコードは、1枚のHTMLファイルに記述されており、JavaScriptのコードは`<script>`タグで囲まれています。canvas要素を使用して太陽系の惑星を表現し、タップイベントを使用して公転の一時停止と再開を制御しています。

このコードを実行すると、画面上に太陽と惑星が表示され、惑星は太陽を中心に公転します。公転軌道も白線で描画され、タップすると公転が一時停止し、再度タップすると再開します。速度はゆっくりめに設定されているため、円滑な公転を楽しむことができます。