javascript实现别踩白块儿小游戏程序


Posted in Javascript onNovember 22, 2015

最近有朋友找我用JS帮忙仿做一个别踩白块的小游戏程序,但他给的源代码较麻烦,而且没有注释,理解起来很无力,我就以自己的想法自己做了这个小游戏,主要是应用JS对DOM和数组的操作。

javascript实现别踩白块儿小游戏程序

程序思路:如图:将游戏区域的CSS设置为相对定位、溢出隐藏;两块“游戏板”上分别排布着24块方格,黑色每行随机产生一个,“游戏板”向下滚动并交替显示,将每个操作板的黑块位置存入数组,每次点击时将数组pop出来进行比对(我觉得亮点在这……)。

这里是游戏的GitHub地址,大家可以到里点击中部菜单最右边的的Download ZIP按钮下载到桌面一试,HTML和JS,无需服务器。

以下是具体实现,关键部分有注释。

HTML部分:

<!DOCTYPE html>

<html>

<head><title>别踩白块</title></head>

<body>

<div id="gameZone"><div id="boardb" style="position: absolute;top: 0px;"></div></div>//初始化一个boardb,使ab同时存在

</body>

</html>

CSS部分:

*{margin: 0px;padding: 0px;box-sizing: border-box;}  //简单的reset一下,并用box-sizing设置盒子尺寸将边框也计算进去,便于后面计算小方块位置
#gameZone{width: 302px;height: 602px;border: 1px solid green;margin: 20px auto;position: relative;overflow: hidden;} //游戏区域,多两个像素是为了除去边框外还有足够的300*600的空间
.square{width: 75px;height: 100px;float: left;border: 1px solid black;}
.squareBlack{width: 75px;height: 100px;border: 1px solid black;float: left;background: black;}//每个小方块为75*100,并且设置黑色小方块的背景色。

JS部分:

 这里分函数介绍:

全局变量初始化

var loc=600;//黑块落地失败判定

var count=0;//初始化击中黑块总数

var locArr=[];//初始化游戏板上黑块位置的

var order=(function(){


var ord="A";



return function(){



if(ord=='boarda')ord='boardb';



else ord='boarda';



return ord;

}

})()

//用闭包函数使每次创建的游戏板的ID为boarda与boardb,其实用一个全局变量也行,不过为了有点逼格。。。

每次点击判定结果的函数

function judge(){


var num=this.id.substr(3)//获取元素的ID号



if(num!=locArr.pop()){ //与位置数组pop出的对比





clearTimeout(timer);





alert("你的得分为:"+count+"分!");





return; //失败清除定时器,结算分数。



}else{





loc+=100; 





this.style.background="silver";





count+=1;//成功将落地标志加方格的高度,将方格背景色改变一下,击中数+1



}



if(count!=0&&count%15==0){





clearTimeout(timer);





newtimer=50-count/15*5;





timer=setInterval('fall()',newtimer);



}//每击中15个后将速度加快一点,这个式子可自行定义。

}

产生大框中小黑框位置的随机数,每次创建游戏板时调用此函数,根据产生数定义小黑块的位置

function generateRand(){


var numArr=[];



for(var j=0;j<6;j++){





var num=Math.floor(Math.random()*4)+j*4;





numArr.push(num);



}



return numArr;

}

每次调用在游戏区域的上方生成一个待往下滚动的游戏板,并将其黑色的部分的数字PUSH进locArr中

function drawBoard(){


var temArr=generateRand();//这里应用一个临时的位置数组,为了防止两块游戏板之间的位置冲突。



locArr=temArr.concat(locArr);//将临时数组相连到全局位置数组中



var board=document.createElement('div');



board.setAttribute('id',order());



board.style.position="absolute";



board.style.top='-600px';



for(var i=0;i<24;i++){





var ele=document.createElement('div');





ele.setAttribute('id',"ele"+i);





if(temArr.indexOf(i)>-1){  //判断当前创建的小方块的ID序列是否属于临时位置数组







ele.setAttribute('class','squareBlack')





}else{







ele.setAttribute('class','square');





}





ele.addEventListener('click',judge,false); //给每一个小方格添加点击判定函数judge





board.appendChild(ele);



}



var gameZone=document.getElementById('gameZone');



gameZone.appendChild(board);

}

找到脚本中存在的两个游戏板,使其往下滚动

