Metal Slug in pictograms's game

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

No:6964

226

←

Prev Next

→

Metal Slug in pictograms
Developer User3898｜Date and time 23/7/4 17:09:51
Build time 22.195 sec｜Game capacity 3.21KB｜

Script

了解です。以下に、JavaScriptを使用して作成したシンプルなメタルスラッグ風のゲームを示します。

上記のコードでは、HTML内にゲーム画面として使用する領域を作成し、プレイヤーと敵の要素を表示しています。プレイヤーはキーボードの左右矢印キーで操作し、敵はランダムに左右に動きます。プレイヤーと敵が重なった場合はゲームオーバーとなり、アラートが表示されます。このコードをHTMLファイルに保存し、ブラウザで開くとゲームが実行されます。スマートフォンでも操作可能です。ただし、絵文字の使用はできません。

←

Prev　Next

→ 　

Back　

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

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

了解です。以下に、JavaScriptを使用して作成したシンプルなメタルスラッグ風のゲームを示します。

```html
<!DOCTYPE html>
<html>
<head>
<style>
    #game-board {
        width: 100%;
        height: 400px;
        background-color: #000;
        position: relative;
    }
    #player {
        width: 30px;
        height: 30px;
        background-color: #f00;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    #enemy {
        width: 30px;
        height: 30px;
        background-color: #0f0;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
</style>
</head>
<body>
<div id="game-board">
    <div id="player"></div>
    <div id="enemy"></div>
</div>

function updateGame() {
        // ゲームが終了している場合は処理終了
        if (!gameRunning) {
            return;
        }

// キーボードイベントでプレイヤーの位置を更新
        document.addEventListener('keydown', function(event) {
            if (event.key === 'ArrowLeft') {
                movePlayer(-10); // プレイヤーを左に移動
            } else if (event.key === 'ArrowRight') {
                movePlayer(10); // プレイヤーを右に移動
            }
        });

// 敵の位置を更新
        moveEnemy();

// ゲームオーバーチェック
        checkGameOver();

// 10ミリ秒ごとにゲームを更新
        setTimeout(updateGame, 10);
    }

function movePlayer(positionChange) {
        playerPosition += positionChange; // プレイヤー位置を更新
        player.style.left = playerPosition + '%'; // プレイヤーの表示位置を変更
    }

function moveEnemy() {
        enemyPosition += Math.random() * 5 - 2.5; // 敵位置を更新(ランダムに左右に動く)
        enemy.style.left = enemyPosition + '%'; // 敵の表示位置を変更
    }

function checkGameOver() {
        // プレイヤーと敵の位置が重なった場合、ゲーム終了
        if (Math.abs(playerPosition - enemyPosition) < 3) {
            gameRunning = false;
            alert('ゲームオーバー');
        }
    }

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

上記のコードでは、HTML内にゲーム画面として使用する領域を作成し、プレイヤーと敵の要素を表示しています。プレイヤーはキーボードの左右矢印キーで操作し、敵はランダムに左右に動きます。プレイヤーと敵が重なった場合はゲームオーバーとなり、アラートが表示されます。

このコードをHTMLファイルに保存し、ブラウザで開くとゲームが実行されます。スマートフォンでも操作可能です。ただし、絵文字の使用はできません。