用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的++类型, ...
随机推荐
- Tomcat报java.lang.ClassNotFoundException: 1catalina.org.apache.juli.FileHandler
最近在生产环境部署Tomcat的时候,在启动的时候,在控制台报"java.lang.ClassNotFoundException: 1catalina.org.apache.juli.Fil ...
- Json常用的转换
简单记录一下jquery里面的JSON.parse()和JSON.stringify()函数,和js中的eval()函数的用法 1,JSON.parse 函数(常用) 作用:将 JavaScript ...
- javascript特效实现(4)——当前时间和倒计时效果
这个效果的实现关键是对Date对象和setTimeout的使用. 一共有三个例子,HTML结构如下,就不添加CSS样式了. <body> 当前时间:<p id="p1&qu ...
- ASP.NET中iframe框架点击左边页面链接，右边显示链接页面内容
首先是主页面main.aspx <body style="background-color: #AFEEEE"> <form id="form1&quo ...
- CGI（通用网关接口）
公共网关接口 CGI(Common Gateway Interface) 是WWW技术中最重要的技术之一,有着不可替代的重要地位.CGI是外部应用程序(CGI程序)与Web服务器之间的接口标准,是在C ...
- php类型转换以及类型转换的判别
部分摘自PHP: 类型 - Manual 相关链接 PHP 在变量定义中不需要(或不支持)明确的类型定义:变量类型是根据使用该变量的上下文所决定的.也就是说,如果把一个 string 值赋给变量 $v ...
- Linux学习之二——档案与目录的属性和权限
一.属性和权限的基本概念 Linux一般将档案可存取的身份分为三个类别,分别是 owner/group/others,这三种身份各有 read/write/execute 等权限. 所有的系统上的账号 ...
- 初学嵌入式STM32基础下选哪款开发板适合学习
iTOP-4412开发板 目前为止,在用户网盘上已经积累了多达100G以上资料, 这些资料都是和4412相关的,并不是随便拼凑起来的!同时我们也完全开放原厂资料. 鉴于用户对于海量资料无从下手的问题, ...
- node.js环境搭建
(1)Node.js安装 Node.js安装包及源码下载地址为: https://nodejs.org/download/ , 双击下载后的安装包.msi,检查Node.js版本命令:node - ...
- 探索 OpenStack 之（10）：深入镜像服务Glance
本篇博文来探讨下镜像服务Glance. 0. 基本概念 0.1 基本功能 Glance提供REST API来支持以下镜像操作: 查询 注册 上传 获取 删除 访问权限管理 0.2 Glance RE ...