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

No:36739

あ、い、う、え、お、か、き、く、け、こ、さ、し、す、せ、そ、た、ち、つ、て、と、な、に、ぬ、ね、の、..ALL
Developer User16795｜Date and time 24/1/18 9:46:28
Build time 8.903 sec｜Game capacity 2.035KB｜

Script

タイピングゲーム

←

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 {
      text-align: center;
    }
    #display {
      width: 200px;
      margin: 0 auto;
      font-size: 24px;
      background-color: #eee;
      padding: 10px;
      margin-bottom: 10px;
    }
    #buttons {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
    }
    .button {
      width: 50px;
      height: 50px;
      margin: 5px;
      font-size: 20px;
    }
    #clear {
      width: 50px;
      height: 50px;
      margin: 5px;
      font-size: 20px;
      background-color: #ff0000;
      color: #fff;
    }
  </style>
</head>
<body>
  <h1>タイピングゲーム</h1>
  <div id="display"></div>
  <div id="buttons"></div>

const display = document.getElementById("display");
    const buttonsContainer = document.getElementById("buttons");
    const clearButton = document.createElement("div");
    clearButton.innerText = "消す";
    clearButton.classList.add("button");
    clearButton.id = "clear";

let inputCharacters = "";

buttons.forEach(button => {
      const buttonElement = document.createElement("div");
      buttonElement.innerText = button;
      buttonElement.classList.add("button");
      buttonElement.addEventListener("click", () => {
        inputCharacters += button;
        display.innerText = inputCharacters;
      });
      buttonsContainer.appendChild(buttonElement);
    });

clearButton.addEventListener("click", () => {
      inputCharacters = "";
      display.innerText = "";
    });
    buttonsContainer.appendChild(clearButton);
  </script>
</body>
</html>