• 售前

  • 售后

热门帖子
入门百科

原生JS实现点击数字小游戏

[复制链接]
晓晓红青蜓吧 显示全部楼层 发表于 2021-10-26 13:19:57 |阅读模式 打印 上一主题 下一主题
原生JS实现点击数字小游戏,供各人参考,具体内容如下
最近公司在季度测试中出了一道很风趣的测试题,要求利用我们自己的黑科技–IVX来实现,感爱好的朋侪可以去相识哦,是真的黑科技,在这里我照旧用原生JS来实现吧,标题是如许的:
实现一个点击数字的小游戏:依次点击容器中随机天生的数字元素,天生的数字元素会在5S后消散,你将依附影象点击按照数字升序依次点击天生的数字方可通过该关卡游戏。
话不多说直接看运行结果图:

上代码:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>点击数字小游戏</title>
  8.     <style>
  9.       #cointainer {
  10.         margin: auto;
  11.         height: 600px;
  12.         width: 400px;
  13.         background-color: rgb(37, 37, 37);
  14.         position: relative;
  15.       }
  16.       .header {
  17.         width: auto;
  18.         text-align: center;
  19.         margin: auto;
  20.       }
  21.       .parm {
  22.         height: 60px;
  23.         width: 60px;
  24.         border-radius: 30px;
  25.         position: absolute;
  26.         text-align: center;
  27.         line-height: 60px;
  28.       }
  29.       .parm:hover {
  30.         cursor: pointer;
  31.       }
  32.       .todo {
  33.         text-align: center;
  34.         margin-top: 16px;
  35.       }
  36.       button {
  37.         width: 100px;
  38.         height: 30px;
  39.         background-color: coral;
  40.         border: none;
  41.         outline: none;
  42.       }
  43.     </style>
  44.   </head>
  45.   <body>
  46.     <div class="header">
  47.       <h1>点击数字小游戏</h1>
  48.       <p>
  49.         5s后数字内容会消失,凭借你的记忆按照数字升序依次点击数字点可顺利通关
  50.       </p>
  51.     </div>
  52.     <div id="cointainer"></div>
  53.     <div class="todo">
  54.       <button onclick="restart(6)">重新开始</button>
  55.       <button style="margin-left: 20px" onclick="nextPass()">下一关</button>
  56.       <button
  57.         style="margin-left: 20px"
  58.         onclick="window.clearInterval(timmer2);window.clearTimeout(timmer1)"
  59.       >
  60.         停止计时
  61.       </button>
  62.       <p>时间</p>
  63.     </div>
  64.   </body>
  65.   <script>
  66.     let circleList = [];
  67.     //circle构造器
  68.     function getPosition() {
  69.       let parm = { x: "", y: "" };
  70.       parm.x = Math.round(Math.random() * 340);
  71.       parm.y = Math.round(Math.random() * 540);
  72.       return parm;
  73.     }
  74.     //创建不重叠circle
  75.     function createCircle(total) {
  76.       if (circleList.length === 0) {
  77.         circleList.push(getPosition());
  78.       }
  79.       //限制创建次数200
  80.       for (let i = 0; i < 200; i++) {
  81.         if (circleList.length < total) {
  82.           let circle = getPosition();
  83.           let distan = [];
  84.           for (let n = 0; n < circleList.length; n++) {
  85.             let dis =
  86.               Math.abs(circle.x - circleList[n].x) ** 2 +
  87.               Math.abs(circle.y - circleList[n].y) ** 2;
  88.             distan.push(dis);
  89.           }
  90.           if (Math.min(...distan) > 3600) {
  91.             circleList.push(circle);
  92.           }
  93.         } else {
  94.           break;
  95.         }
  96.       }
  97.     }
  98.     //创建8个circle
  99.     createCircle(8);
  100.     //随机颜色选择器
  101.     function selectColor() {
  102.       let r = 100 + Math.round(Math.random() * 155);
  103.       let g = 100 + Math.round(Math.random() * 155);
  104.       let b = 100 + Math.round(Math.random() * 155);
  105.       return `rgb(${r},${g},${b})`;
  106.     }
  107.     //在DOM中创建circle
  108.     let containner = document.getElementById("cointainer");
  109.     //构造关卡
  110.     function creatGame(num) {
  111.       circleList = [];
  112.       createCircle(num);
  113.       for (let i = 0; i < circleList.length; i++) {
  114.         let node = document.createElement("span");
  115.         containner.appendChild(node);
  116.         node.className = "parm";
  117.         node.innerText = i + 1;
  118.         node.style.left = circleList[i].x + "px";
  119.         node.style.top = circleList[i].y + "px";
  120.         node.style.backgroundColor = selectColor();
  121.       }
  122.     }
  123.     //点击答案
  124.     let asw = [];
  125.     //设置5s后开始游戏
  126.     let start = function () {
  127.       let list = document.querySelectorAll("span");
  128.       let right = "";
  129.       for (let i = 0; i < list.length; i++) {
  130.         list[i].innerText = "";
  131.         list[i].number = i + 1;
  132.         right = right + (i + 1);
  133.         list[i].addEventListener(
  134.           "click",
  135.           function () {
  136.             asw.push(list[i].number);
  137.             if (asw.length === pass && asw.join("") === right) {
  138.               window.clearInterval(timmer2);
  139.               alert("恭喜过关,你的用时为:" + time.toFixed(2) + "s");
  140.               asw = [];
  141.             } else if (asw.length === pass && asw.join("") !== right) {
  142.               asw = [];
  143.               window.clearInterval(timmer2);
  144.               alert("抱歉没能过关");
  145.             }
  146.           },
  147.           false
  148.         );
  149.       }
  150.     };
  151.     let time = 0;
  152.     let sumTime = function () {
  153.       time = time + 0.01;
  154.       document.querySelectorAll("p")[1].innerText = time.toFixed(2) + "s";
  155.     };
  156.     //初始关卡
  157.     let pass = 6;
  158.     creatGame(pass);
  159.     let timmer1 = setTimeout(start, 5000);
  160.     let timmer2 = setInterval(sumTime, 10);
  161.     //重新开始
  162.     function restart(nowerPass) {
  163.       while (containner.hasChildNodes()) {
  164.         containner.removeChild(containner.firstChild);
  165.       }
  166.       pass = nowerPass;
  167.       creatGame(nowerPass);
  168.       clearTimeout(timmer1);
  169.       clearInterval(timmer2);
  170.       time = 0;
  171.       timmer1 = setTimeout(start, 5000);
  172.       timmer2 = setInterval(sumTime, 10);
  173.     }
  174.     //下一关
  175.     function nextPass() {
  176.       if (pass < 20) {
  177.         pass++;
  178.         restart(pass);
  179.       }
  180.     }
  181.   </script>
  182. </html>
复制代码
至此一个很风趣的锻炼大脑逻辑的小游戏分享完毕。
以上就是本文的全部内容,盼望对各人的学习有所资助,也盼望各人多多支持脚本之家。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作