選択式のアドベンチャーゲーム

ブラウザで作れるゲーム

HTMLとjavascriptを使って、昔懐かしいアドベンチャーゲームを作ってみましょう。

テキストアドベンチャーゲーム

矢印キーを押して移動してください。

テキストアドベンチャーゲーム

矢印キーを押して移動してください。↑↓←→戦う逃げる

<script>
    const monsters = ['吸血鬼', '鬼', '悪魔'];
    let inBattle = false;

    function move() {
        if (!inBattle) {
            const monster = monsters[Math.floor(Math.random() * monsters.length)];
            document.getElementById('message').textContent = `${monster}が現れた！`;
            document.getElementById('options').style.display = 'block';
            inBattle = true;
        }
    }

    function fight() {
        const success = Math.random() < 0.9;  // 90%の確率で勝利
        if (success) {
            document.getElementById('message').textContent = 'モンスターを倒した！';
        } else {
            document.getElementById('message').textContent = 'モンスターにやられてしまった… バッドエンド';
            endGame();
        }
        resetGame();
    }

    function runAway() {
        const success = Math.random() < 5/6;  // 5/6の確率で逃げ成功
        if (success) {
            document.getElementById('message').textContent = '逃げることに成功した！';
        } else {
            document.getElementById('message').textContent = '逃げられなかった… バッドエンド';
            endGame();
        }
        resetGame();
    }

    function resetGame() {
        setTimeout(() => {
            document.getElementById('options').style.display = 'none';
            document.getElementById('message').textContent = '矢印キーを押して移動してください。';
            inBattle = false;
        }, 2000);
    }

    function endGame() {
        document.getElementById('options').style.display = 'none';
        setTimeout(() => {
            document.getElementById('message').textContent = 'ゲームオーバー。再度プレイするにはページをリロードしてください。';
            document.querySelector('.arrow-buttons').style.display = 'none';
        }, 2000);
    }
</script>

説明

HTML部分: ゲームのUIを定義しています。プレイヤーの移動を模した矢印ボタンと、モンスターが現れた時に表示される「戦う」「逃げる」のオプションボタンを含んでいます。
CSS部分: 全体のレイアウトとスタイルを設定しています。暗い背景に白いテキストで、ゲームの雰囲気を演出しています。
JavaScript部分: ゲームのロジックを実装しています。
endGame()関数でゲームオーバー時の処理を行い、再プレイにはページをリロードするよう指示します。
move()関数で矢印ボタンを押すとランダムにモンスターが出現し、戦闘モードに移行します。
fight()関数では90%の確率でモンスターを倒し、10%の確率でプレイヤーがやられてゲームオーバーになります。
runAway()関数では5/6の確率で逃げに成功し、1/6の確率でやられてゲームオーバーになります。
resetGame()関数で一定時間後に戦闘状態をリセットし、プレイヤーが再び移動できるようにします。