初学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]。
接着是我从百度找的一个获取随机数的方法:
1
2
3
4
5
6
7
8
9
10
|
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
1
2
3
4
|
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的值重新获取一个随机数。然后重新删除黑块并绑定新的黑块。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
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,如果按错,就会结束游戏并上传分数。。。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
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的。。。。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
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还有很多地方都不懂,希望大家能和大家多多交流。。。。)
别踩白块儿 演示 (注意 看的黑块应是最下面那行)
转载于:https://www.cnblogs.com/zhangxinerfenxiang/p/6337212.html
初学JS——利用JS制作的别踩白块儿(街机模式) 小游戏相关推荐
- web学习(2)--别踩白块儿(js版)(web入门)
废话不多说,就是一个简单的网页版的别踩白块儿 (踩到白块会弹出窗口,手动点击确定才能继续游戏,达到耗费你的游戏时间的目的) HTML:(注意js文件的名字和所放位置,如果和我命名的不一样,注意在第六行 ...
- 傅小森的游戏制作之路-别踩白块儿
项目前言 别踩白块儿 这- 还用开发吗? 别人已经制作了呀 触屏版本多的是 是挺多的 但是 你见过按键版本的嘛? 没见过吧 这就是需要开发出来 , 进入项目需求环节 项目需求 别踩白块儿 顾名思义:不 ...
- QT 小游戏 : 别踩白块儿~
一.实现思路 QPainter 绘制 游戏界面 PS:根据方块坐标链表绘制所有方块 支持两种操作方式 PS:鼠标事件 和 键盘事件(Q,W,E,R,T) 定时器(10ms) 刷新 方块坐标数据 根据得 ...
- Cocos别踩白块儿案列1
Cocos 版本3.10 1.游戏介绍: <别踩白块儿>是由 Umoni Studio (Umoni Entertainment Limited 的前身)"制作的一款休闲益智游 ...
- python 4399别踩白块儿脚本
持续无聊中,看到别踩白块儿觉得这个脚本貌似比较好写. 需要用到的python 库如下 import pyautogui from PIL import ImageGrab, Image import ...
- python+opencv别踩白块儿游戏辅助,一天一个opencv小项目(已开源)
python+opencv别踩白块儿游戏辅助,一天一个opencv小项目(已开源) 见链接
- 别踩白块儿 开源免费(C++)
别踩白块儿(C++) 演示视频 调用EasyX图形库,电脑没有安装图形库的话,无法运行 EasyX下载 源码下载 //主要代码,源码请下载源码文件//游戏开始 void Begin() {MOUSEM ...
- 团队项目代码分析(Android游戏:别踩白块儿)
代码组成部分: 关键代码主要分为三大部分,如下图所示(用思维导图的形式展示): 代码调用关系 通过MainActivity调用其他类❤,具体见核心代码分析! 核心代码分析 public class P ...
- 基于Linux、QT、C++的“别踩白块儿”小游戏
基于Linux.QT.C++的"别踩白块儿"小游戏 源码链接 一.功能实现 完善的游戏界面.游戏倒计时.得分记录.历史最高分显示 二.功能描述 1.界面为4*4,一行中只有一个黑块 ...
最新文章
- 聊天软件系统测试用例,QQ聊天框测试用例设计
- NUC1003 Hangover
- KVM 介绍(4):I/O 设备直接分配和 SR-IOV [KVM PCI/PCIe Pass-Through SR-IOV]
- 先验概率,后验概率,最大似然估计,最大后验概率
- 【学术相关】如何将半页纸论文写到十页?
- Day18 (一)类的加载器
- sqlserver数据库中清空日志文件
- vue TypeError: Cannot read property ‘upgrade‘ of undefined
- 使用frp实现将内网映射到公网 无需花生壳
- JAVA基础学习day25--Socket基础二-多线程
- @cacheable 服务器 不一致_Dubbo一致性哈希负载均衡的源码和Bug,了解一下?
- java开发搭建环境搭建_Java开发环境搭建
- Keil3/4/5 For C51安装教程(附Baidu 云链接)
- 关于使用系统定位持续后台定位的一点心得
- Cannot find module lint-staged 解决办法
- MPB:农科院牧医所赵圣国组-微生物DNA、RNA和蛋白质共提取方法
- 固件:BIOS和UEFI
- php xmp,xmp可以一直开着吗
- 计算机硬盘read,电脑硬盘一直吱吱的响的解决办法
- 【scratch】class_6_植物大战僵尸(一)
热门文章
- 周总结(2019/6/2)
- 企业微信小程序一直在loading转圈
- C 不再是一种编程语言
- 家庭宽带 动态公网IP,使用腾讯云DDNS实现实时更新DNS解析记录
- android 多线程 场景,Android多线程总结
- AxureRP_for_chorme的安装和使用方法
- java 使用 oracle的nvarchar2类型 字符串,java – 使用带有oracle JDBC驱动程序的Types.NVARCHAR来处理Cyrillic字符...
- Uni-app接入腾讯人脸核身
- 从零开始安装Fate
- HTML5期末大作业:影视电影网站设计—— 迪士尼影视电影(6页) HTML+CSS+JavaScript 网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计