AI game creator

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

No:32195

←

Prev Next

→

振り子観察
Developer うにょUser14145｜Date and time 23/12/30 14:59:51
Build time 16.952 sec｜Game capacity 2.943KB｜

Script

了解しました。以下に振り子観察のゲームを実装したサンプルコードを示します。

このコードでは、`<canvas>` タグを使用して振り子の動きを描画しています。振り子のパラメータを指定し、`drawPendulum` 関数で振り子の描画を行い、`updatePendulum` 関数で振り子の状態を更新しています。`gameLoop` 関数はアニメーションのループを行っており、`requestAnimationFrame` メソッドを使用してブラウザの描画更新ごとに `gameLoop` 関数を呼び出しています。このコードを実行すると、ブラウザ上に振り子が描画され、アニメーションが開始されます。振り子は左右に振動し続けます。スマートフォンやタブレットなどのタッチ操作が可能なデバイスで試してみてください。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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="canvas" width="400" height="400"></canvas>

// 振り子のパラメータ
            var pivotX = canvas.width / 2;
            var pivotY = 50;
            var rodLength = 200;
            var angle = 0;

// 振り子の描画
            function drawPendulum() {
                context.clearRect(0, 0, canvas.width, canvas.height);

// 背景の描画
                context.beginPath();
                context.moveTo(0, pivotY);
                context.lineTo(canvas.width, pivotY);
                context.stroke();

// 振り子の描画
                var ballX = pivotX + rodLength * Math.sin(angle);
                var ballY = pivotY + rodLength * Math.cos(angle);
                context.beginPath();
                context.arc(ballX, ballY, 20, 0, 2 * Math.PI);
                context.fill();

// 振り子の棒の描画
                context.beginPath();
                context.moveTo(pivotX, pivotY);
                context.lineTo(ballX, ballY);
                context.stroke();
            }

// 振り子の更新
            function updatePendulum() {
                angle += 0.05;
                angle %= Math.PI * 2; // 0〜2πの範囲に収める
            }

// アニメーションのループ
            function gameLoop() {
                updatePendulum();
                drawPendulum();
                requestAnimationFrame(gameLoop);
            }

// アニメーションの開始
            gameLoop();
        }

// ゲームの初期化
        initGame();
    </script>
</body>
</html>
```

このコードを実行すると、ブラウザ上に振り子が描画され、アニメーションが開始されます。振り子は左右に振動し続けます。スマートフォンやタブレットなどのタッチ操作が可能なデバイスで試してみてください。