見出し画像

ウィット・ウォーリア―的ウィザー〇リー

キャプテン・バーレナン😆🌈🎶したらばと野沢菜で構築された人型好酒猿

了解しました。ウィザードリィのキャラクターメイク機能を含むオープニング画面を作成し、BGMをMP3で再生するウェブアプリケーションを作成しましょう。このアプリケーションには、HTML, CSS, JavaScriptを使用し、さらにオーディオ再生機能も含めます。

以下が、ウィザードリィ風のキャラクターメイクシステムを含むウェブアプリケーションのコードです：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ウィットウォーリアーの不思議なダンジョン</title>
    <style>
        body {
            font-family: 'Courier New', monospace;
            background-color: #000;
            color: #0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        #game-container {
            border: 2px solid #0f0;
            padding: 20px;
            text-align: center;
        }
        h1 {
            color: #ff0;
        }
        button {
            background-color: #000;
            color: #0f0;
            border: 1px solid #0f0;
            padding: 5px 10px;
            margin: 5px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0f0;
            color: #000;
        }
        #character-creation {
            display: none;
        }
        .stat-container {
            display: flex;
            justify-content: space-between;
            margin: 5px 0;
        }
        #wit-quote {
            font-style: italic;
            margin: 20px 0;
        }
        #bgm-control {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <h1>ウィットウォーリアーの不思議なダンジョン</h1>
        <div id="opening-screen">
            <p>勇者よ、笑いと知恵の迷宮へようこそ！</p>
            <button id="start-button">冒険を始める</button>
        </div>
        <div id="character-creation">
            <h2>キャラクター作成</h2>
            <div class="stat-container">
                <span>筋力：</span><span id="strength">8</span>
            </div>
            <div class="stat-container">
                <span>知能：</span><span id="intelligence">8</span>
            </div>
            <div class="stat-container">
                <span>賢さ：</span><span id="wisdom">8</span>
            </div>
            <div class="stat-container">
                <span>体力：</span><span id="vitality">8</span>
            </div>
            <div class="stat-container">
                <span>敏捷性：</span><span id="agility">8</span>
            </div>
            <div class="stat-container">
                <span>運：</span><span id="luck">8</span>
            </div>
            <button id="reroll-button">ステータス再生成</button>
            <button id="confirm-button">決定</button>
        </div>
        <div id="wit-quote"></div>
        <div id="bgm-control">
            <button id="bgm-toggle">BGM ON/OFF</button>
        </div>
    </div>

    <audio id="bgm" loop>
        <source src="https://example.com/path/to/your/bgm.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>

    <script>
        const openingScreen = document.getElementById('opening-screen');
        const characterCreation = document.getElementById('character-creation');
        const startButton = document.getElementById('start-button');
        const rerollButton = document.getElementById('reroll-button');
        const confirmButton = document.getElementById('confirm-button');
        const witQuote = document.getElementById('wit-quote');
        const bgmToggle = document.getElementById('bgm-toggle');
        const bgm = document.getElementById('bgm');

        const stats = ['strength', 'intelligence', 'wisdom', 'vitality', 'agility', 'luck'];
        const witQuotes = [
            "ダンジョンで笑えないなら、それはただの洞窟だ。",
            "モンスターも冗談が通じれば、ただの変な形の友達だ。",
            "魔法は謎かけの究極形。呪文は言葉遊びの極み。",
            "宝箱を開けるのに頭を使え。鍵は知恵の中にある。",
            "迷宮で道に迷うのは、人生で道を見つける第一歩。"
        ];

        function rollStat() {
            return Math.floor(Math.random() * 6) + Math.floor(Math.random() * 6) + Math.floor(Math.random() * 6) + 3;
        }

        function updateStats() {
            stats.forEach(stat => {
                document.getElementById(stat).textContent = rollStat();
            });
        }

        function updateWitQuote() {
            witQuote.textContent = witQuotes[Math.floor(Math.random() * witQuotes.length)];
        }

        startButton.addEventListener('click', () => {
            openingScreen.style.display = 'none';
            characterCreation.style.display = 'block';
            updateStats();
            updateWitQuote();
            bgm.play();
        });

        rerollButton.addEventListener('click', () => {
            updateStats();
            updateWitQuote();
        });

        confirmButton.addEventListener('click', () => {
            alert('冒険の準備が整いました！果てしない笑いの迷宮へ、いざ出発！');
        });

        bgmToggle.addEventListener('click', () => {
            if (bgm.paused) {
                bgm.play();
            } else {
                bgm.pause();
            }
        });

        // BGMのエラーハンドリング
        bgm.addEventListener('error', () => {
            console.error('BGMの読み込みに失敗しました。');
            bgmToggle.style.display = 'none';
        });
    </script>
