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函数,使其每次点击游戏板下落一个小方格的高度。设置总数,开始计时,结束计时。
如果您觉得本博文对您有帮助,您可以推荐或关注我,如果您有什么问题,可以在下方留言讨论,谢谢。
JS实现别踩白块小游戏的更多相关文章
- jquery 简单的别踩白块小游戏
写写简单的东西,效果如图: 1.html代码 <div class="warp"> <div class="title"> <h3 ...
- C++ 别踩白块小游戏练习
#include <iostream> #include <stdio.h> #include <stdlib.h> #include <easyx.h> ...
- 用javascript做别踩白块游戏1
初学Javascript做的一个别踩白块小游戏,代码简陋,如下: <!DOCTYPE html> <html> <head> <!-- 禁用缩放功能 --&g ...
- jquery之别踩白块游戏的实现
转载请注明出处http://www.cnblogs.com/Wxtrkbc/p/5687112.html 前端学习要告一段落了,也没机会写什么像样的东西,然后无意中想起某人以前给我玩了一下别踩白块的游 ...
- ios-高仿别踩白块游戏的实现
先看下效果图片 前几天看到一个游戏叫别踩白块,下载量还挺大几百万了都,下载下来玩了玩看了看,这个游戏还挺简单的.俗话说想一千遍,一万遍不如动手做一遍来的实在.昨晚以及今天白天闲的没事就开搞了,下午六点 ...
- cocos2dx游戏开发——别踩白块学习笔记(二)——经典模式的实现
一.创建GameScene以及GameLayer 就是简单创建一个Scene而已,在此就不多说啦~,可以参照我的打飞机的学习笔记(2). 二.添加一个开始栏 很简单,就是调用Block中的create ...
- 用javascript做别踩白块游戏2
这一次做一个好一点的,要求黑块自动下落,且速度逐渐加快 <!DOCTYPE html> <html> <head> <!-- 禁用缩放功能 --> &l ...
- C++用EGE简单实现别踩白块游戏
本项目已开源:https://github.com/wmpscc/AvoidBlank 关于EGE 介绍:EGE(Easy Graphics Engine),是windows下的简易绘图库,是一个类似 ...
- Cocos2d-x 3.2 之 别踩白块(第三篇)
***************************************转载请注明出处:http://blog.csdn.net/lttree************************** ...
随机推荐
- PHP中利用GD实现的柱状图
PHP中利用GD实现的柱状图,自己写的一个画柱状图的类,上代码. <?php Class Chart{ private $image; // 定义图像 private $title; // 定义 ...
- 展示 Popup 的使用方法
源码下载:[原创]展示Popup的使用方法.zip
- how-to-redirect-cin-and-cout-to-files
#include <iostream> #include <fstream> #include <string> void f() { std::string li ...
- Scalaz(47)- scalaz-stream: 深入了解-Source
scalaz-stream库的主要设计目标是实现函数式的I/O编程(functional I/O).这样用户就能使用功能单一的基础I/O函数组合成为功能完整的I/O程序.还有一个目标就是保证资源的安全 ...
- 习题:codevs 2822 爱在心中 解题报告
这次的解题报告是有关tarjan算法的一道思维量比较大的题目(真的是原创文章,希望管理员不要再把文章移出首页). 这道题蒟蒻以前做过,但是今天由于要复习tarjan算法,于是就看到codevs分类强联 ...
- 双重OAuth 2.0架构
OAuth 2.0支持几种grant type,由于安全性不同,所以适用范围也不同.背景知识:<理解OAuth 2.0> grant type 是否需要secret 是否出现授权界面 授权 ...
- web桌面程序之锁屏功能分析
这是一个在操作系统里比较常见的功能,但在web里实现,有哪些需要注意的呢? 1.如何真正的实现锁屏? 2.如何避免通过技术手段绕过锁屏? 我个人总结出2点需要特别注意的地方,下面就分别进行分析. 第一 ...
- C语言之字符串处理函数
C语言中字符串处理函数介绍 下面介绍8种基本的常用的字符串处理函数,在数值数组中也常常用到(部分函数).所有的C语言编译系统中一般都提供这些函数. 1.puts函数——输出字符串的函数 一般的形式为p ...
- PNotify – 简单易用的 JS 通知,消息提示插件
PNotify 是一个 JavaScript 通知插件,前身为 Pines Notify.它旨在提供无与伦比的灵活性,同时很容易使用.它可以提供无阻塞的通知,允许用户无需关闭通知或者提示信息就可以点击 ...
- SharePoint 2013 Designer 自定义操作菜单
众所周知,我们在SharePoint的二次开发中,经常会添加ECB菜单或者Ribbon菜单,通常我们会采取Feature的方式去添加一个Xml,或者采取JavaScript的方式,当然,除此之外,还可 ...