Click here for free DL of the app version that can save data.

No:37763

78

文章　ノベルゲーム
Developer User17126｜Date and time 24/1/21 15:45:54
Build time 12.621 sec｜Game capacity 2.892KB｜

了解しました。以下に、スマートフォンで遊べるシンプルなノベルゲームの例を示します。

ノベルゲーム

スタート画面です。

これは1つ目のシーンです。

これは2つ目のシーンです。

これは3つ目のシーンです。

これは4つ目のシーンです。

これはエンディングのシーンです。

上記のコードは、スタート画面からノベルゲームが始まります。各シーンにはテキストが表示され、プレイヤーは表示された選択肢の中から選択することができます。選択肢に応じて次のシーンが表示される仕組みです。各シーンはHTMLの`div`要素で表されており、`id`属性や`data-options`属性を使用して管理されています。また、JavaScriptの関数とイベントリスナーを使って、シーンを切り替える処理を実装しています。このゲームの場合、最初のシーン（`<div id="scene">`）に「はじめる」ボタンがあり、クリックするとゲームが開始します。他のシーンでは、テキストと選択肢が表示され、プレイヤーは選択した選択肢に応じて次のシーンが表示されます。以上が、スマートフォンで遊べるシンプルなノベルゲームの例です。この例を参考にして、より複雑なストーリーやゲームルールを追加することもできます。

→ 　

0　

0　

[PR]現在の本の売れ筋ランキング

Click here for free DL of the app version that can save data.

(C)2023 HisashiApp

了解しました。以下に、スマートフォンで遊べるシンプルなノベルゲームの例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ノベルゲーム</title>
  <style>
    body {
      text-align: center;
      font-size: 2em;
      padding: 20px;
    }
    
    button {
      font-size: 1em;
      padding: 10px 20px;
    }
  </style>
</head>
<body>
  <h1>ノベルゲーム</h1>
  
  <div id="scene">
    <p>スタート画面です。</p>
    <button id="startButton">はじめる</button>
  </div>
  
  <script>
    document.getElementById("startButton").addEventListener("click", function() {
      startGame();
    });

function startGame() {
      document.getElementById("startButton").remove();
      
      displayScene("scene1");
    }
    
    function displayScene(sceneId) {
      var scene = document.getElementById(sceneId);
      var options = scene.dataset.options.split(",");
      
      var html = "<p>" + scene.innerText + "</p>";
      
      for (var i = 0; i < options.length; i++) {
        html += "<button onclick='displayScene(\"" + options[i] + "\")'>" + options[i] + "</button>";
      }
      
      scene.innerHTML = html;
    }
  </script>
  
  <div id="scene1" data-options="scene2, scene3, scene4">
    <p>これは1つ目のシーンです。</p>
  </div>
  
  <div id="scene2" data-options="ending1">
    <p>これは2つ目のシーンです。</p>
  </div>
  
  <div id="scene3" data-options="scene1">
    <p>これは3つ目のシーンです。</p>
  </div>
  
  <div id="scene4" data-options="scene1, scene3">
    <p>これは4つ目のシーンです。</p>
  </div>
  
  <div id="ending1">
    <p>これはエンディングのシーンです。</p>
  </div>
</body>
</html>
```

上記のコードは、スタート画面からノベルゲームが始まります。各シーンにはテキストが表示され、プレイヤーは表示された選択肢の中から選択することができます。選択肢に応じて次のシーンが表示される仕組みです。

各シーンはHTMLの`div`要素で表されており、`id`属性や`data-options`属性を使用して管理されています。また、JavaScriptの関数とイベントリスナーを使って、シーンを切り替える処理を実装しています。

このゲームの場合、最初のシーン（`<div id="scene">`）に「はじめる」ボタンがあり、クリックするとゲームが開始します。他のシーンでは、テキストと選択肢が表示され、プレイヤーは選択した選択肢に応じて次のシーンが表示されます。

以上が、スマートフォンで遊べるシンプルなノベルゲームの例です。この例を参考にして、より複雑なストーリーやゲームルールを追加することもできます。