JS实现别踩白块小游戏

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

程序思路:如图:将游戏区域的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();

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

}

游戏扩展:

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

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

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

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

如果您觉得本文对您有帮助,您可以推荐或关注我,如果您有什么问题,可以在下方留言讨论,谢谢。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏行者常至

008.python科学计算库seaborn(上)

版权声明:本文为博主原创文章,允许转载,请标明出处。 https://blog.csdn.net/qwdafedv/article/deta...

832
来自专栏日常学python

WordCloud 中英文词云图绘制,看这一篇就够了

摘要: 当我们手中有一篇文档,比如书籍、小说、电影剧本,若想快速了解其主要内容是什么,则可以采用绘制 WordCloud 词云图,显示主要的关键词(高频词)这种...

2104
来自专栏PPV课数据科学社区

【学习】R语言基础画图

1.plot函数  plot(x,y,xlim=c(0,100),ylim=c(0.4,1), type="o",lwd=2,col=2,pch=24,...

3385
来自专栏hightopo

基于HTML5和WebGL的3D网络拓扑结构图

1893
来自专栏数据小魔方

sparklines迷你图系列4——Evolution(Area)

今天接着分享Evolution图表类型中的Area图表。 其实就是我们常见的区域图(或者叫面积图),它与折线图(昨天讲到的)都是用来呈现时间序列中的趋势走向和波...

2604
来自专栏深度学习自然语言处理

【python】Tkinter窗口可视化二

今天我们举办了送老晚会,不知不觉,毕业是真的近了,还有整整一个月,寝室就不在属于自己了。珍惜眼前的时光,加油,坚持下来,每天进步一丢丢!

802
来自专栏AI研习社

自动文本摘要

摘要的主要思想是找到包含整个集合的“信息”的数据子集。这种技术在今天的工业中被广泛使用。搜索引擎就是一个例子;其他的例子包括文档、图像集合和视频的汇总。文档摘要...

1791
来自专栏数据小魔方

风向玫瑰图

今天要跟大家分享的图表是——风向玫瑰图! 听起来就能大概猜出来这种图表长啥样,就是很类似气象图表中的那种代表风向的方位图。 以下是本案例图表所用到的原始数据以及...

3584
来自专栏CDA数据分析师

技能 | 如何使用Excel数据分析工具进行多元回归分析

使用Excel数据分析工具进行多元回归分析与简单的回归估算分析方法基本相同。但是由于有些电脑在安装办公软件时并未加载数据分析工具,所以从加载开始说起(以Exce...

3178
来自专栏数据小魔方

R语言可视化——REmapB函数

今天跟大家介绍一个REmap包的新函数——REmapB。 它是REmap包中诸多组函数中的一位,功能上要强大于之前介绍的REmap函数,不仅可以完成REmap函...

9244

扫码关注云+社区