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

No:19927

←

Prev Next

→

推理ゲーム
Developer バファリンヌ｜Date and time 23/10/7 11:09:50
Build time 25.099 sec｜Game capacity 5.157KB｜

Script

了解しました。以下に推理ゲームのサンプルプログラムを記述します。

推理ゲーム

以上がサンプルの推理ゲームのHTMLファイルです。スマートフォンで表示することを前提に作成しており、スタイルやボタンの配置などはそのように最適化しています。以上が全ての要件を満たすゲームとなります。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

了解しました。以下に推理ゲームのサンプルプログラムを記述します。

```html
<!DOCTYPE html>
<html>
<head>
  <title>推理ゲーム</title>
  <style>
    #question {
      font-size: 24px;
      margin-bottom: 20px;
    }

#choices {
      display: flex;
      flex-wrap: wrap;
    }

.choice-button {
      width: 100px;
      height: 100px;
      font-size: 32px;
      margin: 10px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
    }

.choice-button:focus {
      outline: none;
    }

.correct {
      background-color: green;
      color: white;
    }

.incorrect {
      background-color: red;
      color: white;
    }

#result {
      font-size: 24px;
      margin-top: 20px;
    }

#restart {
      font-size: 18px;
      margin-top: 20px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>推理ゲーム</h1>

let currentQuestion = 0;
    let score = 0;

function showQuestion() {
      const questionElement = document.getElementById("question");
      const choicesElement = document.getElementById("choices");
      const resultElement = document.getElementById("result");

questionElement.textContent = questions[currentQuestion].question;

// 選択肢ボタンにテキストを設定
      for (let i = 0; i < 4; i++) {
        const choiceButton = choicesElement.children[i];
        choiceButton.textContent = questions[currentQuestion].choices[i];
        choiceButton.classList.remove("correct", "incorrect");
      }

resultElement.textContent = "";

// 選択肢ボタンにクリックイベントを追加
      for (let i = 0; i < 4; i++) {
        const choiceButton = choicesElement.children[i];
        choiceButton.addEventListener("click", checkAnswer);
      }
    }

function checkAnswer(event) {
      const selectedChoice = event.target;
      const resultElement = document.getElementById("result");

if (selectedChoice.textContent === questions[currentQuestion].answer) {
        selectedChoice.classList.add("correct");
        resultElement.textContent = "正解！";
        score++;
      } else {
        selectedChoice.classList.add("incorrect");
        resultElement.textContent = "不正解！";
      }

// 選択肢ボタンからクリックイベントを削除
      const choicesElement = document.getElementById("choices");
      for (let i = 0; i < 4; i++) {
        const choiceButton = choicesElement.children[i];
        choiceButton.removeEventListener("click", checkAnswer);
      }

// 最後の問題であれば結果を表示、そうでなければ次の問題を表示する
      if (currentQuestion === questions.length - 1) {
        showResult();
      } else {
        currentQuestion++;
        setTimeout(showQuestion, 1000);
      }
    }

function showResult() {
      const questionElement = document.getElementById("question");
      const choicesElement = document.getElementById("choices");
      const resultElement = document.getElementById("result");
      const restartElement = document.getElementById("restart");

questionElement.textContent = "";
      choicesElement.style.display = "none";
      resultElement.textContent = `あなたのスコアは${score} / ${questions.length}です！`;
      restartElement.textContent = "もう一度遊ぶ";

restartElement.addEventListener("click", resetGame);
    }

function resetGame() {
      currentQuestion = 0;
      score = 0;

const choicesElement = document.getElementById("choices");
      const resultElement = document.getElementById("result");
      const restartElement = document.getElementById("restart");

choicesElement.style.display = "flex";
      restartElement.textContent = "";
      resultElement.textContent = "";

showQuestion();
    }

showQuestion();
  </script>
</body>
</html>
```