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

No:5600

2923

pubescent angelica (Angelica pubescens)
Developer sayaensm｜Date and time 23/6/30 13:01:43
Build time 37.72 sec｜Game capacity 3.961KB｜

了解です！では、「逃げ恥」を題材としたゲームを作ってみましょう。以下がHTMLとJavaScriptのコード例です。このコードを1枚のHTMLファイルに書き込んで実行すると、「逃げ恥ゲーム」がプレイできます。

逃げ恥ゲーム！

このゲームでは、3つの質問があります。それぞれの質問に対して、複数の選択肢があります。プレイヤーは選択肢の中から正しい答えを選びます。ゲームが始まると、質問文と選択肢が表示されます。プレイヤーが選択肢をクリックすると、正誤が表示されます。全ての質問に回答し終えると、スコアとリスタートボタンが表示されます。このゲームはウェブブラウザ上で実行可能で、スマートフォンでも遊ぶことができます。絵文字は使用していませんが、遊びやすいインターフェースでプレイできるでしょう。お楽しみください！

→ 　

1　

0　

[PR]現在のプレゼントランキング

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

(C)2023 HisashiApp

了解です！では、「逃げ恥」を題材としたゲームを作ってみましょう。

以下がHTMLとJavaScriptのコード例です。このコードを1枚のHTMLファイルに書き込んで実行すると、「逃げ恥ゲーム」がプレイできます。

```html
<!DOCTYPE html>
<html>
<head>
<title>逃げ恥ゲーム</title>
<style>
  body {
    text-align: center;
    font-family: Arial, sans-serif;
  }
  
  .game-container {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
</head>
<body>
  <div class="game-container">
    <h1 id="question">逃げ恥ゲーム！</h1>
    <p id="answer"></p>
    <button onclick="startGame()">スタート</button>
  </div>

<script>
    var questions = [
      {
        question: "山里さんの本名は？",
        choices: ["村上", "島谷", "三木", "山崎"],
        correctAnswer: "山崎"
      },
      {
        question: "ここだけの話、俺達夫婦、例の中谷美紀みたいだな。",
        choices: ["はい", "いいえ"],
        correctAnswer: "いいえ"
      },
      {
        question: "「逃げる恥知らず」とは何を意味する？",
        choices: ["何事も恥じることなく挑戦すること", "失敗や困難を避けること", "人前で逃げること"],
        correctAnswer: "何事も恥じることなく挑戦すること"
      }
    ];

var currentQuestionIndex = 0;
    var score = 0;

function startGame() {
      currentQuestionIndex = 0;
      score = 0;
      showQuestion();
    }

function showQuestion() {
      var question = questions[currentQuestionIndex];
      var questionElement = document.getElementById("question");
      var answerElement = document.getElementById("answer");

questionElement.textContent = question.question;
      answerElement.textContent = "";

for (var i = 0; i < question.choices.length; i++) {
        var choice = question.choices[i];
        var button = document.createElement("button");
        button.textContent = choice;
        button.onclick = evaluateAnswer;
        answerElement.appendChild(button);
      }
    }

function evaluateAnswer(e) {
      var selectedAnswer = e.target.textContent;
      var question = questions[currentQuestionIndex];

if (selectedAnswer === question.correctAnswer) {
        score++;
        alert("正解です！");
      } else {
        alert("不正解です！");
      }
      
      currentQuestionIndex++;

if (currentQuestionIndex < questions.length) {
        showQuestion();
      } else {
        endGame();
      }
    }

function endGame() {
      var questionElement = document.getElementById("question");
      var answerElement = document.getElementById("answer");
      var restartButton = document.createElement("button");

questionElement.textContent = "ゲーム終了！あなたのスコアは " + score + "/" + questions.length + " です。";
      answerElement.textContent = "";

restartButton.textContent = "リスタート";
      restartButton.onclick = startGame;
      answerElement.appendChild(restartButton);
    }
  </script>
</body>
</html>
```

このゲームでは、3つの質問があります。それぞれの質問に対して、複数の選択肢があります。プレイヤーは選択肢の中から正しい答えを選びます。

ゲームが始まると、質問文と選択肢が表示されます。プレイヤーが選択肢をクリックすると、正誤が表示されます。全ての質問に回答し終えると、スコアとリスタートボタンが表示されます。

このゲームはウェブブラウザ上で実行可能で、スマートフォンでも遊ぶことができます。絵文字は使用していませんが、遊びやすいインターフェースでプレイできるでしょう。

お楽しみください！