</body>
</html>

このウェブアプリケーションには、以下のウィットウォーリアー的要素を含んでいます：

  1. タイトル: 「ウィットウォーリアーの不思議なダンジョン」- ウィザードリィとウィットウォーリアーを掛け合わせたユーモラスなタイトル。

  2. ウィットに富んだクォート: キャラクター作成時に表示される、ダンジョン探索とユーモアを組み合わせた名言。例えば：

    • "ダンジョンで笑えないなら、それはただの洞窟だ。"

    • "モンスターも冗談が通じれば、ただの変な形の友達だ。"

  3. レトロな雰囲気: 緑色のテキストと黒い背景で、古典的なRPGの雰囲気を再現しています。

  4. キャラクター作成: ウィザードリィスタイルのランダムなステータス生成システムを実装しています。

  5. BGM機能: MP3形式のBGMを再生する機能を追加しています（注：実際のMP3ファイルは含まれていないので、適切なファイルパスを指定する必要があります）。

このアプリケーションは、古典的なRPGの要素とウィットウォーリアーの哲学的ユーモアを融合させています。プレイヤーは、キャラクター作成の過程で単にステータスを決めるだけでなく、各ステータス再生成時に表示される「知恵の名言」によって、ゲームの世界観や哲学に触れることができます。

「我ロールプレイ、ゆえに我冒険す」という精神で、このアプリケーションは単なるゲームの開始画面から、軽い哲学的思考と冒険への期待を融合させた体験へと昇華しています。

注意点：

  1. BGMのソースURLは仮のものです。実際に使用する場合は、適切な音楽ファイルへのパスを指定してください。

  2. このコードはローカル環境で直接実行できますが、BGMを再生するには、ウェブサーバー上でホストするか、ブラウザのセキュリティ設定を調整する必要があるかもしれません。

このアプローチは、ウィットウォーリアーの「真面目さとユーモアのバランス」という特性を、古典的RPGの文脈で表現しています。冒険者たちは、ダンジョンの危険に立ち向かいながらも、常に笑いの種を見つけ出す準備ができているでしょう。さあ、知恵と勇気と、そして何よりもユーモアを持って、冒険の世界へ飛び込みましょう！

決定ボタンを押しても何も起こりませんが・・・

ご指摘ありがとうございます。確かに、キャラクターメイクの決定後に先に進めないのは問題ですね。この部分を改善して、キャラクターメイク後にゲームが進行するようにしましょう。

