用html5+js实现掌机游戏赛车demo
最近无聊，用html5+js做了一个以前玩过的掌机赛车游戏，顺便学习一下画布的api以及巩固一下js基础。
游戏界面，没做什么美化。
游戏规则：游戏界面分为三列，黑色方块随机落下，红色方块可以在三列自由移动（用方向键，长按下方向键黑色方块加速下滑）。红色方块碰到黑色方块即为输。
得分：每正常通过一次黑色方块加12分，加速通过加30分。
下面直接上代码：
html：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
body{
text-align: center;
}
#mycar{
border: 1px solid black;
}
</style>
<body>
<canvas id="mycar" width="300px" height="500px"></canvas>
<div id="scored">得分：0</div>
<script src="js/mycar.js"></script>
</body>
</html>
js：
/**
* Created by zqc on 2014/12/3.
*/ function createCar(speed,cxt,dom) {
var o = new Object();
o.speed = speed; // 落下速度
o.cxt = cxt; // 画布
o.cell = 100; // 赛车宽度
o.curdir = {'x':100,'y':400}; // 红色赛车初始位置
o.hinder = [[],[],[]]; // 障碍物位置
o.scroll = 0; // 下滑距离
o.scored = 0; // 分数
o.init = function () {
o.cxt.fillStyle = 'red';
o.cxt.fillRect(o.curdir.x, o.curdir.y, o.cell, o.cell);
document.onkeydown = function (e) { // 按键事件
if(e.keyCode === 37 && o.curdir.x > 0){
o.moveCar('left');
}
else if(e.keyCode === 39 && o.curdir.x < 200){
o.moveCar('right');
}
else if(e.keyCode === 40) {// 长按加速
o.speed = speed / 3;
}
};
document.onkeyup = function () {
o.speed = speed;
};
o.setHinder();
o.startCar();
};
o.setHinder = function () { // 生成障碍物
var rand1 = Math.ceil(Math.random() * 1000) % 2,
rand2 = Math.ceil(Math.random() * 1000) % 2,
rand3 = Math.ceil(Math.random() * 1000) % 2;
o.hinder[0].push({'x':0,'y':0,'hinder':rand1}); // hinder表示是否有障碍物
o.hinder[1].push({'x':100,'y':0,'hinder':rand2});
o.hinder[2].push({'x':200,'y':0,'hinder':rand1 + rand2 == 2?0:rand3});
for(var i = 0; i < o.hinder.length; i ++){
var last =o.hinder[i][o.hinder[i].length - 1];
if(last.hinder === 1) { // 有障碍物
o.cxt.fillStyle = 'black';
o.cxt.fillRect(last.x,last.y, o.cell, o.cell);
}
}
};
o.downHinder = function () { // 控制障碍物下降
var i = 0,
j = 0,
cur = null,
old = null;
for(; i < o.hinder[0].length; i ++) {
for(j = 0; j < 3; j ++) {
cur = o.hinder[j][i];
if (cur.hinder === 1) {
old = o.hinder[j][i];
o.cxt.clearRect(old.x,old.y, o.cell, o.cell); // 清除上一帧
o.hinder[j][i].y = o.hinder[j][i].y + 5;
cur = o.hinder[j][i];
o.cxt.fillStyle = 'black';
o.cxt.fillRect(cur.x,cur.y, o.cell, o.cell);
}
else
o.hinder[j][i].y = o.hinder[j][i].y + 5;
}
}
};
o.moveCar = function (dir) {
o.cxt.fillStyle = 'red';
o.cxt.clearRect(o.curdir.x, o.curdir.y, o.cell, o.cell);
o.curdir.x = (dir === 'left'?o.curdir.x - o.cell:o.curdir.x + o.cell);
o.cxt.fillRect(o.curdir.x,o.curdir.y, o.cell, o.cell);
};
o.clearHander = function () {
for(var i = 0; i < o.hinder.length; i ++) {
if (o.hinder[i][0].y >= 500) { // 超过画布最低位置，清除障碍物
o.counterScorde(); // 计分
var over = o.hinder[i].shift();
if(over.hinder === 1)
o.cxt.clearRect(over.x,over.y, o.cell, o.cell);
}
}
};
o.counterScorde = function () {
o.scored = o.scored + Math.ceil(100/o.speed);
dom.innerHTML = '得分：' + o.scored;
};
o.startCar = function () {
setTimeout(function () {
o.downHinder(); // 落下障碍物
o.clearHander(); // 清除已通过的障碍物
if(o.hinder[o.curdir.x/100][0].hinder === 1 && o.hinder[o.curdir.x/100][0].y + 100 >= o.curdir.y){
alert('你挂了');
return;
}
o.scroll = o.scroll + 5; // 单位下滑速度
if(o.scroll % 300 === 0)
o.setHinder(); // 设置障碍物
o.startCar();
}, o.speed);
};
return o;
} var c = document.getElementById('mycar');
var scored = document.getElementById('scored');
var cxt = c.getContext('2d');
var car = createCar(30,cxt,scored);
car.init();
详情见github： 掌机游戏赛车demo
算法写的有点不好，有大神路过望给一写指导。
用html5+js实现掌机游戏赛车demo的更多相关文章
- 对掌机游戏Pokemon的一部分系统的拆解流程图
整体系统拆解 POKEMON系统拆解 属性.技能.进化形态 属性提升系统 种族值说明: 所有Pokemon都拥有自己的种族的种族值,且固定(例如:小火龙:309, 皮卡丘: 320) 种族值是各项属性 ...
- HTML5+JS 《五子飞》游戏实现（一）规则
很久没写文章了,这个游戏其实已经写了有段时间了,一直没有完善,赶在新年之际,分享给大家. 该<五子飞>游戏,不是平常大家所说的<五子棋>,这个玩法简单,是我们老家儿时常玩的一种 ...
- HTML5+JS 《五子飞》游戏实现（八）人机对战
要想实现人机对战,就必须让电脑自动下棋,而且要知道自动去查找对方的棋子,看看有没有可以挑一对的,有没有可以夹一个的,这样下起来才有意思. 当电脑用户下完棋后,电脑应立即搜索用户的棋子,然后如果没有被吃 ...
- HTML5+JS 《五子飞》游戏实现（七）游戏试玩
前面第一至第六章我们已经把<五子飞>游戏的基本工作都已经讲得差不多了,这一章主要是把所有的代码分享给大家,然后小伙伴们也可以玩一玩. 至于人机对战的我们放到后面讲进行分析. 试玩地址:ht ...
- HTML5+JS 《五子飞》游戏实现（六）鼠标响应与多重选择
上一章我们提到了如果有多条线上的棋子可以被吃掉,那么游戏需要提示用户,让用户选择吃哪条线上的.另外因为是网页游戏,所以一定要实现鼠标单击棋子可以进行操作. 当鼠标移动棋子上面后,切换鼠标指针为手形,移 ...
- HTML5+JS 《五子飞》游戏实现（五）移动棋子
上一章 我们知道了怎么处理两个重要的吃棋动作,想要吃对方的棋子,首先得移动自己的棋子.现在里沃特跟大家分享分享,怎么移动棋子. 想要移动棋子,在页面上,首先要点击一下要移动的棋子,然后再点击一下目标位 ...
- HTML5+JS 《五子飞》游戏实现（四）夹一个和挑一对
在第一章我们已经说了怎么才能“夹一个”以及怎样才能挑一对,但那毕竟只是书面上的,对码农来讲,我们还是用代码讲解起来会更容易了解. 为了更容易对照分析,我们先把路线再次贴出来: // 可走的路线 thi ...
- HTML5+JS 《五子飞》游戏实现（三）页面和棋盘棋子
前面两节,我们已经对<五子飞>有个初步的认识,对走棋路线也有了基本的了解,现在里沃特继续跟大家分享HTML页面,另外把棋盘棋子也画出来. 演示地址:http://www.lyout.com ...
- 100行JS实现HTML5的3D贪吃蛇游戏
js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...
随机推荐
- linux编译安装MySQL
最近就想搞搞hadoop,然后装个MySQL,测试一下那个sqoop. MySQL这种东西,既然是开放源码的,那就源码安装吧. 下面是我的测试环境说明: VMware10+Ubuntu14.04 Ky ...
- linux基本命令学习笔记
这个几天在研究linux的常用基本命令.以下是此时间内的幻灯片截图笔记,在这里留个脚印. linux 常用命令 1,命令的基本格式 2,文件处理命令 3,文件搜索命令 4,帮助命令 5,压缩解压缩命令 ...
- python ljust,rjust,center,zfill对齐使用方法
字符串在输出时的对齐:S.ljust(width,[fillchar]) #输出width个字符,S左对齐,不足部分用fillchar填充,默认的为空格. S.rjust(width,[fillcha ...
- SSIS with vertica
使用ODBC进行连接,因为SSIS中没有直接的ODBC connection,所以使用ADO.NET的连接器. 九分钟才跑了四百来条数据. 这个图反应了SSIS的数据流速度还是可以的,但是瓶颈就在OD ...
- 倍增法-lca codevs 1036 商务旅行
codevs 1036 商务旅行 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题目描述 Description 某首都城市的商人要经常到各城镇去做生意 ...
- Treap（树堆）：随机平衡二叉树实现
本文是根据郭家宝的文章<Treap的原理及实现>写的. #include<stdio.h> #include<string.h> #include<stdli ...
- Linux 常用基本命令
这两天有俩哥们问了我linux的事,问我在工作中需不需要用到,需不需要学会 一个是工作1年不到的,我跟他说,建议你学学,在以后肯定是要用到的,虽然用到的机会不多,但是会总比不会好 另一个是工作6年的, ...
- 贴图在Unity中的设置
例如:一张512X512的图片占用的内存大小,计算方法:512*512*4/1024=1.024MB. 如果在贴图设置里设置成真彩色那就等于计算的值,设置成16位色彩,内存占用会减少. 在进行性能优化 ...
- 测试杂感：Bug Bash
缺陷大扫除(Bug Bash)是一项短期的全员测试活动.在微软,许多开发团队会在里程碑(milestone)的末期执行缺陷大扫除.程序员.测试员.程序经理.内部用户.市场人员在1~3天的时间窗口中,运 ...
- Jedis下的ShardedJedis（分布式）使用方法（二）
上一篇中介绍了ShardedJedis的基本使用方法以及演示了一个简单的例子,在这一篇中我们来介绍了ShardedJedis的原理. 1.ShardedJedis内部实现 首先我们来看一下Sharde ...