原生JS實現點擊數字小游戲，供大家參考，具體內容如下
最近公司在季度測試中出了一道很有趣的測試題，要求使用我們自己的黑科技–IVX來實現,感興趣的朋友可以去了解哦，是真的黑科技，在這里我還是用原生JS來實現吧，題目是這樣的：
實現一個點擊數字的小游戲：依次點擊容器中隨機生成的數字元素，生成的數字元素會在5S后消失，你將憑借記憶點擊按照數字升序依次點擊生成的數字方可通過該關卡游戲。
話不多說直接看運行效果圖：
上代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
|
<!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},$)`; } //在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> |
至此一個很有趣的鍛煉大腦邏輯的小游戲分享完畢。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/qq_44170536/article/details/115960438