function fall(){


gameZone=document.getElementById('gameZone');



var boarda=document.getElementById('boarda');//因为ab两个游戏板全局一直存在,所以不需要定义找不到时的逻辑



var anowtop=parseInt(boarda.style.top);//因为获取到的top位置是xxxpx类型,所以用一个parseInt()将其转换为整数便于处理。



if(anowtop==595){ //这里数目为595而不是600是因为在这一帧删除后,下一帧正好600px,刚好使两块游戏板衔接完好。





gameZone.removeChild(boarda);





drawBoard();//删除游戏区域的游戏板,并在最上方新生成一个。



}



anowtop+=5;



boarda.style.top=anowtop+"px";



var boardb=document.getElementById('boardb');



var bnowtop=parseInt(boardb.style.top);



if(bnowtop==595){





gameZone.removeChild(boardb);





drawBoard();



}



bnowtop+=5;



boardb.style.top=bnowtop+"px";



loc-=5;



if(loc==0){





clearTimeout(timer);





alert("你的得分为:"+count+"分!");





return;



} //每一帧将落地判定减5,当落地判定为0时表示落地,结算分数。

}

将主体调用写在window.onload函数里,使得页面的游戏区域加载完成后再调用函数。

window.onload=function(){


drawBoard();



fall();



var timer=setInterval('fall()',50);

}

游戏扩展:

增加页面UI:因为一开始的HTML特别简单,所以UI也很好修改,设置按钮,点击触发开始函数。

改变游戏难度:修改setInterval的值,也可以对judge函数内的间隔数目进行修改,或将下落加速的表达式优化一下。

增加比分排行等:用ajax连接服务器,在游戏结束后将结果写入数据库,并引用数据中的排行榜。

改为街机模式:去除定时,修改judge函数,使其每次点击游戏板下落一个小方格的高度。设置总数,开始计时,结束计时。

Javascript 相关文章推荐
JavaScript中使用document.write向页面输出内容实例
Oct 16 Javascript
跟我学习javascript的arguments对象
Nov 16 Javascript
微信小程序  action-sheet详解及实例代码
Nov 09 Javascript
Vue基于NUXT的SSR详解
Oct 24 Javascript
使用classList来实现两个按钮样式的切换方法
Jan 24 Javascript
使用webpack搭建vue项目及注意事项
Jun 10 Javascript
JavaScript实现单英文金山打字通
Jul 24 Javascript
原生JS 实现的input输入时表格过滤操作示例
Aug 03 Javascript
layer实现弹出层自动调节位置
Sep 05 Javascript
Vuex中实现数据状态查询与更改
Nov 08 Javascript
js实现QQ邮箱邮件拖拽删除功能
Aug 27 Javascript
Vue+Vant 图片上传加显示的案例
Nov 03 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
Nov 21 #Javascript
jquery实现select选择框内容左右移动代码分享
Nov 21 #Javascript
分享经典的JavaScript开发技巧
Nov 21 #Javascript
jQuery实现分隔条左右拖动功能
Nov 21 #Javascript
超详细的javascript数组方法汇总
Nov 21 #Javascript
javascript实现动态统计图开发实例
Nov 21 #Javascript
js实现索引图片切换效果
Nov 21 #Javascript
You might like
SSI指令
2006/11/25 PHP
php去掉字符串的最后一个字符附substr()的用法
2011/03/23 PHP
探讨:如何使用PhpDocumentor生成文档
2013/06/25 PHP
滚动经典最新话题[prototype框架]下编写
2006/10/03 Javascript
用YUI做了个标签浏览效果
2007/02/20 Javascript
Jquery Uploadify上传带进度条的简单实例
2014/02/12 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
2014/06/16 Javascript
jquery获取选中的文本和值的方法
2014/07/08 Javascript
JS是按值传递还是按引用传递
2015/01/30 Javascript
谈谈impress.js初步理解
2015/09/09 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
2016/07/05 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
轻松掌握JavaScript策略模式
2016/08/25 Javascript
通过 JS 判断页面是否有滚动条的实现方法
2018/04/05 Javascript
CentOS7中源码编译安装NodeJS的完整步骤
2018/10/13 NodeJs
Node.js的进程管理的深入理解
2019/01/09 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
2019/03/30 Javascript
JavaScript实现密码强度实时验证
2020/03/18 Javascript
JavaScript缺少insertAfter解决方案
2020/07/03 Javascript
[40:03]RNG vs VG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
用python实现的可以拷贝或剪切一个文件列表中的所有文件
2009/04/30 Python
python实现textrank关键词提取
2018/06/22 Python
wtfPython—Python中一组有趣微妙的代码【收藏】
2018/08/31 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
Python实现简单石头剪刀布游戏
2021/01/20 Python
Python 实现将numpy中的nan和inf,nan替换成对应的均值
2020/06/08 Python
计算机应用专业推荐信
2013/11/13 职场文书
公司离职证明范本
2014/01/13 职场文书
个人简历中自我评价
2014/02/11 职场文书
cf战队收人广告词
2014/03/14 职场文书
《槐乡五月》教学反思
2014/04/25 职场文书
介绍信格式
2015/01/30 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书
《地震中的父与子》教学反思
2016/02/16 职场文书
Python 中 Shutil 模块详情
2021/11/11 Python
【2·13】一图读懂中国无线电发展
2022/02/18 无线电