初学JS——利用JS制作的别踩白块儿（街机模式） 小游戏 - 连殇 - 推酷
初学JS——利用JS制作的别踩白块儿（街机模式） 小游戏 - 连殇
这个是上个星期5写的了，当时是突然想写个游戏，就想到了别踩白块儿，当时的想法是
可能普通模式的别踩白块儿因为他的“块儿”是滚动的向上这种，以我目前会的技术想不出怎么写，
但是如果是街机模式，通过你每按一次按键之后他像下跳一格这样的就非常好实现了。
通过我目前会的知识，实现的步骤大概是这样的：
建一个4X4的表格，制作2张150X100的图片，一张全白色，一张全黑色，命名为0.JPG,1.JPG
就是说当文件名为0的时候就是白色的块，为1的时候就是黑色的块。
然后先用白色的图片填充表格内所有的TD。然后通过获取表格内的TAGNAME：
　　x=document.getElementById(&biao&);//不要吐槽我的命名方式→_→
　　x1=x.getElementsByTagName(&img&);
这样就可以获取一个图片的数组，这样表格从上到下图片分别是x1[0]至x1[15]。
接着是我从百度找的一个获取随机数的方法：
function fRandomBy(under, over)
//获取随机数方法
switch(arguments.length)
case 1: return parseInt(Math.random()*under+1);
case 2: return parseInt(Math.random()*(over-under+1) + under);
default: return 0;
调用函数通过fRandomBy(最小数，最大数)可以获取指定范围内的一个随机数。
然后就可以声明4个int变量line1,line2,line3,line4 代表表格内的第一行第二行第三行第四行，每行内图片数组的序号就是0-3,4-7,8-11,12-5
line1=fRandomBy(12,15);
line2=fRandomBy(8,11);
line3=fRandomBy(4,7);
line4=fRandomBy(0,3);
接着将获取到随机的每行数字lineX 的图片数组序号，改变他们的SRC为1.jpg
x1[line1].src=&1.jpg&;
x1[line2].src=&1.jpg&;
x1[line3].src=&1.jpg&;
x1[line4].src=&1.jpg&;
这样初始化随机黑块就搞定了。
接着是写一个当你按键按到正确黑块的时候他会跳过这个黑块并产生新的黑块的方法，这里同样通过改变之前声明的LINE变量，将LINE2的值+4赋值给LINE1，LINE3的值+4赋值给LINE2以此类推，LINE4的值重新获取一个随机数。然后重新删除黑块并绑定新的黑块。
function newKuai()
//生成新块
deKuai();//先删除所有生成的黑块
line1=line2+4;
line2=line3+4;
line3=line4+4;
line4=fRandomBy(0,3);
x1[line1].src=&1.jpg&;
x1[line2].src=&1.jpg&;
x1[line3].src=&1.jpg&;
x1[line4].src=&1.jpg&;
function deKuai()
//删除所有黑块
for(var i=0;i&16;i++)
x1[i].src=&0.jpg&;
接着就是写一个检验是否按到块的方法,通过检测按到的KEYCODE所在的块是否是1.JPG，如果按错，就会结束游戏并上传分数。。。
function cheKuai(keycode)
//判断是否按中块
switch(keycode)
var i=getName(x1[12].src);
//alert(i);
if(i==&1&){newKuai();}
else{gameover()}
var i=getName(x1[13].src);
if(i==&1&){newKuai();}
else{gameover()}
var i=getName(x1[14].src);
if(i==&1&){newKuai();}
else{gameover()}
var i=getName(x1[15].src);
if(i==&1&){newKuai();}
else{gameover()}
function gameover()
//游戏结束时的操作
alert(&你的分数是&+fen);
stopCount();
location.href=&action.php?name=&+document.getElementById(&player&).value+&&fen=&+
最后就是写一个获取键盘按键指令的方法。。。。(这个我是BAIDU的。。。。
document.onkeydown=function(event)
//检测按键方法
var e = event || window.event || arguments.callee.caller.arguments[0];
if(e && e.keyCode==65)
cheKuai(e.keyCode);
if(e && e.keyCode==83)
cheKuai(e.keyCode);
if(e && e.keyCode==75)
cheKuai(e.keyCode);
if(e && e.keyCode==76)
cheKuai(e.keyCode);
接着可以写一个计时器，时间到时执行GAMEOVER方法。。。。（这个我也是百度的我就不贴了。。。大家可以去下面的 演示站看源代码)
于是一个超级简易的别踩白块儿就写完了。。。。。。
PS:就连我自己都想吐槽，很多方法。。。应该可以有更好的思路或者写法。。。。。初学JS还有很多地方都不懂，希望大家能和大家多多交流。。。。)
已发表评论数()
&&登&&&陆&&
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见iTunes 的 App Store 中的“别踩白块儿 4 ( 钢琴 2 )”
正在打开 iTunes Store。如果 iTunes 不自动打开，在 Dock 或 Windows 桌面上点击 iTunes 图标。进度指示器
正在打开 iBooks Store。如果 iBooks 未打开，请在 Dock 中打开 iBooks App。进度指示器
如要轻松整理及新增数码媒体收藏，iTunes 是全世界最简单的工具。
我们在您的电脑上找不到 iTunes。 如要下载 WANG BOXUN 的免费 App 别踩白块儿 4 ( 钢琴 2 )，请立即获取 iTunes。
已经有 iTunes 了？ 现在点击「我有 iTunes」以打开 iTunes。
别踩白块儿 4 ( 钢琴 2 )
开发商：WANG BOXUN
Game Center
打开 iTunes 以购买和下载 App。
?【别踩白块儿4(钢琴2)
现拥有 132 种游戏模式，132合一！且完全免费！】?【别踩白块儿4(钢琴2) 上线八个月,下载量达6000万次,用户评价达 900000份,好评率 99.9%】?【更多模式，更多颜色，更多乐器，更多逼格，更多选择，更多欢乐！】【132 种全新模式】—— 超过了市面上所有同类游戏的模式总和，前所未见，超乎想象！【极丝滑，尽豪华】 —— 全新设计的触感系统，用户体验提升3倍以上，与全新的92种模式更加紧密的结合，相得益彰！【0收费】—— 我们承诺游戏中不包含任何内购及收费点！【摇摇欲坠】—— 摇摇欲坠，飘飘欲仙。【烛火阑珊】—— 娘子你看，红烛过半，夜已深沉...【一飞冲天】—— 释放双手，一切靠意念来控制。【如意金箍棒】—— 要多棒，有多棒；要多长，有多长。------华丽丽的分割线-------??
【游戏规则】? ? 这是一款极其简约和极其耐玩的益智类小游戏，点击屏幕上的黑色或者彩色 块儿前进即可。注意千万不要碰到白色块儿，还有炸弹哦。? ? 【游戏特色】? ? -132种精彩的游戏模式，满足你一整天的游戏需求。-全新的自动化染色系统，省去繁琐的操作。-多种乐器可选，下一秒，你就是超人气明星。-全球排行榜系统。-简单耐玩，老少皆宜。-优美的钢琴音效，数十首经典歌曲等你演绎。-无可比拟的操作体验，弹指间，心无间。-社交网络分享，快和小伙伴们一同分享吧。? ? 【游戏模式】? ? -【经典模式】：用最快的速度完成20/50/100/200块儿。-【街机模式】：没有任何限制，看你能拿多少分，注意，速度会越来越快。-【限时模式】：限时10/30/60/100秒，看你能踩多少格子.-【超速模式】：速度变得更块，看你的平均速度能达到多少。-【惊险模式】：红色的危险格子混杂在黑格子中间，千万不要碰到他们。-【竞赛模式】：每局10秒，完成一定数量的块儿，若当局时间有剩余，则累计到下一局，依此类推。看你能玩到第几关，注意，目标数量会越来越大。-【接力模式】：需要在10秒内完成50个黑块儿，然后接着玩下去，直到碰到白块或者时间结束。-【地狱模式】：颤抖吧，盆友。6排6列的地狱模式，你需要10指并用。-【对战模式】：同台PK吧，骚年！-【多彩模式】：用彩色的格子代替了原来的黑色格子，保护眼睛，避免疲劳-【双骄模式】：双倍块儿，等你去挑战。-【闪电模式】：闪电风暴接近中，夜幕降临，一切只能靠你的直觉。-【小三模式】：史上最具挑战性的小三模式，你能征服她吗。-【贱鸟模式】：像素鸟与白块儿的完美融合，一切显得那么自然，那么美妙。-【冰封模式】：来自极地尘封千年的冰结界，一起来感受千年之外的怒吼吧。-【侧入模式】：侧入，飞一般的感觉。-【心跳模式】：“嘭，嘭嘭”，每一次心跳，都是爱与恨的纠缠，更是生和死的考验。-【过山车模式】： 直上云霄，坠入谷底，冰火两重天的节奏。-【跑酷模式】： 完美融入当下最流行的跑酷游戏模式，体验不一样的白块之旅吧。-【跨栏模式】： 包含“单排，双排，三拍，四种”4种子模式。-【惊喜模式】： 包含 “正常，炸弹”2种模式，更多惊喜等着你。-【抓小鸡模式】：块儿是有思想的，他会瞬移到你意想不到的地方。能抓得住吗。-【转体模式】：块儿在移动过程中会随机转换方向。-【开炮模式】：看见屏幕下面的那门大炮了吗，尽情射吧！-【基友模式】：快把缠绵的二人分开！-【滑你妹模式】：滑动下面的块儿，使其和上面相同或相反！-【摇摆模式】：想知道摇摇欲坠的感觉吗？-【地震模式】：地震还是车震？-【好色模式】：色狼，色鬼，色魔，色仙，你是哪一个？-【暴雪模式】：风雪来了，花月在哪？-【烛光模式】：人点烛，鬼吹灯，尽量不要让蜡烛熄灭了，否则...-【四爷来了】：爷，给小妞笑一个。-【一飞冲天】：释放双手，一切靠意念来控制。-【一大跳模式】：小的不跳大的跳。-【顽石模式】：不就是一石头吗，快用鸡蛋敲碎他。-【金字塔模式】：你会是金字塔顶端的人吗？-【活塞模式】：活塞运动，你懂的.-【金箍棒模式】：要多大，有多大；要多爽，有多爽。友情提醒：适度游戏益脑，沉迷游戏伤身，请朋友们注意身体，多多休息！------------------------------------建议与反馈: Email:
QQ:(skywalker)
版本 4.52 中的新功能
??? 羊羊得亿！“别踩白块儿4” 自上线以来最得意的一次更新! ！????【 132种精彩模式】?别踩白块儿4 现拥有132种完全不同的模式。?【 全新 : 擎天模式】?擎天，擎天柱，擎天一柱！（包含 简单、中等、困难 3种子模式）?【 全新 : 闪光弹模式】?尼玛，谁扔的闪光弹？?【 全新合体：过马路 & 闪电】??【 全新合体：飞天 & 闪电】??【 全新合体：一大跳& 闪电】??【 全新合体：金字塔 & 闪电】??【 全新 ：激进模式】?神马？又在打飞机！？还带转弯的？？（包含 温顺、狂野 2种子模式）?【 全新 ：串烧模式】?白块模式大串烧，比地狱更地狱。（包含 登峰、迂回、乱入 3种子模式）?【 全新 ：雾霾模式】?“穹顶之下”，快来体验吧。?【 全新 ：潜行模式（贱鸟）】?像素鸟还带隐身的，你造嘛？?【 全新 ：变速模式（贱鸟）】?变速，走起！?【游戏性能优化】?
别踩白块儿备用电池容量为的什么事我吧。这些企业棒啊哈哈他lo是因为，这样的人在宿舍看完这d，
这种事件发生在你面前哭得稀里哗啦的电影都看过巴带你走到底有关负责人表示！这些企业法人！这是在乎别人说你们什么的就
广告有时会直接出来，手没反应上就按到了广告然后就会跳转到广告的界面，特费时间！但是游戏还是超级好玩的
好玩的游戏
旅行的路上在朋友手机上看到，觉得特别好玩儿，下载下来没事儿的时候消磨时间
用户购买的还有
此 App 专为 iPhone 和 iPad 设计免费类别: 版本: 4.52大小： 37.9 MB语言: 简体中文, 英语开发商: WANG BOXUN兼容性： 需要 iOS 6.0 或更高版本。与 iPhone、iPad、iPod touch 兼容。 此 App 已针对 iPhone 5 优化。
&&&&&1099 份评分
&&&&&158911 份评分
更多WANG BOXUN产品别踩白块儿冰封模式怎么玩？别踩白块儿冰封模式攻略
&&别踩白块儿冰封模式怎么玩？别踩白块儿冰封模式攻略
别踩白块儿冰封模式怎么玩？别踩白块儿冰封模式攻略
11:08:44来源：编辑：9553资讯编辑
别踩白块儿冰封模式怎么玩？别踩白块儿又新增加了2个模式，分别是贱鸟模式和冰封模式，之前给大家介绍了贱鸟模式玩法攻略，下面继续给大家带来别踩白块儿冰封模式攻略，小伙伴们快点进来看看吧。
所谓的冰封模式其实就是将随机一块黑色的方块变成了冰块。但是我们还是可以点的，点击第一下冰块就会碎，然后变成正常的黑快，也就是说我们遇到冰块的时候要点两次才能正常的游戏。
这个模式中有一个很大的误区就是我们的惯性操作，由于前一个黑快点一下就可以了，突然中间插播一个冰块，我们点两下以后，紧接着后面又是一个黑快，很容易就造成我们点两下黑快从而游戏结束。
授权：免费版软件大小：4.01MB语言：简体中文
别踩白块儿电脑版游戏是一款考验你左右脑反应能力和手速能力的一款非常好玩的益智游戏，这款游戏虽然是简单的不能再简单了但是可玩性还是非常之高的，小编建议大家都下载下来玩一玩。
授权：免费版软件大小：8.14MB语言：简体中文
别踩白块儿3D版DontTapTheWhiteTile3D这款3D版和之前的玩法都一样没有什么区别，只不过普通版的玩了这么久了也该换换口味了，游戏画面看起来比较华丽顺畅，玩起来更是爽啊~瞬间高大上档了不少《别踩白块儿》新增街机+模式
新版应用宝首发
《别踩白块儿》新增街机+模式
新版应用宝首发
&&& 6月13日不仅迎来了世界杯热血的揭幕战，红火得一塌糊涂的极限反应类游戏《别踩白块儿》最新版本，也于今日（6月13日）登陆腾讯应用宝平台独家首发！《别踩白块儿》为腾讯创业基地扶持的新秀，后续还将有更多由腾讯创业基地孵化的优质应用登陆应用宝。
&&& 据了解，这款游戏由猎豹移动全球独家代理运营，今日登陆应用宝首发的《别踩白块儿》Androidv2.4版在此前五大主模式外新添加了“街机+”主模式，其中包括地雷、闪电和双黑三个子模式，让大伙儿过“足”瘾的同时也过足“手”瘾，又一场腥风血雨的记录刷新战即将开始，证明你不是手残的时刻到了！
&&& 手游虐心神作登陆应用宝今日盛大首发
&&& 和《FlappyBird》、《2048》一起，被称为三大虐心游戏之一的《别踩白块儿》是一款考你双手灵活性的游戏，在有黑格子和白格子的四列四行画面里，只能碰黑格子而决不可碰白格子，随着画面的变换，玩家需要不断踩黑色格子，不断使画面向前。
&&& 尽管玩法十分简单，却让人根本停不下来，《别踩白块儿》一经上线就冲进AppStore免费榜第一，并一直雄踞全球多个国家GooglePlay安卓游戏排名前十！除了在各大应用平台及游戏排行榜单上的独占鳌头，《别踩白块儿》更是火爆在各大游戏论坛及网站，疯狂粉丝们的晒分晒记录、教程视频、高分攻略遍布全网，游戏热度令人咂舌。
&&& 今日（6月13日）《别踩白块儿》Androidv2.4正式登陆腾讯应用宝平台独家首发，手残党虐心之路进一步升级。
&&& 应用宝独家版本新增街机＋模式
&&& 《别踩白块儿》至今已相继推出了经典、禅、街机、极速、接力15种（5X3）模式，而此次登陆应用宝的《别踩白块儿》Androidv2.4最新版增加了“街机+”的新模式。
&&& “街机+”模式是“街机”模式的进化版，包含地雷、闪电、双黑三个子模式。其中的地雷模式增加了红色块儿，玩家不能碰到白块儿和漏掉黑块的同时，也不能碰到红色“地雷“，玩家须时刻紧绷敏感神经以防踩雷而亡。
&&& 闪电模式更是亮瞎双眼，在此模式下屏幕每隔一段时间就会慢慢变暗，直到完全看不见所有块儿，闪电过后才会恢复亮度，让玩家在黑暗与光明的生死一线上挣扎。
&&& 双黑模式则是每行会随机性地会出现两个黑块儿，不再是一行一黑，不能漏掉任何一个黑色块儿，给玩家双倍惊喜，分分钟让玩家只有“惊”没有“喜”。
&&& 作为国内领先的优质应用首发平台，应用宝不仅更新最快，保证用户能享受时下最新、最热门的应用大餐，更以海量应用覆盖用户吃喝玩乐各种需求，用户只需下载应用宝，就可抢先体验各类手游的更新、首发。
&&& 由腾讯应用宝打造的一系列首发案例中，下载量达千万量级、收入过亿的应用不乏其例。精品游戏《雷霆战机》在应用宝首发期间，千万级用户中90%都来自腾讯平台。工具类应用WiFi伴侣v2.3版在应用宝首发新增下载60万，活跃用户增长600%。应用宝的影响力也从国内延伸到国外，明星应用“秘密-Secret官方中文版”登陆中国的第一次亮相就在应用宝，由应用宝独家首发。目前，作为中国增长最快的移动应用分发市场，应用宝日分发应用达到6400万，并将在2014年底前实现日分发1亿的目标。
编 辑：孙慧
新浪科技罗亮在唱衰PC行业的声音达到顶峰之时，登上全球最大P..
CCTIME推荐
CCTIME飞象网
CopyRight &
京ICP备号&& 京公网安备号
公司名称： 北京飞象互动文化传媒有限公司
未经书面许可，禁止转载、摘编、复制、镜像别踩白块儿-小米应用商店 手机应用 &
&别踩白块儿查看详细 软件大小:11.03 M版本号：3.3.2.3更新时间：包名：com.umonistudio.tile权限详情:? 查看网络状态? 查看 Wi-Fi 状态? 更改 Wi-Fi 状态? 完全的互联网访问权限? 检索当前运行的应用程序? 读取手机状态和身份? 开机时自动启动? 修改/删除 SD 卡中的内容? 防止手机休眠手机屏幕截图
应用介绍全球累计超过 160,000,000（一亿六千万）次下载，你还在等什么？
Google Play 超过 1,200,000（一百二十万）次五星好评！
别踩白块儿，这就是这个游戏唯一的一个规则，很简单吧？谁都可以会玩，但并不是谁都能玩得很好噢。 你呢？你玩得怎么样？
&超过30种好玩的模式（持续添加中&）
&支持好友排行榜
&支持玩家社区交流
&简单易玩，老少咸宜
&几十种多种颜色主题，支持多颜色主题（更多即将到来&）
&美妙的钢琴音效，支持自定义播放列表
&顺畅的游戏体验
&支持社交网络分享，随时炫耀成绩
警告，这个游戏很容易上瘾，自制力不好的人慎玩！新版特性+V3.1.1
几个问题修复
+V3.2.0
修复了结束页面崩溃的问题
修复了长时间停留在启动页的问题，此问题只出现在安卓系统5.0
其他小问题修复
+V3.1.0
增加随机模式，可以随机选择一个模式
排行榜被移到更多页面中
游戏内小改进开发者应用相关应用你所举报的信息将被发送至工信部12321举报平台您需要登陆小米帐号才可以安装应用到手机已经将“新浪微博”推送到您的手机请在手机上完成安装