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

2024-07-31 04:01:29

原生JS实现点击数字小游戏，供大家参考，具体内容如下

最近公司在季度测试中出了一道很有趣的测试题，要求使用我们自己的黑科技–IVX来实现,感兴趣的朋友可以去了解哦，是真的黑科技，在这里我还是用原生JS来实现吧，题目是这样的：

实现一个点击数字的小游戏：依次点击容器中随机生成的数字元素，生成的数字元素会在5S后消失，你将凭借记忆点击按照数字升序依次点击生成的数字方可通过该关卡游戏。

话不多说直接看运行效果图：

上代码：

<!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;
        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>
</html>

至此一个很有趣的锻炼大脑逻辑的小游戏分享完毕。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

基于JavaScript实现简单扫雷游戏

对于10年前的人来说,扫雷肯定是家喻户晓,由于当时的科技并不是很发达,大家对于电脑游戏的了解,可能都是从扫雷开始的,今天就交大家一种用js原生代码写一个简单的扫雷游戏,话不多说,直接上干货: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wid
原生js实现自定义难度的扫雷游戏

本文实例为大家分享了js实现扫雷游戏的具体代码,供大家参考,具体内容如下游戏功能: 1.有四个难度 2.可以自定难度 1.html相关代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-
js实现贪吃蛇游戏含注释

本文实例为大家分享了js实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下两个小时完成的,有点简陋. 直接看效果.打开调试面板,在resource面板,新建snippet 粘贴以下代码,右键snippet,run. clearInterval(timer); document.body.innerHTML = ""; //每秒移动多少格 let speed = 10; let speedUpMul = 3; //是否能穿墙 let isThroughTheWall = true; /
JavaScript实现打字游戏

本文实例为大家分享了JavaScript实现打字游戏的具体代码,供大家参考,具体内容如下效果图: 需求分析: 1.在char这个div里面显示要输入的字母,大写 2.在result这个div里面时时显示正确率,比如98% 3.给文档绑定按键事件 4.如果输入的内容和char里面一致,显示正确动画:animated zoomIn,并更换输入的字母 5.如果输入的内容和char里面不一致,显示错误动画:animated shake error 6.不管是正确还是错误都时时更新result里面的正确
javascript实现拼图游戏

本文实例为大家分享了javascript实现拼图游戏的具体代码,供大家参考,具体内容如下 <div id="container">  <div id="game">  <div id="d1" onclick="move(1)">1</div> <!--小DIV,也就是
JavaScript 实现生命游戏

目录概念介绍逻辑规则完整代码主要实现概念介绍元胞自动机(Cellular Automata),是 20 世纪 50 年代初由计算机之父冯·诺依曼(John von Neumann)为了模拟生命系统所具有的自复制功能而提出来的. 生命游戏(Game of Life),或者叫它的全称 John Conway's Game of Life,是英国数学家约翰·康威在 1970 年代所发明的一种元胞自动机. 逻辑规则在二维平面方格里,每个细胞有两种状态:存活或死亡,而下一时刻的状态完全受它周
如何利用JavaScript编写一个格斗小游戏

拖延症晚期的我原本计划趁着周末写个年终总结,但是一直没有什么思路,想来想去也没想到要写啥就胡乱写了这么一个小东西. 一直比较痴迷游戏行业,可能我不太适合做前端,应该去学C++.... 首先当然是选择一张背景图,作为整个场景中的地图,而且要大要高清.布局到页面中. 然后通过可视区值展示这张图片的一小部分.我这里用的是宽600,高420的,超出直接隐藏掉. width: 600px; height: 420px; 这样一个简单的场景就写好了,接着我们需要在这个场景中加入我们的人物.也就是游戏中的角色
原生js实现2048小游戏

2048小游戏,供大家参考,具体内容如下首先2048小游戏离不开16个格子,我们通过html和css创建好对应的标签和样式,然后开始js逻辑 <div id="box">//一个盒子里面16个小div <div id="son"></div> <div id="son"></div> <div id="son"></div> <div
用js实现拼图小游戏

本文实例为大家分享了js实现拼图小游戏的具体代码,供大家参考,具体内容如下一.js拼图是什么? 用js做得小游戏二.使用步骤 1.先创建div盒子 <style> div,body{ margin: 0; height: 0; } #box{ width: 800px; height: 800px; background-color: burlywood; position: relative; } #box div { width: 200px; height: 200px; backg
原生JS实现点击数字小游戏

