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

No:8182

2105

←

Prev Next

→

Street Fighter 35
Developer アーラ！｜Date and time 23/7/14 2:50:17
Build time 28.308 sec｜Game capacity 3.205KB｜

Script

了解しました。以下に、ストリートファイター35のゲームの例を示します。

ストリートファイター35

このプログラムでは、矩形のプレイヤーキャラクターがキーボードの矢印キーによって操作できるようになっています。プレイヤーキャラクターは赤色の矩形で表されており、キー入力に応じて移動します。ゲームループは `requestAnimationFrame` を使って実装されており、画面の更新および次のフレームの更新を予約しています。キーダウンイベントとキーアップイベントのリスナーも登録されており、キーの押下状態を保持する `keyState` オブジェクトが更新されます。このプログラムを実行することで、ブラウザ上に表示されるキャンバス上でプレイヤーキャラクターを操作することができます。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下に、ストリートファイター35のゲームの例を示します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ストリートファイター35</title>
</head>
<body>
    <h1>ストリートファイター35</h1>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// ゲームキャンバスの取得
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");

// プレイヤーキャラクターの初期位置
        let playerX = 200;
        let playerY = 350;

// プレイヤーキャラクターの移動速度
        const moveSpeed = 5;

// キー入力の状態を保持するオブジェクト
        const keyState = {};

// キーダウンイベントのハンドラー
        function onKeyDown(event) {
            keyState[event.key] = true;
        }

// キーアップイベントのハンドラー
        function onKeyUp(event) {
            keyState[event.key] = false;
        }

// メインのゲームループ
        function gameLoop() {
            // キー入力に応じてプレイヤーキャラクターを移動する
            if (keyState["ArrowLeft"]) {
                playerX -= moveSpeed;
            }
            if (keyState["ArrowRight"]) {
                playerX += moveSpeed;
            }
            if (keyState["ArrowUp"]) {
                playerY -= moveSpeed;
            }
            if (keyState["ArrowDown"]) {
                playerY += moveSpeed;
            }

// ゲームキャンバスをクリアする
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// プレイヤーキャラクターを描画する
            ctx.fillStyle = "red";
            ctx.fillRect(playerX, playerY, 50, 50);

// 次のフレームの更新を予約する
            requestAnimationFrame(gameLoop);
        }

// キーダウンイベントとキーアップイベントのリスナーを登録する
        document.addEventListener("keydown", onKeyDown);
        document.addEventListener("keyup", onKeyUp);

// ゲームループを開始する
        gameLoop();
    </script>
</body>
</html>
```

このプログラムでは、矩形のプレイヤーキャラクターがキーボードの矢印キーによって操作できるようになっています。プレイヤーキャラクターは赤色の矩形で表されており、キー入力に応じて移動します。

ゲームループは `requestAnimationFrame` を使って実装されており、画面の更新および次のフレームの更新を予約しています。キーダウンイベントとキーアップイベントのリスナーも登録されており、キーの押下状態を保持する `keyState` オブジェクトが更新されます。

このプログラムを実行することで、ブラウザ上に表示されるキャンバス上でプレイヤーキャラクターを操作することができます。