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

No:8042

717

←

Prev Next

→

browser game
Developer User4120｜Date and time 23/7/12 11:18:04
Build time 14.902 sec｜Game capacity 3.323KB｜

Script

了解しました。以下に、簡単なタイピングゲームの例を示します。

タイピングゲーム

スタートボタンを押してスタート！

上記のHTMLファイルは、ブラウザで実行するとタイピングゲームが遊べるようになっています。絵文字を一つずつ表示し、入力された文字列が正解かどうかを判定します。全ての問題に回答し終えると、終了メッセージが表示されます。スタートボタンを押すことでゲームをリセットし、再び遊ぶことができます。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下に、簡単なタイピングゲームの例を示します。

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>タイピングゲーム</title>
    <style>
      body {
        text-align: center;
        font-size: 24px;
      }
    </style>
  </head>
  <body>
    <h1>タイピングゲーム</h1>
    <p id="question">スタートボタンを押してスタート！</p>
    <input type="text" id="answer" disabled>
    <p id="result"></p>

<input type="button" id="startButton" value="START">
    
    <script>
      // ゲームの問題リスト（絵文字）
      const questionList = [
        "🍎", "🍊", "🍇", "🍌", "🥕", "🍓", "🍒", "🍉", "🍑", "🍍"
      ];
      
      // ゲームの現在の問題番号
      let currentQuestion = 0;
      
      // ゲームが終了したかどうかを表すフラグ
      let isFinished = false;
      
      // 問題を表示する関数
      function showQuestion() {
        if (currentQuestion < questionList.length) {
          const questionElement = document.getElementById('question');
          questionElement.textContent = questionList[currentQuestion];
          document.getElementById('answer').disabled = false;
        } else {
          // 問題が全て終了した場合は結果を表示
          document.getElementById('result').textContent = '終了！お疲れさまでした！';
          isFinished = true;
        }
      }
      
      // 入力された文字列が正解かどうかをチェックする関数
      function checkAnswer() {
        if (!isFinished) {
          const userAnswer = document.getElementById('answer').value;
          const correctAnswer = questionList[currentQuestion];
          
          if (userAnswer === correctAnswer) {
            document.getElementById('result').textContent = '正解！次の問題へ！';
            currentQuestion++;
            setTimeout(showQuestion, 1000);
          } else {
            document.getElementById('result').textContent = '不正解！もう一度入力してください。';
          }
          
          document.getElementById('answer').value = '';
        }
      }
      
      // スタートボタンを押した時の処理
      function startGame() {
        currentQuestion = 0;
        isFinished = false;
        document.getElementById('result').textContent = '';
        showQuestion();
      }
      
      // スタートボタンをクリックした時にゲームを開始する
      document.getElementById('startButton').addEventListener('click', startGame);
      
      // 入力された文字列をチェックする
      document.getElementById('answer').addEventListener('keyup', checkAnswer);
    </script>
  </body>
</html>
```