AI game creator

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

No:7156

1105

←

Prev Next

→

physics of physics
Developer User3788｜Date and time 23/7/5 21:36:35
Build time 16.529 sec｜Game capacity 2.392KB｜

Script

了解です。以下に、物理の物理をテーマにしたシンプルなゲームの実装例を示します。このゲームでは、物理的な挙動を再現したボールが画面上を動き回るようになっています。

このゲームは、画面上に表示される赤いボールが壁で跳ね返りながら移動するものです。ボールの初期位置や速度は、「ボールの初期位置と速度を設定」部分で自由に変更できます。また、ボールの挙動を変更するために、速度の反転処理などを追加することも可能です。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>物理の物理</title>
    <meta charset="UTF-8">
    <style>
        #game {
            position: relative;
            width: 400px;
            height: 400px;
            border: 1px solid black;
            background-color: lightgray;
        }
        #ball {
            position: absolute;
            top: 180px;
            left: 180px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="game">
        <div id="ball"></div>
    </div>
    <script>
        // ボールの初期位置と速度を設定
        let ballX = 180;
        let ballY = 180;
        let ballVX = 2;
        let ballVY = 2;

// ゲームループを開始する関数
        function startGame() {
            setInterval(moveBall, 16);
        }

// ボールを移動させる関数
        function moveBall() {
            const gameDiv = document.getElementById("game");
            const ballDiv = document.getElementById("ball");

// ボールの位置を更新
            ballX += ballVX;
            ballY += ballVY;

// ボールの速度の反転処理（壁で跳ね返る挙動）
            if (ballX <= 0 || ballX >= gameDiv.clientWidth - ballDiv.clientWidth) {
                ballVX *= -1;
            }
            if (ballY <= 0 || ballY >= gameDiv.clientHeight - ballDiv.clientHeight) {
                ballVY *= -1;
            }

// ボールの位置を反映
            ballDiv.style.left = ballX + "px";
            ballDiv.style.top = ballY + "px";
        }

// ゲームの開始
        startGame();
    </script>
</body>
</html>
```