初学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";
fen++;
}
function deKuai()
{
//删除所有黑块
for(var i=0;i<16;i++)
{
x1[i].src="0.jpg";
}
}
接着就是写一个检验是否按到块的方法,通过检测按到的KEYCODE所在的块是否是1.JPG,如果按错,就会结束游戏并上传分数。。。
function cheKuai(keycode)
{
//判断是否按中块
switch(keycode)
{
case 65:
var i=getName(x1[12].src);
//alert(i);
if(i=="1"){newKuai();}
else{gameover()}
break;
case 83:
var i=getName(x1[13].src);
if(i=="1"){newKuai();}
else{gameover()}
break;
case 75:
var i=getName(x1[14].src);
if(i=="1"){newKuai();}
else{gameover()}
break;
case 76:
var i=getName(x1[15].src);
if(i=="1"){newKuai();}
else{gameover()}
break;
}
}
function gameover()
{
//游戏结束时的操作
alert("你的分数是"+fen);
stopCount();
location.href="action.php?name="+document.getElementById("player").value+"&fen="+fen;
tc=20;
deKuai();
fen=0;
}
最后就是写一个获取键盘按键指令的方法。。。。(这个我是BAIDU的。。。。
document.onkeydown=function(event)
{
//检测按键方法
var e = event || window.event || arguments.callee.caller.arguments[0];
if(e && e.keyCode==65)
{ // 按 a
cheKuai(e.keyCode);
}
if(e && e.keyCode==83)
{ // 按 s
cheKuai(e.keyCode);
}
if(e && e.keyCode==75)
{ // 按 k
cheKuai(e.keyCode);
}
if(e && e.keyCode==76)
{ // 按 l
cheKuai(e.keyCode);
}
}
接着可以写一个计时器,时间到时执行GAMEOVER方法。。。。(这个我也是百度的我就不贴了。。。大家可以去下面的 演示站看源代码)
于是一个超级简易的别踩白块儿就写完了。。。。。。
PS:就连我自己都想吐槽,很多方法。。。应该可以有更好的思路或者写法。。。。。初学JS还有很多地方都不懂,希望大家能和大家多多交流。。。。)
别踩白块儿 演示 (注意 看的黑块应是最下面那行)
初学JS——利用JS制作的别踩白块儿(街机模式) 小游戏的更多相关文章
- 【cocos2d-x制作别踩白块儿】第九期:游戏计时功能(附源代码)
游戏没有计时,不是坑爹吗? 这一期,我们将来加入游戏计时功能. 1. 定义变量和函数 我们先在HelloWorldScene.h中定义几个变量和函数 long startTime; bool time ...
- 【cocos2d-x制作别踩白块儿】第一期:游戏介绍
这一系类文章.我们将来分析时下最火的一款游戏 -- 别踩白块儿. 无图无真相,先上图 这就是我们终于要完毕项目的效果图. 游戏刚開始的最以下有一栏为黄色,紧接着上面每一行都是有一个黑色块,其余为白色块 ...
- jQuery实践-别踩白块儿网页版
▓▓▓▓▓▓ 大致介绍 终于结束了考试,放假回家了.这次的别踩白块儿网页版要比之前做的 jQuery实践-网页版2048小游戏 要简单一点,基本的思路都差不多. 预览:别踩白块网页版 这篇博客并不是详 ...
- 用Canvas写一个简单的游戏--别踩白块儿
第一次写博客也不知怎么写,反正就按照我自己的想法来吧!怎么说呢?还是不要扯那些多余的话了,直接上正题吧! 第一次用canvas写游戏,所以挑个简单实现点的来干:别踩白块儿,其他那些怎么操作的那些就不用 ...
- 别踩白块儿游戏源码Android版
这个项目有带说明文档,大家可以看看源码附件的说明文档吧,“别踩白块儿”是目前非常火的一款游戏,游戏非常简单刺激.关于具体怎么火法怎么玩我就不多说了,相信看到本文的朋友们都非常地清楚. 什么游戏火,我们 ...
- HTML--JS练习小游戏(别踩白块儿)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 手摸手带你实现 小游戏<别踩白块儿 -- 内有游戏链接>
别踩白块儿 使用(白鹭引擎)Egret编写的游戏 游戏地址 准备工作 了解白鹭引擎 并安装编写工具 安装游戏引擎 安装Egret Wing3 创建项目 创建项目可以选择不同版本的引擎,创建成功之后还可 ...
- 使用canvas通过js制作一个小型英雄抓怪兽的2D小游戏
首先,这是一个HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- JS实现别踩白块小游戏
最近有朋友找我用JS帮忙仿做一个别踩白块的小游戏程序,但他给的源代码较麻烦,而且没有注释,理解起来很无力,我就以自己的想法自己做了这个小游戏,主要是应用JS对DOM和数组的操作. 程序思路:如图:将游 ...
随机推荐
- isee图片专家批量处理图片大小教程
经常用手机.照相机外出拍照片,然后再弄到电脑上面很占硬盘空间了,isee图片专家是一款非常专业的批量压缩图片大小工具,方便储存,给电脑减压,具有一次自动处理N张图片:程序小巧,资源占用低,处理速度快等 ...
- 在Markdown中插入不会显示的注释文本
方法1 <!-- your comment goes here --> 方法2 [//]: <> (This is also a comment.) 原文地址: https:/ ...
- String Painter, Chengdu 2008, LA4394
题目链接:https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_ ...
- MySQL入门很简单: 1 数据库概述
1. 数据库概述 1.1 数据存储方式: 1)人工管理阶段 2)文件系统阶段: 文件系统通过文件的存储路径和文件名称访问文件中的数据 3)数据库系统阶段:Oracle, SQL Server, MyS ...
- java 生成12位随机数,解决The literal 9999999999999 of type int is out of range 问题
原本想这样产生一个随机数,但是你会看到,只要数字超过了9位数,就会出问题,提示“The literal 1000000000000 of type int is out of range” 解决方式是 ...
- The service command supports only basic LSB actions (start, stop, restart, try-restart, reload,force-reload, status)
# service iptables save The service command supports only basic LSB actions (start, stop, restart, t ...
- 问题 B: 投简历
题目描述 小华历经12寒窗苦读,又经历4年大学磨砺,终于毕业了,随着毕业季的到来,找工作也日益紧张起来.由于要面试不同的公司,因此小华需要准备不同的简历.当然最基本的信息是必不可少的,基本信息:姓名. ...
- kiiti分割的数据及其处理
kitti和cityscape的gt的分割不太一样,下边缘不再是从黑色开始的,而是直接是类别 red,green,blue = img_gt[i,j] 1.道路的颜色(紫色):128 64 128 2 ...
- Java 文件切割工具类
Story: 发送MongoDB 管理软件到公司邮箱,工作使用. 1.由于公司邮箱限制附件大小,大文件无法发送,故做此程序用于切割大文件成多个小文件,然后逐个发送. 2.收到小文件之后,再重新组合成原 ...
- vue 中$index $key 已经移除了
https://cn.vuejs.org/v2/guide/migration.html#index-and-key-移除 之前可以这样: 1 2 3 4 5 6 <ul id="ex ...