原生JS实现点击数字小游戏
更新时间：2021年04月22日 14:55:54 作者：@Coollin
这篇文章主要为大家详细介绍了原生JS实现点击数字小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
原生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阻止事件冒泡和浏览器的默认行为。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
模仿JQuery sortable效果 代码有错但值得看看，因为时间关系，需要的朋友可以参考下。2009-11-11
今天看视频学习时学习了一种新技术，即平时我们在一个页面点击“提交”或“确认”会自动跳转到一个页面,在网上搜了一下，关于这个技术处理有多种方法,有兴趣的朋友可以参考下2013-01-01
map和set一样是关联式容器,它们的底层容器都是红黑树,区别就在于map的值不作为键,键和值是分开的,下面这篇文章主要给大家介绍了关于js中Map和Set的用法及区别的相关资料,需要的朋友可以参考下2022-02-02
以前的版本不能输入退格键等功能。2009-04-04
由于经常需要进行页面间传参且各种传参的业务场景也不相同,根据官方文档和日常工作进行了总结,下面这篇文章主要给大家总结介绍了关于小程序页面之间数据传递的4种方法,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了JavaScript面向对象分层思维，js本身不是面向对象语言,在我们实际开发中其实很少用到面向对象思想。下文关于js面向对象知识给大家介绍的非常详细，感兴趣的朋友一起看看吧2016-11-11
这篇文章主要介绍了删除ID为sNews的索引为JQID的tr元素里的内容,需要的朋友可以参考下2014-04-04
枚举是一种数据结构，它定义了一个有限的具名常量集，每个常量都可以通过其名称来访问，这篇文章主要介绍了JavaScript中的四种枚举方式,需要的朋友可以参考下2023-05-05
这篇文章主要给大家介绍了关于基于three.js编写的一个项目类的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-01-01
最新评论