Native JS to implement click number game

Native JS implements the click number game for your reference. The specific content is as follows

Recently, the company has issued a very interesting test question in the quarterly test, requiring the use of our own black technology-IVX to implement it. Friends who are interested can go and learn about it. It is really black technology. Here I will still use native JS to implement it. The question is as follows:

Implement a small game of clicking numbers: click the randomly generated digital elements in the container one by one. The generated digital elements will disappear after 5S. You will use your memory to click the generated numbers in ascending order to pass the level game.

Without further ado, let’s take a look at the running effect diagram:

Above code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Click on the numbers game</title>
    <style>
      #cointainer {
        margin: auto;
        height: 600px;
        width: 400px;
        background-color: rgb(37, 37, 37);
        position: relative;
      }
      .header {
        width: auto;
        text-align: center;
        margin: auto;
      }
      .parm {
        height: 60px;
        width: 60px;
        border-radius: 30px;
        position: absolute;
        text-align: center;
        line-height: 60px;
      }
      .parm:hover {
        cursor: pointer;
      }
      .todo {
        text-align: center;
        margin-top: 16px;
      }
      button {
        width: 100px;
        height: 30px;
        background-color: coral;
        border: none;
        outline: none;
      }
    </style>
  </head>
  <body>
    <div class="header">
      <h1>Click on the numbers game</h1>
      <p>
        The digital content will disappear after 5 seconds. You can pass the level by clicking the digital points in ascending order based on your memory.</p>
    </div>
    <div id="cointainer"></div>
    <div class="todo">
      <button onclick="restart(6)">Restart</button>
      <button style="margin-left: 20px" onclick="nextPass()">Next level</button>
      <button
        style="margin-left: 20px"
        onclick="window.clearInterval(timmer2);window.clearTimeout(timmer1)"
      >
        Stop timer</button>
      <p>Time</p>
    </div>
  </body>
  <script>
    let circleList = [];
    //circle constructor function getPosition() {
      let parm = { x: "", y: "" };
      parm.x = Math.round(Math.random() * 340);
      parm.y = Math.round(Math.random() * 540);
      return parm;
    }
    //Create non-overlapping circles
    function createCircle(total) {
      if (circleList.length === 0) {
        circleList.push(getPosition());
      }
      //Limit the number of creations to 200
      for (let i = 0; i < 200; i++) {
        if (circleList.length < total) {
          let circle = getPosition();
          let distan = [];
          for (let n = 0; n < circleList.length; n++) {
            let dis =
              Math.abs(circle.x - circleList[n].x) ** 2 +
              Math.abs(circle.y - circleList[n].y) ** 2;
            distan.push(dis);
          }
          if (Math.min(...distan) > 3600) {
            circleList.push(circle);
          }
        } else {
          break;
        }
      }
    }
    //Create 8 circles
    createCircle(8);
    //Random color selector function selectColor() {
      let r = 100 + Math.round(Math.random() * 155);
      let g = 100 + Math.round(Math.random() * 155);
      let b = 100 + Math.round(Math.random() * 155);
      return `rgb(${r},${g},${b})`;
    }
    //Create a circle in the DOM
    let containner = document.getElementById("cointainer");
    //Construct level function creatGame(num) {
      circleList = [];
      createCircle(num);
      for (let i = 0; i < circleList.length; i++) {
        let node = document.createElement("span");
        containner.appendChild(node);
        node.className = "parm";
        node.innerText = i + 1;
        node.style.left = circleList[i].x + "px";
        node.style.top = circleList[i].y + "px";
        node.style.backgroundColor = selectColor();
      }
    }
    //Click on the answer let asw = [];
    //Set to start the game after 5 seconds let start = function () {
      let list = document.querySelectorAll("span");
      let right = "";
      for (let i = 0; i < list.length; i++) {
        list[i].innerText = "";
        list[i].number = i + 1;
        right = right + (i + 1);
        list[i].addEventListener(
          "click",
          function () {
            asw.push(list[i].number);
            if (asw.length === pass && asw.join("") === right) {
              window.clearInterval(timmer2);
              alert("Congratulations! Your time is: " + time.toFixed(2) + "s");
              asw = [];
            } else if (asw.length === pass && asw.join("") !== right) {
              asw = [];
              window.clearInterval(timmer2);
              alert("Sorry, I failed");
            }
          },
          false
        );
      }
    };
    let time = 0;
    let sumTime = function () {
      time = time + 0.01;
      document.querySelectorAll("p")[1].innerText = time.toFixed(2) + "s";
    };
    //Initial level let pass = 6;
    createGame(pass);
    let timmer1 = setTimeout(start, 5000);
    let timmer2 = setInterval(sumTime, 10);
    //Restart function restart(nowerPass) {
      while (containner.hasChildNodes()) {
        containner.removeChild(containner.firstChild);
      }
      pass = nowerPass;
      createGame(nowerPass);
      clearTimeout(timmer1);
      clearInterval(timmer2);
      time = 0;
      timmer1 = setTimeout(start, 5000);
      timmer2 = setInterval(sumTime, 10);
    }
    //Next level function nextPass() {
      if (pass < 20) {
        pass++;
        restart(pass);
      }
    }
  </script>
</html>

This concludes the sharing of a very interesting little game that exercises your brain’s logic.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: