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:
|
<<: How to clean up Alibaba Cloud MySQL space
>>: Detailed example of clearing tablespace fragmentation in MySQL
Recommend
Summary of some related operations of Linux scheduled tasks
I have searched various major websites and tested...
Using cursor loop to read temporary table in Mysql stored procedure
cursor A cursor is a method used to view or proce...
Mysql classic high-level/command line operation (quick) (recommended)
Since I need to learn how to build servers and da...
Difference between var and let in JavaScript
Table of contents 1. Scopes are expressed in diff...
Vue3.0 project construction and usage process
Table of contents 1. Project construction 2: Dire...
MySQL5.7+ MySQL Workbench installation and configuration method graphic tutorial under MAC
This article mainly focuses on the installation a...
TypeScript installation and use and basic data types
The first step is to install TypeScript globally ...
MYSQL implements ranking and querying specified user ranking function (parallel ranking function) example code
Preface This article mainly introduces the releva...
Learn the common methods and techniques in JS arrays and become a master
Table of contents splice() Method join() Method r...
Common solutions for Mysql read-write separation expiration
The pitfalls of MySQL read-write separation The m...
Vue component library ElementUI realizes the paging effect of table list
ElementUI implements the table list paging effect...
Detailed explanation of Xshell common problems and related configurations
This article introduces common problems of Xshell...
Detailed explanation of four solutions for implementing in-line scrolling on mobile devices
Discovering Needs If only part of an area is allo...
WeChat applet realizes linkage menu
Recently, in order to realize the course design, ...
Detailed explanation of three ways to cut catalina.out logs in tomcat
1. Log4j for log segmentation 1) Prepare three pa...