function delrow(){
var con = $('con');
if(con.childNodes.length == 6) {
con.removeChild(con.lastChild);
}
}
//创建一个类名的数组，其中一个为cell black, 其余为cell
function creatcell(){
var temp = ['cell', 'cell', 'cell', 'cell',];
var i = Math.floor(Math.random()*4);//随机生成黑块的位置
temp[i] = 'cell black';
return temp;
}
让黑块动起来
在可以通过 js 来创造和销毁 div 后，我们就要让黑块动起来，这个时候我们就用到了之前css提到的设定
隐藏了一行的
，我们通过 js 的 DOM
操作使其向下方移动，并设置定时器每30毫秒移动一次，这样就实现了黑块的平滑移动，在黑块移动的同时，我们要判断黑块是否已经触底，触底则游戏失败，停止调用
move()，触底后调用函数 fail() 游戏失败，具体方法如下：
网站名称：怎么实现网页版别踩白块游戏
分享URL：http://www.cdkjz.cn/article/jecpdi.html
//使黑块向下移动
function move(){
var con = $('con');
var top = parseInt(window.getComputedStyle(con, null)['top']);
if(speed + top > 0){
top = 0;
}else{
top += speed;
}
con.style.top = top + 'px';
if(top == 0){
createrow();
con.style.top = '-100px';
delrow();
}else if(top == (-100 + speed)){
var rows = con.childNodes;
if((rows.length == 5) && (rows[rows.length-1].pass !== 1) ){
fail();
}
}
}
function fail(){
clearInterval(clock);
confirm('你的最终得分为 ' + parseInt($('score').innerHTML) );
}
点击黑块事件
让黑块动起来之后呢，就要考虑用户有没有点击到黑块，用户若点击到黑块我们要让所在那一行消失，那么就需要一个 judge 方法，具体如下：
//判断用户是否点击到了黑块，
function judge(ev){
if (ev.target.className.indexOf('black') != -1) {
ev.target.className = 'cell';
ev.target.parentNode.pass = 1; //定义属性pass，表明此行row的黑块已经被点击
score();
}
}这一步，几个核心的功能点都已经实现了，剩下来的就是将这些方法组合起来，组成完整的逻辑关系。
完整代码
别踩白块
score
0
以上是怎么实现网页版别踩白块游戏的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！
网站名称：怎么实现网页版别踩白块游戏
分享URL：http://www.cdkjz.cn/article/jecpdi.html