Reciprocating engine movement in canvas's game

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

No:6536

107

←

Prev Next

→

Reciprocating engine movement in canvas
Developer User3898｜Date and time 23/7/2 17:52:20
Build time 23.937 sec｜Game capacity 2.642KB｜

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>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    
    <script>
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");
        
        // レシプロエンジンの初期位置
        let x = canvas.width / 2;
        let y = canvas.height / 2;
        
        // レシプロエンジンの速度
        let dx = 0;
        let dy = 0;
        
        // キーの状態を保持するオブジェクト
        const keys = {};
        
        // 矢印キーが押されたらキーの状態を更新する
        document.addEventListener("keydown", function(event) {
            keys[event.key] = true;
        });
        
        document.addEventListener("keyup", function(event) {
            keys[event.key] = false;
        });
        
        // ゲームのメインループ
        function mainLoop() {
            // キーの状態に応じてレシプロエンジンの速度を更新する
            if (keys["ArrowLeft"]) {
                dx -= 1;
            }
            if (keys["ArrowRight"]) {
                dx += 1;
            }
            if (keys["ArrowUp"]) {
                dy -= 1;
            }
            if (keys["ArrowDown"]) {
                dy += 1;
            }
            
            // レシプロエンジンの位置を更新する
            x += dx;
            y += dy;
            
            // レシプロエンジンの位置を制限する
            if (x < 0) {
                x = 0;
            }
            if (x > canvas.width) {
                x = canvas.width;
            }
            if (y < 0) {
                y = 0;
            }
            if (y > canvas.height) {
                y = canvas.height;
            }
            
            // キャンバスをクリアする
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // レシプロエンジンを描画する
            ctx.fillStyle = "black";
            ctx.fillRect(x - 10, y - 10, 20, 20);
            
            requestAnimationFrame(mainLoop);
        }
        
        mainLoop();
    </script>
</body>
</html>
```