以下に、キャラクターメイク後にゲームが進行する改良版のコードを示します：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ウィットウォーリアーの不思議なダンジョン</title>
    <style>
        body {
            font-family: 'Courier New', monospace;
            background-color: #000;
            color: #0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        #game-container {
            border: 2px solid #0f0;
            padding: 20px;
            text-align: center;
            width: 80%;
            max-width: 600px;
        }
        h1, h2 {
            color: #ff0;
        }
        button {
            background-color: #000;
            color: #0f0;
            border: 1px solid #0f0;
            padding: 5px 10px;
            margin: 5px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0f0;
            color: #000;
        }
        #character-creation, #game-screen {
            display: none;
        }
        .stat-container {
            display: flex;
            justify-content: space-between;
            margin: 5px 0;
        }
        #wit-quote {
            font-style: italic;
            margin: 20px 0;
        }
        #bgm-control {
            margin-top: 20px;
        }
        #game-text {
            height: 200px;
            overflow-y: auto;
            border: 1px solid #0f0;
            padding: 10px;
            margin-bottom: 10px;
            text-align: left;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <h1>ウィットウォーリアーの不思議なダンジョン</h1>
        <div id="opening-screen">
            <p>勇者よ、笑いと知恵の迷宮へようこそ！</p>
            <button id="start-button">冒険を始める</button>
        </div>
        <div id="character-creation">
            <h2>キャラクター作成</h2>
            <div class="stat-container">
                <span>筋力：</span><span id="strength">8</span>
            </div>
            <div class="stat-container">
                <span>知能：</span><span id="intelligence">8</span>
            </div>
            <div class="stat-container">
                <span>賢さ：</span><span id="wisdom">8</span>
            </div>
            <div class="stat-container">
                <span>体力：</span><span id="vitality">8</span>
            </div>
            <div class="stat-container">
                <span>敏捷性：</span><span id="agility">8</span>
            </div>
            <div class="stat-container">
                <span>運：</span><span id="luck">8</span>
            </div>
            <button id="reroll-button">ステータス再生成</button>
            <button id="confirm-button">決定</button>
        </div>
        <div id="game-screen">
            <div id="game-text"></div>
            <div id="game-options"></div>
        </div>
        <div id="wit-quote"></div>
        <div id="bgm-control">
            <button id="bgm-toggle">BGM ON/OFF</button>
        </div>
    </div>

    <audio id="bgm" loop>
        <source src="https://example.com/path/to/your/bgm.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>

    <script>
        const openingScreen = document.getElementById('opening-screen');
        const characterCreation = document.getElementById('character-creation');
        const gameScreen = document.getElementById('game-screen');
        const startButton = document.getElementById('start-button');
        const rerollButton = document.getElementById('reroll-button');
        const confirmButton = document.getElementById('confirm-button');
        const witQuote = document.getElementById('wit-quote');
        const bgmToggle = document.getElementById('bgm-toggle');
        const bgm = document.getElementById('bgm');
        const gameText = document.getElementById('game-text');
        const gameOptions = document.getElementById('game-options');

        const stats = ['strength', 'intelligence', 'wisdom', 'vitality', 'agility', 'luck'];
        const witQuotes = [
            "ダンジョンで笑えないなら、それはただの洞窟だ。",
            "モンスターも冗談が通じれば、ただの変な形の友達だ。",
            "魔法は謎かけの究極形。呪文は言葉遊びの極み。",
            "宝箱を開けるのに頭を使え。鍵は知恵の中にある。",
            "迷宮で道に迷うのは、人生で道を見つける第一歩。"
        ];

        function rollStat() {
            return Math.floor(Math.random() * 6) + Math.floor(Math.random() * 6) + Math.floor(Math.random() * 6) + 3;
        }

        function updateStats() {
            stats.forEach(stat => {
                document.getElementById(stat).textContent = rollStat();
            });
        }

        function updateWitQuote() {
            witQuote.textContent = witQuotes[Math.floor(Math.random() * witQuotes.length)];
        }

        startButton.addEventListener('click', () => {
            openingScreen.style.display = 'none';
            characterCreation.style.display = 'block';
            updateStats();
            updateWitQuote();
            bgm.play();
        });

        rerollButton.addEventListener('click', () => {
            updateStats();
            updateWitQuote();
        });

        confirmButton.addEventListener('click', () => {
            characterCreation.style.display = 'none';
            gameScreen.style.display = 'block';
            startGame();
        });

        bgmToggle.addEventListener('click', () => {
            if (bgm.paused) {
                bgm.play();
            } else {
                bgm.pause();
            }
        });

        // BGMのエラーハンドリング
        bgm.addEventListener('error', () => {
            console.error('BGMの読み込みに失敗しました。');
            bgmToggle.style.display = 'none';
        });

        // ゲーム進行のロジック
        function startGame() {
            updateGameText("あなたは不思議なダンジョンの入り口に立っています。暗闇の中から、かすかな笑い声が聞こえてきます。");
            showOptions([
                { text: "ダンジョンに入る", action: enterDungeon },
                { text: "もう少し準備する", action: prepareMore }
            ]);
        }

        function updateGameText(text) {
            gameText.innerHTML += `<p>${text}</p>`;
            gameText.scrollTop = gameText.scrollHeight;
        }

        function showOptions(options) {
            gameOptions.innerHTML = '';
            options.forEach(option => {
                const button = document.createElement('button');
                button.textContent = option.text;
                button.onclick = option.action;
                gameOptions.appendChild(button);
            });
        }

        function enterDungeon() {
            updateGameText("あなたは勇気を出してダンジョンに一歩踏み入れました。すると、壁に書かれた文字が目に入ります。");
            updateGameText("「笑う門には福来たる。だが、笑いすぎると息が苦しくなるぞ！」");
            showOptions([
                { text: "真面目に探索を続ける", action: continueExploration },
                { text: "その場で大笑いする", action: laughOutLoud }
            ]);
        }

        function prepareMore() {
            updateGameText("あなたは慎重に準備することにしました。すると、近くの木からフクロウが現れ、こう言います。");
            updateGameText("「準備も大切だが、冒険に完璧な時などない。笑う準備さえあれば十分だ！」");
            showOptions([
                { text: "フクロウの言葉に従ってダンジョンに入る", action: enterDungeon },
                { text: "フクロウと哲学談義を始める", action: philosophizeWithOwl }
            ]);
        }

        function continueExploration() {
            updateGameText("あなたは真面目に探索を続けます。暗闇の中、あなたの足元で何かが光ります。");
            updateGameText("それは「一日一笑」と書かれた古びたコイン。あなたは思わず微笑んでしまいます。");
            showOptions([
                { text: "コインを拾う", action: pickUpCoin },
                { text: "コインを無視して先に進む", action: ignoreCoin }
            ]);
        }

        function laughOutLoud() {
            updateGameText("あなたは大声で笑い出します。すると、ダンジョンが揺れ始め、天井から何かが降ってきます。");
            updateGameText("それは... 風船！？ 「笑いは最高の防具」と書かれています。");
            showOptions([
                { text: "風船を装備する", action: equipBalloon },
                { text: "風船を無視して先に進む", action: ignoreBalloon }
            ]);
        }

        function philosophizeWithOwl() {
            updateGameText("あなたはフクロウと哲学談義を始めます。フクロウは言います。");
            updateGameText("「人生とダンジョンは似ている。どちらも出口がわからないが、楽しむことはできる。」");
            showOptions([
                { text: "深い学びを得てダンジョンに入る", action: enterDungeonWithWisdom },
                { text: "フクロウに付いていく", action: followOwl }
            ]);
        }

        // 他の関数（pickUpCoin, ignoreCoin, equipBalloon, ignoreBalloon, enterDungeonWithWisdom, followOwl）も
        // 同様に実装し、ゲームを続けることができます。

    </script>
