帝国妖異対策局

ユーザ用ツール

サイト用ツール

トレース:
実験場

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

次のリビジョン		前のリビジョン
実験場 [2024/03/11 05:54] – 作成 tytinfo実験場 [2025/04/08 11:17] (現在) – tytinfo
行 1: 行 1:
-<!DOCTYPE html> +1
-<html lang="ja"> +
- +
-<head> +
-    <meta charset="UTF-8"> +
-    <title>ノベルゲーム形式デモ</title> +
-    <style> +
-        body, +
-        html { +
-            margin: 0; +
-            padding: 0; +
-            height: 100%; +
-            overflow: hidden; +
-        } +
- +
-        .game-container { +
-            height: 100%; +
-            background-color: #000; +
-            position: relative; +
-            background-size: cover; +
-            background-position: center center; +
-            /* 中央に配置 */ +
-            background-repeat: no-repeat; +
-            /* 画像の繰り返し無し */ +
-        } +
- +
-        .dialogue-box { +
-            position: absolute; +
-            bottom: 0; +
-            width: 100%; +
-            background: rgba(0, 0, 0, 0.8); +
-            padding: 20px; +
-            box-sizing: border-box; +
-            color: white; +
-            font-family: Arial, sans-serif; +
-            font-size: 2em; +
-        } +
- +
-        #displayText { +
-            white-space: pre-wrap; +
-            overflow: hidden; +
-            min-height: 80px; +
-        } +
- +
- +
-        #commandPanel { +
-            display: none; +
-            position: absolute; +
-            right: 20px; +
-            top: 20px; +
-            background-color: #444; +
-            padding: 10px; +
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); +
-            display: flex; +
-            flex-direction: column; +
-        } +
- +
- +
-        /* position: absolute を削除し、パネル内のボタンのスタイルを調整 */ +
-        #backButton, +
-        #autoModeButton, +
-        #increaseFontSizeButton, +
-        #decreaseFontSizeButton, +
-        #resetButton, +
-        #closePanelButton { +
-            padding: 5px 10px; +
-            font-size: 0.7em; +
-            color: white; +
-            background-color: #444; +
-            border: none; +
-            cursor: pointer; +
-            margin: 2px 0; +
-            /* ボタン間の間隔 */ +
-        } +
- +
-        #increaseFontSizeButton, +
-        #decreaseFontSizeButton { +
-            font-size: 1em; +
-            /* フォントサイズの調整が必要な場合はここで設定 */ +
-        } +
- +
-        #commandButton { +
-            position: absolute; +
-            right: 20px; +
-            top: 20px; +
-            padding: 10px 20px; +
-            font-size: 0.7em; +
-            color: white; +
-            background-color: #444; +
-            border: none; +
-            cursor: pointer; +
-        } +
-    </style> +
-</head> +
- +
-<body> +
-    <div class="game-container" id="gameContainer"> +
-        <div class="dialogue-box" id="dialogueBox"> +
-            <span id="displayText"></span> +
-        </div> +
- +
-        <!-- コマンドボタン --> +
-        <button id="commandButton">≡</button> +
- +
-        <!-- コマンドパネル --> +
-        <div id="commandPanel" style="display:none;"> +
-            <button id="resetButton">最初から</button> +
-            <button id="increaseFontSizeButton">＋</button> +
-            <button id="decreaseFontSizeButton">ー</button> +
-            <button id="autoModeButton">自動</button> +
-            <button id="backButton">戻る</button> +
-            <button id="closePanelButton">閉じる</button> +
-        </div> +
- +
-    </div> +
- +
-    <script> +
-        (function () { +
-            var scenes = [ +
-                // シナリオテキストをここに挿入 +
-                "&bgimage https://mooncat-cabin.net/wp-content/uploads/2023/12/elfadv1.jpg", +
-                "&bgimagemovey 0", +
-                "1こんにちは１あをによし奈良の都は咲く花の薫ふがごとく今盛りなり。ひさかたの光のどけき春の日に静心なく花の散るらむ。あをによし奈良の都は咲く花の薫ふがごとく今盛りなり。ひさかたの光のどけき春の日に静心なく花の散るらむ。", +
-                "&bgimagemovey 0", +
-                "&bgimage https://mooncat-cabin.net/wp-content/uploads/2023/12/elfadv2.jpg", +
-                "2こんにちは２あをによし奈良の都は咲く花の薫ふがごとく今盛りなり。ひさかたの光のどけき春の日に静心なく花の散るらむ。あをによし奈良の都は咲く花の薫ふがごとく今盛りなり。ひさかたの光のどけき春の日に静心なく花の散るらむ。", +
-                "&bgimage https://mooncat-cabin.net/wp-content/uploads/2023/12/elfadv3.jpg", +
-                "こんにちは３あをによし奈良の都は咲く花の薫ふがごとく今盛りなり。ひさかたの光のどけき春の日に静心なく花の散るらむ。あをによし奈良の都は咲く花の薫ふがごとく今盛りなり。ひさかたの光のどけき春の日に静心なく花の散るらむ。", +
-                "&bgimage https://mooncat-cabin.net/wp-content/uploads/2023/12/elfadv4.jpg", +
-                "こんにちは４あをによし奈良の都は咲く花の薫ふがごとく今盛りなり。ひさかたの光のどけき春の日に静心なく花の散るらむ。あをによし奈良の都は咲く花の薫ふがごとく今盛りなり。ひさかたの光のどけき春の日に静心なく花の散るらむ。", +
-                "テスト終了" +
-            ]; +
-            var currentScene = 0; +
-            var typingSpeed = 50; +
-            var displayText = document.getElementById('displayText'); +
-            var gameContainer = document.getElementById('gameContainer'); +
-            var timeoutId; +
-            var backButton = document.getElementById('backButton'); +
-            var yOffset = 0; // 背景画像のY軸オフセットの初期値を0に設定 +
- +
-            function updateBackgroundImage(imageName) { +
-                gameContainer.style.backgroundImage = "url('" + imageName + "')"; +
-                // 背景画像の位置を更新 +
-                gameContainer.style.backgroundPosition = "center " + yOffset + "px"; +
-            } +
- +
-            function updateScene(text, isBackward) { +
-                if (text.startsWith("&bgimage ")) { +
-                    // &bgimage コマンド処理 +
-                    var imageName = text.split(" ")[1]; +
-                    updateBackgroundImage(imageName); +
-                    if (isBackward) prevScene(); +
-                    else nextScene(); +
-                } else if (text.startsWith("&bgimagemovey ")) { +
-                    // &bgimagemovey コマンド処理 +
-                    var value = parseInt(text.split(" ")[1], 10); +
-                    if (!isNaN(value)) { // 値が数値であることを確認 +
-                        yOffset = value; +
-                        gameContainer.style.backgroundPosition = "center " + yOffset + "px"; +
-                    } +
-                    if (isBackward) prevScene(); +
-                    else nextScene(); +
-                } else { +
-                    // テキスト表示 +
-                    displayText.innerHTML = ""; +
-                    typeWriter(text); +
-                } +
-            } +
- +
-            function typeWriter(text) { +
-                var index = 0; +
-                function addCharacter() { +
-                    if (index < text.length) { +
-                        displayText.innerHTML += text.charAt(index); +
-                        index++; +
-                        clearTimeout(timeoutId); +
-                        timeoutId = setTimeout(addCharacter, typingSpeed); +
-                    } +
-                } +
-                addCharacter(); +
-            } +
- +
-            function nextScene() { +
-                currentScene++; +
-                if (currentScene < scenes.length) { +
-                    updateScene(scenes[currentScene]); +
-                } +
-            } +
- +
-            function prevScene() { +
-                // 最初のシーンでは戻れない +
-                if (currentScene > 0) { +
-                    clearTimeout(timeoutId); // 現在のタイピングアニメーションをキャンセル +
-                    currentScene--; +
-                    updateScene(scenes[currentScene], true); +
-                } +
-            } +
- +
-            document.addEventListener('click', function () { +
-                clearTimeout(timeoutId); // 現在進行中のタイピングアニメーションをキャンセル +
-                if (displayText.innerHTML !== scenes[currentScene] && !scenes[currentScene].startsWith("&")) { +
-                    // タイピング中にクリックされた場合、全文を表示 +
-                    displayText.innerHTML = scenes[currentScene]; +
-                } else { +
-                    nextScene(); +
-                } +
-            }); +
- +
-            backButton.addEventListener('click', function (event) { +
-                event.stopPropagation(); // 親要素へのイベント伝播を停止 +
-                prevScene(); +
-            }); +
- +
-            var yOffset = 0; // 背景画像のY軸オフセットの初期値 +
- +
-            function updateBackgroundImage(imageName) { +
-                gameContainer.style.backgroundImage = "url('images/" + imageName + "')"; +
-                // 背景画像の位置を更新 +
-                gameContainer.style.backgroundPosition = "center " + yOffset + "px"; +
-            } +
- +
-            var autoMode = false; // オートモードの状態 +
-            var autoModeIntervalId = null; // オートモードのインターバルID +
- +
-            function toggleAutoMode() { +
-                autoMode = !autoMode; +
-                autoModeButton.textContent = autoMode ? "停止" : "自動"; +
-                if (autoMode) { +
-                    clearTimeout(timeoutId); // 現在進行中のアニメーションをキャンセル +
-                    autoModeNextScene(); +
-                } else { +
-                    clearTimeout(autoModeIntervalId); +
-                } +
-            } +
- +
-            function autoModeNextScene() { +
-                if (!autoMode) return; // オートモードが停止していたら終了 +
-                nextScene(); // 次のシーンへ進む +
-                var delay = 4000; // デフォルトの遅延時間 +
- +
-                // 現在のシーンがテキストの場合、その長さに基づいて遅延時間を調整 +
-                if (!scenes[currentScene].startsWith("&")) { +
-                    delay += scenes[currentScene].length * typingSpeed; +
-                } +
- +
-                autoModeIntervalId = setTimeout(autoModeNextScene, delay); +
-            } +
- +
-            document.getElementById('autoModeButton').addEventListener('click', function (event) { +
-                event.stopPropagation(); // イベント伝播を停止 +
-                toggleAutoMode(); +
-            }); +
- +
-            // 既存の nextScene 関数内... +
-            function nextScene() { +
-                currentScene++; +
-                if (currentScene < scenes.length) { +
-                    updateScene(scenes[currentScene]); +
-                    if (autoMode) { +
-                        clearTimeout(autoModeIntervalId); // 次のシーンへ進む前に前のタイマーをクリア +
-                        autoModeIntervalId = setTimeout(autoModeNextScene, 3000 + scenes[currentScene].length * typingSpeed); // メッセージ表示時間を考慮 +
-                    } +
-                } else if (autoMode) { +
-                    toggleAutoMode(); // シナリオの最後に達したらオートモードを停止 +
-                } +
-            } +
-            var dialogueBox = document.getElementById('dialogueBox'); +
-            var fontSize = 1.2; // 初期フォントサイズ(em) +
- +
-            function updateFontSize() { +
-                dialogueBox.style.fontSize = fontSize + 'em'; +
-            } +
- +
-            document.getElementById('increaseFontSizeButton').addEventListener('click', function (event) { +
-                event.stopPropagation(); // イベント伝播を停止 +
-                fontSize += 0.5; +
-                updateFontSize(); +
-            }); +
- +
-            document.getElementById('decreaseFontSizeButton').addEventListener('click', function (event) { +
-                event.stopPropagation(); // イベント伝播を停止 +
-                fontSize = Math.max(fontSize - 0.5, 0.5); // フォントサイズが0.5em未満にならないようにする +
-                updateFontSize(); +
-            }); +
- +
-            document.addEventListener('DOMContentLoaded', function () { +
-                var commandButton = document.getElementById('commandButton'); +
-                var commandPanel = document.getElementById('commandPanel'); +
-                var closePanelButton = document.getElementById('closePanelButton'); +
-                var resetButton = document.getElementById('resetButton'); +
- +
-                // コマンドボタンをクリックした時のイベント +
-                commandButton.addEventListener('click', function () { +
-                    event.stopPropagation(); // イベント伝播を停止 +
-                    commandPanel.style.display = 'block'; // パネルを表示 +
-                    commandButton.style.display = 'none'; // コマンドボタンを非表示 +
-                }); +
- +
-                // 閉じるボタンをクリックした時のイベント +
-                closePanelButton.addEventListener('click', function () { +
-                    event.stopPropagation(); // イベント伝播を停止 +
-                    commandPanel.style.display = 'none'; // パネルを非表示 +
-                    commandButton.style.display = 'block'; // コマンドボタンを表示 +
-                }); +
- +
-                // ページをリロードする +
-                resetButton.addEventListener('click', function () { +
-                    window.location.reload(); +
-                }); +
-                // 既存のボタンイベント（戻る、オートモード、フォントサイズ変更）はそのまま +
-            }); +
-            // 初期シーンをロード +
-            updateScene(scenes[currentScene]); +
-        })(); +
-    </script> +
-</body> +
- +
-</html>+
実験場.1710104090.txt.gz · 最終更新: 2024/03/11 05:54 by tytinfo