用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的++类型, ...
随机推荐
- 开启mysql慢查询
Linux查看mysql 安装路径一.查看文件安装路径由于软件安装的地方不止一个地方,所有先说查看文件安装的所有路径(地址).这里以mysql为例.比如说我安装了mysql,但是不知道文件都安装在哪些 ...
- Linux ethtool命令
一.简介 ethtool 是用于查询及设置网卡参数的命令. 二.常用选项 ethtool ethx //查询ethx网口基本设置,其中 x 是对应网卡的编号,如eth0.eth1等等 ethtool ...
- 关于 Python 你需要知道的几个概念
Python 一种支持面向对象和函数式(面向过程)的高级编程语言 CPython 由 C 语言编译,一种默认的,通常我们所提及的基于 C 的 Python 的一种实现 Cython 一种 Python ...
- linux netstat 命令简解
Netstat 简介: Netstat是在内核中访问网络及相关信息的程序,它能提供TCP连接,TCP和UDP监听,进程内存管理的相关报告.常见参数-a (all)显示所有选项,默认不显示LISTEN相 ...
- Webpack+React+ES6入门指南[转]
React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...
- ViewPager -- Fragment 切换卡顿 性能优化
当ViewPager切换到当前的Fragment时,Fragment会加载布局并显示内容,如果用户这时快速切换ViewPager,即 Fragment需要加载UI内容,而又频繁地切换Fragment, ...
- js fs read json 文件json字符串无法解析
读取 xxx.txt(里面就是一段 json)-> JSON.parse( fs.readFileSync( xxx.txt ) ) -> 报 SyntaxError: unexpecte ...
- beanFactoory介绍
- AndroidStudio .gitinore编写
# Built application files *.apk *.ap_ # files for the dex VM *.dex # Java class files *.class */R.ja ...
- 我的WCF摸爬滚打之路（1）
等了好久终于等到今天!盼了好久终于把梦实现……哈哈,仅以此歌词来庆祝我为期3天的wcf学习之路圆满结束. 今天写这个文章的目的在于记录一下我自己在学习WCF的时候碰到的一些问题,俗话说,好记心不如烂笔 ...