AI game creator

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

No:5605

3143

←

Prev Next

→

boss rush
Developer User3834｜Date and time 23/6/30 13:47:49
Build time 28.762 sec｜Game capacity 2.68KB｜

Script

ボスラッシュというゲームを作ります。以下はHTMLファイルのコードです。

このゲームでは、プレイヤー（😀）とボス（👿）がキャンバス上で自動的に移動します。プレイヤーはボスに近づき、ボスはランダムに移動します。ゲーム画面はキャンバス上に描画され、1フレームごとにゲームの状態が更新されます。ボスに近づくときにプレイヤーが移動する様子を楽しんでください。

←

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>
</head>
<body>
    <canvas id="game-canvas" width="400" height="400"></canvas>
    <script>
        // ゲームの実装
        const canvas = document.getElementById('game-canvas');
        const context = canvas.getContext('2d');

// ゲームの状態を管理する変数
        let playerX = 200; // プレイヤーの初期位置（X座標）
        let playerY = 200; // プレイヤーの初期位置（Y座標）
        let bossX = 100; // ボスの初期位置（X座標）
        let bossY = 100; // ボスの初期位置（Y座標）

function updateGame() {
            // ゲームの状態を更新する処理を記述

// プレイヤーの移動
            if (playerX < bossX) {
                playerX += 1;
            } else if (playerX > bossX) {
                playerX -= 1;
            }
            if (playerY < bossY) {
                playerY += 1;
            } else if (playerY > bossY) {
                playerY -= 1;
            }

// ボスの移動（ランダムに1マス）
            const direction = Math.floor(Math.random() * 4);
            if (direction === 0) {
                bossX += 1;
            } else if (direction === 1) {
                bossX -= 1;
            } else if (direction === 2) {
                bossY += 1;
            } else if (direction === 3) {
                bossY -= 1;
            }

// ゲームの状態を描画する処理を記述
            context.clearRect(0, 0, canvas.width, canvas.height); // 一度キャンバスをクリア

// プレイヤーの描画
            context.font = '20px Arial';
            context.fillText('😀', playerX, playerY);

// ボスの描画
            context.font = '30px Arial';
            context.fillText('👿', bossX, bossY);

// 次のフレームを更新するために再帰的に呼び出す
            requestAnimationFrame(updateGame);
        }

// ゲームを開始する
        updateGame();
    </script>
</body>
</html>