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

No:1341

110

←

Prev Next

→

flaxen
Developer User3232｜Date and time 23/6/18 11:34:44
Build time 26.376 sec｜Game capacity 2.863KB｜

Script

残り時間を競うシンプルなタイピングゲームを作ります。アプリは1枚のhtmlファイルにJavaScriptを含んでいます。ゲームの流れ: 1. スタートボタンをタップするとカウントダウンが始まります。 2. ゲームスタート! 3. 画面上に表示される単語を入力してエンターを押してください。正解すると次の単語が表示されます。 4. 60秒間が経過すると、画面上に結果が表示されます。アプリでは、絵文字を多用することでスマホでもわかりやすいようにしました。プログラムの一部を示します:

タイピングゲーム

スマホで遊ぶ際は、画面サイズに合わせてレイアウトが調整されます。また、タッチ操作にも対応しています。

←

Prev　Next

→ 　

Back　

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

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

残り時間を競うシンプルなタイピングゲームを作ります。アプリは1枚のhtmlファイルにJavaScriptを含んでいます。

ゲームの流れ:
1. スタートボタンをタップするとカウントダウンが始まります。
2. ゲームスタート!
3. 画面上に表示される単語を入力してエンターを押してください。正解すると次の単語が表示されます。
4. 60秒間が経過すると、画面上に結果が表示されます。

アプリでは、絵文字を多用することでスマホでもわかりやすいようにしました。

プログラムの一部を示します:

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>タイピングゲーム</title>
  </head>
  <body>
    <h1>タイピングゲーム</h1>
    <p id="countdown"></p>
    <p id="word"></p>
    <input type="text" id="inputWord" />
    <button id="startButton">スタート</button>
    <p id="result"></p>
    <script>
      const words = ["apple", "banana", "cherry", "orange", "grape", "melon"];
      let timer;
      let timeLeft = 60;
      let wordCount = 0;
      let correctCount = 0;
      let isPlaying = false;
      const countdownElement = document.getElementById("countdown");
      const wordElement = document.getElementById("word");
      const inputElement = document.getElementById("inputWord");
      const resultElement = document.getElementById("result");
      const startButton = document.getElementById("startButton");
      startButton.addEventListener("click", () => {
        if (isPlaying) return;
        isPlaying = true;
        startButton.style.display = "none";
        timer = setInterval(() => {
          timeLeft--;
          countdownElement.textContent = `残り時間: ${timeLeft}秒`;
          if (timeLeft <= 0) {
            clearInterval(timer);
            isPlaying = false;
            inputElement.style.display = "none";
            wordElement.style.display = "none";
            resultElement.textContent = `時間切れ! 正解率: ${(
              (correctCount / wordCount) *
              100
            ).toFixed(2)}%`;
          }
        }, 1000);
        nextWord();
      });

function nextWord() {
        const index = Math.floor(Math.random() * words.length);
        wordElement.textContent = words[index];
        wordCount++;
      }

inputElement.addEventListener("keyup", (event) => {
        if (event.keyCode === 13) {
          if (inputElement.value === wordElement.textContent) {
            inputElement.value = "";
            nextWord();
            correctCount++;
          }
        }
      });
    </script>
  </body>
</html>
```

スマホで遊ぶ際は、画面サイズに合わせてレイアウトが調整されます。また、タッチ操作にも対応しています。