用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的++类型, ...
随机推荐
- Windows7下安装MongoDB(转)
1.下载 地址:http://www.mongodb.org/downloads(32位还是64位自行选择). 我下载的是:mongodb-win32-x86_64-2.4.5.zip 2.解压 把m ...
- MONGODB（三）——Java操作Mongo
相比于java调用MySqlApI来操作数据库,调用Mongo要简洁容易的多.通过一个简单的样例,很容易地就可以上手 一.导入Jar包 添加Monog支持Java的jar包,这里使用的是2.9.3 & ...
- MyEclipse中SVN的常见的使用方法
本次主要内容: 一 .导入项目 (Checkout).从svn资源库检出 二 .更新 (Update) 三.锁(对要修改的文件加锁,防止文件冲突) 四.提交(项目修改后的提交) 五.解锁 六.查看历史 ...
- O(N)时间的排序
题目:某公司有几万名员工,请完成一个时间复杂度为O(n)的算法对该公司员工的年龄作排序,可使用O(1)的辅助空间. 要注意分析题目,一般排序要么是O(n^2),要么是O(nlogn).但这里题目特别强 ...
- [转]excel set drop-down values based on vlookup
本文转自:http://stackoverflow.com/questions/10657811/set-drop-down-values-based-on-vlookup 问: I have a w ...
- NOIP2014提高组 DAY1 -SilverN
T1 生活大爆炸版石头剪刀布 题目描述 石头剪刀布是常见的猜拳游戏:石头胜剪刀,剪刀胜布,布胜石头.如果两个人出拳一样,则不分胜负.在<生活大爆炸>第二季第8 集中出现了一种石头剪刀布的 ...
- 最小瓶颈路 Uva 534 Frogger
说明:关于Uva的题目,可以在vjudge上做的,不用到Uva(那个极其慢的)网站去做. 最小瓶颈路:找u到v的一条路径满足最大边权值尽量小 先求最小生成树,然后u到v的路径在树上是唯一的,答案就是这 ...
- Codeforces Round #267 Div2 C George and Job --DP
题意:把长度为n的序列分成k个m长的连续小序列,这些连续小序列的和最大是多少. 解法:显然DP. 定义: dp[i][j] 为前 i 个元素分成j个m端,且 i 是第j个的末尾的最大和. 那么有: d ...
- Unity3D开发之搭建Mac OS开发环境
运行图 首先上几张图 IOS模拟器 坚屏 横屏 打包任务 摸索了一上午,才搞定在模拟器中运行.至于在Iphone真机中运行,虽然有开发者证书,目前还没在Xcode中配置好. 我今天第一次接触并使用MA ...
- unity3D里面的点乘和叉乘
在unity3D里面.两个向量的点乘所得到的是两个向量的余弦值,也就是-1 到1之间,0表示垂直,-1表示相反,1表示相同方向. 两个向量的叉乘所得到的是两个向量所组成的面的垂直向量,分两个方向. 简 ...