用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的++类型, ...
随机推荐
- 17110 Divisible（basic）
17110 Divisible 时间限制:1000MS 内存限制:65535K 题型: 编程题 语言: 无限制 Description Given n + m integers, I1,I2,. ...
- 有用的MySQL语句
摘自onefish资料库 1. 计算年数你想通过生日来计算这个人有几岁了. SELECT DATE_FORMAT(FROM_DAYS(TO_DAYS(now()) - TO_DAYS(@dateofb ...
- html弹窗半透明
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
- 对于大学4年的反思(续)，记我的ThoughtWorks面试
之前我写了一篇对于大学四年的反思,时隔一个月,为什么我这么快就要来写这篇续章呢?主要有两个原因,第一是感谢静子姐姐,记得知乎上有个回答里面说过人生需要有贵人的帮助,遇到贵人是一件很幸运的事情.我想,静 ...
- Linux的交叉编译 及configure配置
这两天需要把一个CDVS的工程代码从Linux 平台上移植到ARM平台上,花了两天才搞定,之前很早申请的博客,到现在还没有技术文章会,以后决定凡是花两三天才搞定的东西都会把解决过程发到这里,很多东西靠 ...
- 【C#】3.算法温故而知新 - 快速排序
快速排序相比冒泡排序,每次交换是跳跃式的.每次排序的时候设置一个基准点,将小于等于基准点的数全部放到基准点的左边,将大于等于基准点的数放到基准点的右边.这样每次交换的时候就不会像冒泡排序一样只能在相邻 ...
- ckplayer播放器去掉右边的开关灯分享插件
在上一篇文章中介绍了如何使用ckplayer播放器,但是有的人不需要CK播放器右边的开关灯分享插件,那么就需要把该插件给去掉,方法也很简单. 第一步:先打开ckplayer.js里找到下面三行删除掉 ...
- UVA 12382 Grid of Lamps --贪心+优先队列
题意:给出每行每列至少有的灯泡数,问最少有的灯泡数. 解法:要使灯泡数尽量小,说明要使交叉点尽量多,这样即抵了行,又抵了列,为最优的.所以可以用行来消去列,也可以用列来消去行,我这里是列来消去行.首先 ...
- SGU 180 Inversions
题意:求逆序数对数量. 思路一:暴力,O(N^2),超时. 思路二:虽然Ai很大,但是n比较小,可以离散化,得到每个Ai排序后的位置Wi,然后按照输入的顺序,每个Ai对答案的贡献是Wi-Sum(Wi- ...
- 第2章 面向对象的设计原则（SOLID）：4_接口隔离原则（ISP）
4. 接口隔离原则(Interface Segregation Principle,ISP) 4.1 定义 (1)使用多个专门的接口,而不使用单一的总接口,即客户端不应该依赖那些它不需要的接口.类间的 ...