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

No:2884

1418

←

Prev Next

→

The following text is not translatable. Text-based..ALL
Developer User3589｜Date and time 23/6/23 1:19:13
Build time 33.879 sec｜Game capacity 3.638KB｜

Script

選択式テキストゲーム

選んだゲームを沢山遊べるよ。

選択肢は沢山出してね。

ボタンの意味合いは状況に応じて変化させてね。

スコア: 0

時間: 0秒

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>選択式テキストゲーム</title>
    <style>
      body {
        background-color: white;
        color: black;
        font-family: sans-serif;
        text-align: center;
      }
      h1 {
        font-size: 2em;
        margin-bottom: 0.5em;
      }
      p {
        font-size: 1.2em;
        margin: 1em 0;
      }
      button {
        font-size: 1.2em;
        padding: 0.5em 1em;
        margin: 0.5em;
        border-radius: 0.5em;
      }
      button:hover {
        background-color: #ddd;
      }
      #score {
        float: left;
        font-size: 1.5em;
        margin-left: 1em;
      }
      #time {
        float: right;
        font-size: 1.5em;
        margin-right: 1em;
      }
    </style>
  </head>
  <body>
    <h1>選択式テキストゲーム</h1>
    <p>選んだゲームを沢山遊べるよ。</p>
    <p>選択肢は沢山出してね。</p>
    <p>ボタンの意味合いは状況に応じて変化させてね。</p>
    <button id="option1" disabled></button>
    <button id="option2" disabled></button>
    <button id="option3" disabled></button>
    <p id="message"></p>
    <div id="score">スコア: 0</div>
    <div id="time">時間: 0秒</div>
    <button id="start">スタート</button>
    <script>
      const game = {
        currentGame: null,
        score: 0,
        time: 0,
        options: [
          {text: "オプション1", action: () => {updateMessage("オプション1を選んだ");}},
          {text: "オプション2", action: () => {updateMessage("オプション2を選んだ");}},
          {text: "オプション3", action: () => {updateMessage("オプション3を選んだ");}}
        ],
        start: function() {
          this.currentGame = setInterval(() => {
            this.time++;
            updateTime();
          }, 1000);
          this.score = 0;
          updateScore();
          updateOptions();
          updateMessage("");
          document.getElementById("start").style.display = "none";
        },
        end: function() {
          clearInterval(this.currentGame);
          this.currentGame = null;
          document.getElementById("start").style.display = "block";
        },
        chooseOption: function(index) {
          this.options[index].action();
          this.score++;
          updateScore();
          updateOptions();
        }
      }
      
      function updateOptions() {
        const optionButtons = document.querySelectorAll("#option1, #option2, #option3");
        for (let i = 0; i < optionButtons.length; i++) {
          if (game.options[i]) {
            optionButtons[i].textContent = game.options[i].text;
            optionButtons[i].disabled = false;
            optionButtons[i].onclick = function() {
              game.chooseOption(i);
            }
          }
          else {
            optionButtons[i].textContent = "";
            optionButtons[i].disabled = true;
          }
        }
      }
      
      function updateScore() {
        const scoreDiv = document.getElementById("score");
        scoreDiv.textContent = "スコア: " + game.score;
      }
      
      function updateTime() {
        const timeDiv = document.getElementById("time");
        timeDiv.textContent = "時間: " + game.time + "秒";
      }
      
      function updateMessage(message) {
        const messageDiv = document.getElementById("message");
        messageDiv.textContent = message;
      }
      
      document.getElementById("start").onclick = function() {
        game.start();
      }
    </script>
  </body>
</html>