では、以下に最高のテキストアドベンチャーアプリの実装例を記述します。
まずは、htmlファイルを作成し、JavaScriptを組み込みます。以下のコードを参考にしてください。
最高のテキストアドベンチャー
ここにテキストが表示されます。
このように、htmlファイルの中でJavaScriptを組み込んでいます。また、ヘッダーのタイトルにはアプリ名を設定しています。
次に、JavaScriptのコードを記述します。以下は例です。
var currentText = "ここは初期のテキストです。";
var currentOption = 0;
function updateScreen() {
var textElement = document.querySelector("p");
textElement.innerHTML = currentText;
var option1 = document.querySelectorAll("button")[0];
option1.style.display = currentOption === 1 ? "block" : "none";
var option2 = document.querySelectorAll("button")[1];
option2.style.display = currentOption === 2 ? "block" : "none";
}
function selectOption(option) {
switch(option) {
case 1:
currentText = "選択肢1を選んだ後のテキストです。";
currentOption = 2;
break;
case 2:
currentText = "選択肢2を選んだ後のテキストです。";
currentOption = 1;
break;
}
updateScreen();
}
このコードでは、現在のテキスト(currentText)や現在の選択肢(currentOption)を管理しています。また、updateScreen()関数では、テキスト要素や選択肢ボタンの表示を更新しています。selectOption()関数では、選択肢を選ぶと現在のテキストや選択肢を変更して、updateScreen()を呼び出して画面を更新しています。
最後に、以下のようなテキストアドベンチャーのシナリオを設定して、遊べるようにします。
最高のテキストアドベンチャー
あなたは暗闇の中で目を覚ましました。周りには何も見えません。
1. 軽いを手探りで進む
2. 大声で助けを呼ぶ
選択肢1を選ぶと、次のテキストは以下のようになります。
あなたは何とか軽いを手探りでつたって進んでいきます。やがて、そこには薄暗いランプが灯る部屋が現れました。
1. ランプを採る
2. 部屋を出る
選択肢2を選ぶと、次のテキストは以下のようになります。
あなたは大声で助けを呼びました。すると、誰かがやってきて手を差し伸べてくれました。
おわり
このように、複数のテキストと選択肢を用意して、プレイヤーが選んでいくという流れを作り出します。
以上が最高のテキストアドベンチャーアプリの実装例です。スマホでも操作しやすくするために、選択肢ボタンは大きめに配置するとよいでしょう。また、楽しく遊べるように絵文字を使うとさらに良いでしょう。
1288
Prev
Script
Back
0
0