Potential energy and kinetic energy's game

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

No:4980

188

←

Prev Next

→

Potential energy and kinetic energy
Developer User3796｜Date and time 23/6/29 4:17:52
Build time 25.092 sec｜Game capacity 2.698KB｜

Script

了解です。位置エネルギーと運動エネルギーを含んだゲームを作成します。以下に例を示します。

この例では、ブロックが画面上で自由に動き、スワイプ操作に応じて速度が変化します。ブロックは位置エネルギーと運動エネルギーの相互作用を示しています。ブロックが画面下部に到達すると、位置エネルギーが最大になり、スワイプ操作によって再び運動エネルギーに変換されます。

←

Prev　Next

→ 　

Back　

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

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

了解です。位置エネルギーと運動エネルギーを含んだゲームを作成します。以下に例を示します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>位置エネルギーと運動エネルギーのゲーム</title>
    <style>
        #gameArea {
            width: 300px;
            height: 300px;
            background-color: lightblue;
            position: relative;
        }
        
        #block {
            width: 50px;
            height: 50px;
            background-color: orange;
            position: absolute;
            top: 250px;
            left: 50px;
        }
    </style>
</head>
<body>
    <div id="gameArea">
        <div id="block"></div>
    </div>

// 初期位置と速度
        let position = 250;
        let velocity = 0;
        
        // 開始時の時間
        let startTime = performance.now();

// ゲームループ
        function gameLoop(timestamp) {
            // 経過時間と重力の影響を考慮して位置を更新
            const elapsedTime = timestamp - startTime;
            position += velocity * elapsedTime / 1000 + 0.5 * 9.8 * (elapsedTime / 1000) ** 2;

// 衝突判定
            if (position > 250) {
                position = 250;
                velocity = 0;
            }

// 位置を更新する
            block.style.top = position + "px";

// 再度ゲームループを呼び出す
            requestAnimationFrame(gameLoop);
        }

// スマホ操作
        gameArea.addEventListener("touchstart", function (event) {
            // スワイプの開始位置を保存
            startY = event.touches[0].clientY;
        });

gameArea.addEventListener("touchend", function (event) {
            // スワイプ後の位置からスワイプの長さを計算し、それを速度に反映
            const endY = event.changedTouches[0].clientY;
            velocity = -0.8 * (endY - startY);
        });

// ゲームを開始
        requestAnimationFrame(gameLoop);
    </script>
</body>
</html>
```