位置: 编程技术 - 正文
javascript实现别踩白块儿小游戏程序(js实现fizzbuzz)
编辑：rootadmin推荐整理分享javascript实现别踩白块儿小游戏程序(js实现fizzbuzz)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:javascript编写,js实现dialog,用js实现类的方法,javascript怎么弄,javascript怎么弄,javascript怎么弄,js实现dialog,javascript怎么弄,内容如对您有帮助，希望把文章链接给更多的朋友！
最近有朋友找我用JS帮忙仿做一个别踩白块的小游戏程序，但他给的源代码较麻烦，而且没有注释，理解起来很无力，我就以自己的想法自己做了这个小游戏，主要是应用JS对DOM和数组的操作。
程序思路：如图：将游戏区域的CSS设置为相对定位、溢出隐藏;两块“游戏板”上分别排布着块方格，黑色每行随机产生一个，“游戏板”向下滚动并交替显示，将每个操作板的黑块位置存入数组，每次点击时将数组pop出来进行比对（我觉得亮点在这……）。
这里是游戏的GitHub地址，大家可以到里点击中部菜单最右边的的Download ZIP按钮下载到桌面一试，HTML和JS，无需服务器。
下载地址
以下是具体实现，关键部分有注释。
HTML部分:
CSS部分：
JS部分：
这里分函数介绍：
全局变量初始化
//用闭包函数使每次创建的游戏板的ID为boarda与boardb，其实用一个全局变量也行，不过为了有点逼格。。。
每次点击判定结果的函数
产生大框中小黑框位置的随机数，每次创建游戏板时调用此函数，根据产生数定义小黑块的位置
每次调用在游戏区域的上方生成一个待往下滚动的游戏板，并将其黑色的部分的数字PUSH进locArr中
找到脚本中存在的两个游戏板，使其往下滚动
将主体调用写在window.onload函数里，使得页面的游戏区域加载完成后再调用函数。
游戏扩展:
增加页面UI：因为一开始的HTML特别简单，所以UI也很好修改，设置按钮，点击触发开始函数。
改变游戏难度：修改setInterval的值，也可以对judge函数内的间隔数目进行修改，或将下落加速的表达式优化一下。
增加比分排行等：用ajax连接服务器，在游戏结束后将结果写入数据库，并引用数据中的排行榜。
改为街机模式：去除定时，修改judge函数，使其每次点击游戏板下落一个小方格的高度。设置总数，开始计时，结束计时。
js实现简单计算器 参考部分资料，编写一个简单的计算器案例，虽然完成了正常需求，但是也有不满之处，待后续实力提升后再来补充，先把不足之处列出：1：本来打算
js 右侧浮动层效果实现代码(跟随滚动) 实现代码一、!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""htmlheadmetahttp-equiv="Content-Type"content="text/html;charset=gb"/title无标题文档/title!--***********开始********
Bootstrap每天必学之表格 本文主要讲解的是表格，这个其实对于做过网站的人来说，并不陌生，而且可以说是最为常用的各种列表的展示，有时候也会因为用户或者老板的需求
标签: js实现fizzbuzz
本文链接地址:https://www.jiuchutong.com/biancheng/385469.html 转载请保留说明！上一篇：分享经典的JavaScript开发技巧(javascripr)
下一篇：js实现简单计算器(如何用js实现一个简单的计算器)