</body>
</html>

この改良版では以下の変更を加えました：

  1. ゲーム画面の追加: キャラクターメイク後に表示される新しいゲーム画面を追加しました。

  2. ゲームテキスト表示エリア: プレイヤーの行動結果や物語の進行を表示するテキストエリアを追加しました。

  3. 選択肢ボタン: プレイヤーが選択できる行動オプションを動的に生成するエリアを追加しました。

  4. ゲーム進行ロジック: `startGame()`関数から始まる一連のゲーム進行関数を実装しました。各関数は物語を進め、新たな選択肢を提示します。

  5. ウィットに富んだシナリオ: ダンジョン探索の各段階で、ユーモアや哲学的な要素を含む選択肢や出来事を用意しました。

主な改善点：

  • キャラクターメイク完了後、実際にゲームが始まるようになりました。

  • プレイヤーの選択に応じて物語が分岐し、進行します。

  • 各場面で、ウィットウォーリアーらしいユーモアや哲学的な要素を取り入れています。

このバージョンでは、「我選択す、ゆえに我冒険す」という精神で、プレイヤーの選択がゲームの進行に直接影響を与えるようになっています。各選択肢には、単なる行動だけでなく、ユーモアや哲学的な要素が含まれており、プレイヤーは笑いながら考えることを求められます。

例えば：

  • 「真面目に探索を続ける」か「その場で大笑いする」かという選択は、プレイヤーの性格や状況判断を反映します。

  • フクロウとの哲学談義は、ゲーム内での冒険と現実世界の人生を重ね合わせる機会を提供します。

このアプローチにより、単なるRPGゲームから、ユーモアと哲学が融合した独特の体験へと昇華しています。プレイヤーは、ダンジョン探索の過程で笑いながら人生の真理に触れることができるでしょう。

注意点：

  1. このコードは基本的な構造のみを提供しています。実際のゲームでは、より多くの分岐や詳細なシナリオを追加する必要があります。

  2. BGMのソースURLは依然として仮のものです。実際に使用する場合は、適切な音楽ファイルへのパスを指定してください。

さあ、知恵と勇気と、そして何よりも「笑い」を武器に、不思議なダンジョンへの冒険を始めましょう！