A game like Gun Parade March's game

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

No:6326

2514

←

Prev Next

→

A game like Gun Parade March
Developer User3881｜Date and time 23/7/2 2:37:31
Build time 29.06 sec｜Game capacity 2.525KB｜

Script

了解しました。以下は、JavaScriptを用いて作成した「ガンパレード・マーチ」風の簡易的なゲームの例です。

上記のコードは、キーボードの左右キーでプレイヤーを動かすことができる簡易的なゲームです。キャンバス要素を使用してプレイヤーを描画し、キーボードの状態に応じてプレイヤーの位置を更新します。ゲームループ内で再帰的に`requestAnimationFrame`を呼び出すことで、ゲームの処理を継続的に実行しています。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下は、JavaScriptを用いて作成した「ガンパレード・マーチ」風の簡易的なゲームの例です。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ガンパレード・マーチ</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>
    <script>
        // キャンバス要素を取得
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");
        
        // プレイヤーの初期位置
        let playerX = canvas.width / 2;
        const playerY = canvas.height - 50;
        const playerWidth = 50;
        const playerHeight = 50;
        
        // キー入力の状態を保持する変数
        const keyState = {};
        document.addEventListener("keydown", handleKeyDown);
        document.addEventListener("keyup", handleKeyUp);
        
        function handleKeyDown(e) {
            keyState[e.code] = true;
        }
        
        function handleKeyUp(e) {
            keyState[e.code] = false;
        }
        
        // プレイヤーを描画する関数
        function drawPlayer() {
            ctx.fillStyle = "red";
            ctx.fillRect(playerX, playerY, playerWidth, playerHeight);
        }
        
        // メインのゲームループ
        function gameLoop() {
            // キーの状態に応じてプレイヤーの位置を更新
            if (keyState["ArrowLeft"] && playerX > 0) {
                playerX -= 5;
            }
            if (keyState["ArrowRight"] && playerX + playerWidth < canvas.width) {
                playerX += 5;
            }
            
            // キャンバスをクリア
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // プレイヤーを描画
            drawPlayer();
            
            // ループを再帰的に呼び出し
            requestAnimationFrame(gameLoop);
        }
        
        // ゲームループを開始
        gameLoop();
    </script>
</body>
</html>
```