原生JS实现点击数字小游戏,供大家参考,具体内容如下最近公司在季度测试中出了一道很有趣的测试题,要求使用我们自己的黑科技–IVX来实现,感兴趣的朋友可以去了解哦,是真的黑科技,在这里我还是用原生JS来实现吧,题目是这样的: 实现一个点击数字的小游戏:依次点击容器中随机生成的数字元素,生成的数字元素会在5S后消失,你将凭借记忆点击按照数字升序依次点击生成的数字方可通过该关卡游戏. 话不多说直接看运行效果图: 上代码: <!DOCTYPE html> <html lang="en
原生js实现贪食蛇小游戏的思路详解

先不多说先上图下面是代码部分(这里你可以根据需要改变蛇头和身体还有食物的图片,然后默认的样式是使用纯颜色的如果没有更改我的背景图片的话------改这些图开始是想搞笑一下朋友哈哈哈,请不要在意哈),还有操作键是使用 ↑ ↓ ← → ) <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>贪食蛇</title>
原生js实现Flappy Bird小游戏

这是一个特别简单的用原生js实现的一个小鸟游戏,比较简单,适合新手练习. html结构 <div id="game"> <div id="bird"></div> </div> css样式 #game { width: 800px; height: 600px; border: 1px solid #000; background: url(images/sky.png); overflow: hidden; posi
原生js编写贪吃蛇小游戏

本文实例为大家分享了js编写贪吃蛇小游戏的具体代码,供大家参考,具体内容如下刚学完js模仿着教程,把自己写的js原生小程序. HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&g
原生JS面向对象实现打字小游戏

本文实例为大家分享了JS面向对象实现打字小游戏的具体代码,供大家参考,具体内容如下 Demo介绍通过键盘点击下落小球所显示的数字,小球刷新再任意位置重新掉落.并且,每五个球后掉落速度加快小球刷新位置大小,颜色随机.用面向对象class方法实现该demo源码可直接使用.赋值到html文件然后打开就可以使用,可用作学校课设使用源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset
原生JS实现贪吃蛇小游戏

本文实例为大家分享了JS实现贪吃蛇小游戏的具体代码,供大家参考,具体内容如下思路:在页面上添加一个地图,以提供边界,在地图中随机出现食物,给蛇身设置一个初始长度,用键盘方向键控制蛇的走向,当蛇触碰到食物时(既坐标重复时),增加蛇身长度,碰到墙壁或自身时,程序停止,游戏结束. HTML结构: <body> <div id="map"></div> </body> CSS样式: <style> #map{ width: 600p
原生JS实现飞机大战小游戏

本文实例为大家分享了JS实现飞机大战小游戏的具体代码,供大家参考,具体内容如下 <html> <head> <title> 飞机大战 </title> <style type="text/css"> *{margin:0;padding:0;font-family:"Microsoft yahei"} body{overflow:hidden;;} </style> </head>
原生javascript制作贪吃蛇小游戏的方法分析

本文实例讲述了原生javascript制作贪吃蛇小游戏的方法.分享给大家供大家参考,具体如下:     HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta char
基于JS实现接粽子小游戏的示例代码

目录游戏设计游戏实现添加粽子元素粽子掉落难度选择开始游戏总结端午节马上就到了,听说你们公司没发粽子大礼包?没关系,这里用 JS 实现了一个简单的接粽子小游戏,能接到多少粽子,完全看你手速,不用担心端午没粽子了. 游戏设计在游戏屏幕内,会随机的从顶部掉落粽子,通过鼠标移动到粽子上并点击,成功接住粽子,得到积分.在设置面板中,可以设置游戏难度,分为简单.很难.超级难三种等级,不同等级的积分也是不同的,玩家可根据自己的手速进行设置.游戏结束后,可看到自己的成绩.实现出来的效果如下(可
使用vue.js编写蓝色拼图小游戏

之前在网上看到<蓝色拼图>这款小游戏,作者是用jquery写的.于是便考虑能不能用vue.js优雅简单的编写出来呢? Later equals never!说干就干.首先理解游戏的规则:第一关为1*1的方块,第二关为2*2以此类推该图为第三关3*3的方块.点击一个小方块,该方块和它相邻的方块的的颜色会从黄色变为蓝色,全部变为蓝色就过关了. 现在规则清楚了,开动吧! /*style*/ .game_bg{ background: #333; width: 600px; height: 600p

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

相关推荐

随机推荐