文書の過去の版を表示しています。
<!DOCTYPE html> <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>