原生JS實現點選數字小遊戲

原生js實現點選數字小遊戲，供大家參考，具體內容如下

最近公司在季度測試中出了一道很有趣的測試題，要求使用我們自己的黑科技–IVX來實現,感興趣的朋友可以去了解哦，是真的黑科技，在這裡我還是用原生JS來實現吧，題目是這樣的：

實現一個點選數字的小遊戲：依次點選容器中隨機生成的數字元http://www.cppcns.com素，生成的數字元素會在5S後消失，你將憑藉記憶點選按照數字升序依次點選生成的數字方可通過該關卡遊戲。

話不多說直接看執行效果圖：

原生JS實現點選數字小遊戲

上程式碼：

<!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>點選數字小遊戲</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;
   kaArpMHZH 
     height: 30px;
        background-color: coral;
        border: none;
        outline: none;
      }
    </style>
  </head>
  <body>
    <div class="header">
      <h1>點選數字小遊戲</h1>
      <p>
        5s後數字內容會消失，憑藉你的記憶按照數字升序依次點選數字點可順利通關
      </p>
    </div>
    <div id="cointainer"></div>
    <div class="todo">
      <button onclick="restart(6)">重新開 
程式設計客棧始</button>
      <button style="margin-left: 20px" onclick="nextPass()">下一關</button>
      <button
        style="margin-left: 20px"
        onclick="window.clearInterval(timmer2);window.clearTimeout(timmer1)"
      >
        停止計時
      </button>
      <p>時間</p>
    </div>
  </body>
  <script>
    let circleList = [];
    //circle構造器
    function getPosition() {
      let parm = { x: "",y: "" };
      parm.x = Math.round(Math.random() * 340);
      parm.y = Math.round(Math.random() * 540);
      return parm;
    }
    //建立不重疊circle
    function createCircle(total) {
      if (circleList.length === 0) {
        circleList.push(getPosition());
      }
      //限制建立次數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;
        }
      }
    }
    //建立8個circle
    createCircle(8);
    //隨機顏色選擇器
    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})`;
    }
    //在DOM中建立circle
    let containner = document.getElementById("cointainer");
    //構造關卡
    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();
      }
    }
    //點選答案
    let asw = [];
    //設定5s後開始遊戲
    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("恭喜過關,你的用時為：" + time.toFixed(2) + "s");
              asw = [];
            } else if (asw.length === pass && asw.join("") !== right) {
              asw = [];
              window.clearInterval(timmer2);
              alert("抱歉沒能過關");
            }
          }, 
程式設計客棧       false
        );
      }
    };
    let time = 0;
    let sumTime = function () {
      time = time + 0.01;
      document.querySelectorAll("p")[1].innerText = time.toFixed(2) + "s";
    };
    //初始關卡
    let pass = 6;
    creatGame(pass);
    let timmer1 = setTimeout(start,5000);
    let timmer2 = setInterval(sumTime,10);
    //重新開始
    function restart(nowerPass) {
      while (containner.hasChildNodes()) {
        containner.removeChild(containner.firstChild);
      }
      pass = nowerPass;
      creatGame(nowerPass);
      clearTimeout(timmer1);
      clearInterval(timmer2);
      time = 0;
      timmer1 = setTimeout(start,5000);
      timmer2 = setInterval(sumTime,10);
    }
    //下一關
    function nextPass() {
      if (pass < 20) {
        pass++;
        restart(pass);
      }
    }
  </script>
&l程式設計客棧t;/html>

至此一個很有趣的鍛鍊大腦邏輯的小遊戲分享完畢。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

原生JS實現點選數字小遊戲

原生JS實現點選數字小遊戲

原生JS實現貪吃蛇小遊戲

原生JS實現飛機大戰小遊戲

Java實現猜字小遊戲

js實現雙人五子棋小遊戲

JS實現躲避粒子小遊戲

Demo_2：Qt實現猜字小遊戲

js實現貪吃蛇小遊戲（加牆）

js實現翻牌小遊戲

原生JS實現記憶翻牌遊戲

js實現飛機大戰小遊戲

原生js編寫貪吃蛇小遊戲

用JS實現飛機大戰小遊戲

使用原生js編寫貪吃蛇小遊戲

js實現滑鼠跟隨小遊戲

js實現簡單拼圖小遊戲

用js實現猜數字小遊戲

用JS實現貪吃蛇小遊戲

JS實現消滅星星小遊戲

原生js實現的金山打字小遊戲（例項程式碼詳解）

原生JS實現點選數字小遊戲

相關推薦