【杂谈】原生JS完成别踩白块小游戏(二)
2019-11-18杂谈搜奇网47°c
A+ A-
原生JS完成别踩白块小游戏的要领,我们在前面的文章中已给人人简朴的分享引见过了。那末对于此游戏的细致完成思绪,可能有部份朋侪还不太清晰。
下面我们就连系别踩白块小游戏的源代码,给人人逐渐细致引见细致的完成要领。
源代码参考:《原生JS完成别踩白块小游戏(一)》
起首我们带人人了解下,游戏源代码中HTML团体的框架结构。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>别踩白块小游戏</title> </head> <style...> <body> <div class="box"> <div id="cont"> <div id="go"> <span>点击最先</span> </div> <div id="main"></div> </div> <div id="count"></div> </div> </body> <script...> </html>
上述代码中,body中创建了一个大的div(box),在这个div中,包括了两个小div(id为cont和id为count),“cont”部份是包括游戏动画的内容,“count”部份则是用于游戏计数显现。
“count”部份以下所示:
那末在cont中,又包括两个div(id为go和main)。
游戏内容地区实际上是在id为main的div中。当我们点击最先游戏时,挪动的是全部内容地区,而并不是零丁一行。
从上图中我们能够发明“go”和“main”地区大小雷同,这里我们会初始化main,使“go”和“main”同时存在,也就是给main增加一个top属性,经由过程转变top属性来完成全部游戏地区不停着落的结果。
那末“go”和“main”的同时设置,也是为了推断游戏举行地胜利或失利(是不是点击了白块)。
因为篇幅的缘由,本篇文章就先给人人引见了别踩白块小游戏中的HTML代码部份,也很通俗易懂,那末在后期的文章中,我们会继承为人人剖析别踩白块小游戏的细致代码。
以上就是原生JS完成别踩白块小游戏(二)的细致内容,更多请关注ki4网别的相干文章!