利用JavaScript简单知识，开发一个小游戏~，超简单
& 今天给学生讲软件项目管理，发现学生想睡觉，灵机一动，给大家写个小游戏，一起猜猜看~
&&&&&& 简单效果图：
&&&&&& 示例：&&&&&&
view plaincopy to clipboardprint?&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &&&&
&html xmlns=&&&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&&
&title&猜猜看&/title&&
//随机产生一个随机整数&&
//&&&&&&&&&& 四舍五入&&&&&& 随机数（0-1）&&
var num = Math.round(Math.random()*1000);&
//定义一个标志变量&&
var falg=&
//定义一个变量，统计猜得次数&&
var count=1;&
document.write(&&br&&br&&br&&br&&br&&br&&br&&br&&);&
//执行while循环&&
while(falg){&
&&& if(count&=10){&
&&&&&&& //第一步，接受用户输入的内容&&
&&&&&&& var inputnum=prompt(&请输入您要猜得数字!&,1);&
&&&&&&& //第二步，把用户输入的内容和产生的随机数进行比较&&
&&&&&&&&& //三种情况： 1)输入的数大于产生随机数& 提示&大了&&&
&&&&&&&&& if(inputnum&num){&
&&&&&&&&&&&&& //输出一句话，&&
&&&&&&&&&&&&& document.write(&这是您第&+count+&次机会,您本次输入的数字为&+inputnum+&,您输入的数字大了&br&&);&&&
&&&&&&&&&&&&& count++;&
&&&&&&&&&&& }&
&&&&&&&&&&&
&&&&&&&&& //三种情况： 2)输入的数小于产生随机数& 提示&小了&&&
&&&&&&&&& if(inputnum&num){&
&&&&&&&&&&&&& //输出一句话，&&
&&&&&&&&&&&&& document.write(&这是您第&+count+&次机会,您本次输入的数字为&+inputnum+&,您输入的数字小了&br&&);&&
&&&&&&&&&&&&& count++;&&
&&&&&&&&&&& }&
&&&&&&&&& //三种情况： 1)输入的数等于产生随机数& 提示&对了& ，设置标志位为&&
&&&&&&&&& if(inputnum==num){&
&&&&&&&&&&&&& if(count&=3){&
&&&&&&&&&&&&&&&&&& //输出一句话，&&
&&&&&&&&&&&&&&&&&& alert(&你超牛X，猜对了！&);&&
&&&&&&&&&&&&&&&&& }&
&&&&&&&&&&&&& if(count&=6&&count&3){&
&&&&&&&&&&&&&&&&&& //输出一句话，&&
&&&&&&&&&&&&&&&&&& alert(&你还可以，也猜对了！&);&&
&&&&&&&&&&&&&&&&& }&
&&&&&&&&&&&&& if(count&=10&&count&6){&
&&&&&&&&&&&&&&&&&& //输出一句话，&&
&&&&&&&&&&&&&&&&&& alert(&勉强，也猜对了！&);&&
&&&&&&&&&&&&&&&&& }&
&&&&&&&&&&&&& //标志位设置false&&
&&&&&&&&&&&&& falg=&&
&&&&&&&&&&& }&
&&&&&&&&&&&&&
&&&&&&&&&&&&&
&&&&&&&&&&&&&
&&& }else{&
&&&&&&&&&&&&& //输出一句话，&&
&&&&&&&&&&&&& alert(&我晕，10次都没有猜对，怎么搞的？！&);&&
&&&&&&&&&&&&& //标志位设置false&&
&&&&&&&&&&&&& falg=&&
&&&&&&& }&
&/script&&
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &&&
&html xmlns=&&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&猜猜看&/title&
//随机产生一个随机整数
//&&&&&&&&&& 四舍五入&&&&&& 随机数（0-1）
var num = Math.round(Math.random()*1000);
//定义一个标志变量
//定义一个变量，统计猜得次数
var count=1;
document.write(&&br&&br&&br&&br&&br&&br&&br&&br&&);
//执行while循环
while(falg){
&if(count&=10){
&&//第一步，接受用户输入的内容
&&var inputnum=prompt(&请输入您要猜得数字!&,1);
&&//第二步，把用户输入的内容和产生的随机数进行比较
&&& //三种情况： 1)输入的数大于产生随机数& 提示&大了&
&&& if(inputnum&num){
&&&& //输出一句话，
&&&& document.write(&这是您第&+count+&次机会,您本次输入的数字为&+inputnum+&,您输入的数字大了&br&&);&
&&&& count++;
&&& //三种情况： 2)输入的数小于产生随机数& 提示&小了&
&&& if(inputnum&num){
&&&& //输出一句话，
&&&& document.write(&这是您第&+count+&次机会,您本次输入的数字为&+inputnum+&,您输入的数字小了&br&&);
&&&& count++;
&&& //三种情况： 1)输入的数等于产生随机数& 提示&对了& ，设置标志位为
&&& if(inputnum==num){
&&&& if(count&=3){
&&&&&& //输出一句话，
&&&&&&&&& alert(&你超牛X，猜对了！&);
&&&& if(count&=6&&count&3){
&&&&&& //输出一句话，
&&&&&&&&& alert(&你还可以，也猜对了！&);
&&&& if(count&=10&&count&6){
&&&&&& //输出一句话，
&&&&&&&&& alert(&勉强，也猜对了！&);
&&&& //标志位设置false
&&&& falg=
&&&&&&& //输出一句话，
&&&& alert(&我晕，10次都没有猜对，怎么搞的？！&);
&&&& //标志位设置false
&&&& falg=
有兴趣的同学研究下~
&作者&liwei3gjob的专栏&html5实现一个简单的多人飞机游戏实例详解-H5教程-PHP中文网QQ群微信公众号还没有收藏html5实现一个简单的多人飞机游戏实例详解一年多前见过一个多人聊天室应用，是张丹老师写的一个 socket.io 教程 （原链接点不开，贴一个转帖的），觉得socket这个东西很神奇。后来研究生期间的一个项目也用到了.Net的socket，多个客户端之间的通信， 觉得很有意思，也是那一次比较全面地认识和应用了委托等等一些概念。最近受群里研究mapbox的热情和@扯淡大叔， @老羽 @F3earth 所有成员的帮助和启发， 突发奇想花了点时间基于mapbox gl js和socket.io做了一个 飞机大战游戏！，虽然功能界面很简陋。而且代码也比较原始，还没有好好重构。但是基本有了个架子，简单记下来分析下。如果对源码感兴趣或者想参与开发和优化工作，请访问git仓库: Jqmap2整体架构简单来说，整个游戏的设计思路就是：服务器从启动开始就监听任何客户端发来了websocket 连接请求，有了连接（connection事件）后，就把客户端初次发来的用户名称、当前飞机的坐标、朝向作为一个client 加入客户端数据池（目前简单处理为clients）中。那么至此一个客户端的数据就同步到了服务器端。以后这个客户端的飞机坐标、朝向等信息也定时发送（socket.send）给服务器端，以便于服务器端同时广播（broadcast）给所有其他客户端。那么其实服务端就说清楚了，也就是负责中转消息，目的还是让所有客户端视野中的玩家飞机保持一致。既然websocket是双向通信，客户端也需要定时发送消息给服务器端，并且更重要的是处理服务器端发来的各种消息（message事件），分辨哪些是欢迎用户上线的消息，普通的玩家位置同步消息，抑或是 A 击败了 B 这样的消息。这一过程中前端和服务器保持着websocket 连接，并且不断在通信。相比传统的轮询和long poll，这样更加节省流量和性能。总体来说，游戏的逻辑是基于各种消息事件的，connection事件产生一个socket连接，socket连接会有message 事件等等。后端websocket废话说了这么多，简单看看一些关键代码如何实现。// 后端关键流程实现var app = express(),
server = require('http').createServer(app),
io = require('socket.io').listen(server); // 引入socket.io 库
io.on('connection', function(socket) { // 开始监听客户端的websocket连接请求，connection事件产生 socket 对象
socket.emit('open'); // 向该客户端发送open事件.
// init client drone obj for each connection !!
var client = {
name: false,
color: getColor(),
direction: 0,
coordinates: [0, 0]
// message from client.
socket.on('message', function(msg) {
if (!client.name && msg.name) { // 如果是第一次连接，把用户的名字存储起来，并且广播给所有客户端。
= { }; // 构建发送给其他客户端的消息
clients.push(client); // 加入后台维持的客户端数组
socket.broadcast.emit('message', obj); // 广播欢迎语给其他客户端
} else if ( client.name == msg.name ) { // 客户端发来的飞机状态消息
// 广播给其他客户端
socket.broadcast.emit('message', obj);
}后台处理过程相对简单，基本只需接受某客户端发来的消息，转发给其他客户端即可( 随机敌机位置什么的就不讲了，当然后期要改成所有客户端共享一套敌机信息，这样就可以一起打同一个BOSS了)。但前端需要根据业务需求将服务器传来的消息分别处理前端socket和飞机前端业务相对复杂， 除了应对websocket 消息之外，需要构建一套飞机的数据模型，包括位置，速度，朝向，血量，武器装备等（可以非常复杂，目前就简单处理）。
socket = io.connect(&http://123.206.201.245:3002&);
socket.on('open', function(){
// 当服务端确认连接后，开始发送第一次数据。
statusBar.innerText = &已经连上服务器..&;
var askName = prompt(&来，取个名字&, &&);
socket.on(&message&, function(json) { // 其实收到的是js 对象，这一点很牛逼。因为双向通信过程中传递的是 Binary 形式的数据，不需要再次解析了。
if (json.type === &welcome& && json.text.name) {
// .. 显示其他用户登录消息
} else if (json.type === &defeat&) {
// .. 在前端的敌机数据模型中移除空血槽的飞机
} else if (drone && json.text.name != drone.name) {
// .. 传来的其他客户端飞机消息
featureCol.features.forEach(function(drone) {
// featureCol 是所有敌机数据集合，根据用户名check是更新还是新增.
}其他问题包括：飞机的数据涉及到随时变更服务器，以及渲染两个用处。渲染采用geojson对象 作为 mapbox api中source 的data，那么是否是一接到服务器端消息就去重绘所有飞机位置呢。这边通过setInterval 定时调用source 的 setData()方法，实现重绘。飞机子弹的轨迹计算，涉及到用户按下空格键的瞬间飞机的位置和朝向，根据设定的子弹飞行时间做一个动画显示子弹和敌机的碰撞检测，简化处理：设定一个常数作为飞机体积，在子弹飞行过程中实时计算子弹和敌机距离。在地图处于小比例尺下增大检测半径，地图处于大比例尺下相应减小检测半径。目前可能子弹飞行过程中碰撞检测的计算量偏大，会有卡顿问题，CPU占用较高，整个应用消耗内存100~130Mb左右... 好多小问题不说了。。确实废了一些脑子。挑一两点分析下，一个是子弹的飞行过程，一个是Robot敌机的随机行为控制// setPostion is to update Mydrone position.
function setPosition() {
// direction in Rad. Generally, 1 Rad stands for 100km
var current_rotate = map.getBearing();
if (!manual && Math.random() & 0.95) { // 这边有意思，在每秒50帧的情况下，不是每一帧都会随机微调飞机的方向。而是5%的概率。
direction += (Math.random() - 0.5) /5;
// 根据飞机朝向和速度更新位置。
point.coordinates[0] += speed * Math.sin(direction) / 100;
point.coordinates[1] += speed * Math.cos(direction) / 100;
// 校正飞机的朝向显示。因为默认情况下mapbox是根据你的视角随时调整图标方向。但实际上飞机图标的朝向必须和飞机运行方向一致，而不是简单的和标注一样。
current_rotate = (-current_rotate) + direction * (180 / Math.PI);
}以下是子弹飞行的计算过程.// start: fire location, target: bullet destination, duration: total animation time
function renderBulvar(start, target, direction, duration) {
// target is geojson POINT, add Temp point in layer..
var interval = 20, ratio = interval/duration, real_point = start, range = 0.4, count = 0, hitted =
if (target.coordinates) {
var targetSource = map.getSource('drone-target');
window.setInterval(function(){
if (count & duration/interval) { // 到达终点，不计算了
// 子弹每一帧跑一定比例的路程，最终到达指定终点
real_point.coordinates[0] += Math.sin(direction)*ratio*
real_point.coordinates[1] += Math.cos(direction)*ratio*
targetSource.setData(real_point);
if (!hitted){
hitted = testCrash(real_point.coordinates); // 感觉这里的hitted 有问题.
count += 1;
}, interval);
}到这里其实基本介绍了这个游戏的制作过程，经历了一些不成熟的想法，总共花了近十个小时完成目前的开发。还没有严谨地考虑过代码结构和 复杂程序，特别是子弹飞行和碰撞等部分，碰撞到后就终结子弹飞行等等。各位如果感兴趣，愿意完成 To DO list中的事情或者有何建议，请访问git仓库: Jqmap2 。请各位大神多提修改意见！喜欢的同学请关注、收藏相关专题，会不断更新文章。希望和大家分享！！【相关推荐】1. 特别推荐：2. 3. 以上就是html5实现一个简单的多人飞机游戏实例详解的详细内容，更多请关注php中文网其它相关文章！共3篇832点赞收藏分享：.php.cn&猜你喜欢PHP中文网：独家原创，永久免费的在线，php技术学习阵地！
All Rights Reserved | 皖B2-QQ群:关注微信公众号如何开发一个简单的HTML游戏【html吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：104,439贴子：
如何开发一个简单的HTML游戏收藏
一楼正在施工……不知道有没有人看
html培训,千锋Html5培训,名企内部推荐就业,面对面教学模式,成就高薪互联网工程师!html培训,企业级项目实战,总监级名师面授,0基础20周速成为web开发工程师,高薪就业!
看这个帖子要有JS基础，主要用的是HTML5的CANVAS标签，中文名画布，楼主也是学来玩玩，跟大家分享一下
www点cnblogs点com/Wayou/p/how-to-make-a-simple-html5-canvas-game点html，楼主一开始学是从这个人的博客里拿到这位大神所写好的一个小小的游戏引擎
这是一个大神写的小游戏，很精练，小小麻雀五脏俱全，这个游戏引擎包括JS创建画布，画布加载图片，游戏的主函数，游戏的按键操作实践，整一个游戏流程有一个清晰的思路
那个博客上面说过的东西我就不再说一遍了，现在直接开始我改造游戏的过程
首先，那个博客里的源代码是很简单的，代码行数很少，只有一个主要的game.js，改造会增加成吨的代码，所以我首先把构造函数分离出来了
先把后期效果发出来看一下哈哈
原来的样子我改造过后的样子
我做成了一款打飞机游戏，所以从图像可以看出有4种对象要创建，玩家自身的飞机，敌人的飞碟，陨石，导弹。
于是就需要4个构造函数：function msl(){
this.speed= 1; // movement in pixels per second
this.angle= 0; //前进方向
this.on= //是否正在使用}function hero(){
this.speed= 256; // movement in pixels per second
this.angle= 0; //前进方向
this.angleSpeed= 30; //角速度
this.sldPower= 100; //护盾能量}function monster(){
this.speed=1.5;
this.angle=0;
this.life=}function meteorite(){
this.speed=1;
this.angle=0;
this.angleSeft=0;}
NIIThtml5,高大上的品牌,值得你选择.承诺先上课,后付款,不满意,我们退全款!为你的学习免去后顾之忧.
这样就方便创建多个对象了，把这些代码保存起来，放在index.html里面，先于game.js加载就可以使用了。
有了对象我们还需要一些变量来构造这个游戏。////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////初始化变量//轨迹Arrayvar arrayX=new Array();var arrayY=new Array();var num = 0;//轨迹序列//怪物数量var monsterNum=3;var monsterList=new Array();var kill=0;//被杀死的敌人数量//陨石列表var meteoriteNum=4;var meteoriteList=new Array();var meteoriteReady=//导弹列表var mslList=new Array();var mslReady = new Array();var mslN=100;//导弹尾焰var mslZ=new Array();//导弹尾焰的序列数组var mslX=new Array();//导弹尾焰X坐标数字var mslY=new Array();//导弹尾焰Y坐标数组//尾焰点坐标var wx = 0;var wy = 0;var wyReady=//护盾开关var sldSwitch=
这些变量怎么用我会后面一个个说明。
首先创建画布，然后加载所有图片对象，按照之前提到的博客里的来做。
然后开始创建对象：//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////创建游戏对象// Game objectsvar hero =new hero();//导弹列表for(var i=0;i&mslN;i++){
mslList.push(new msl());
mslReady.push(false);}//陨石列表for(var i=0;i&meteoriteNi++){
meteoriteList.push(new meteorite());}//怪物列表for(var i=0;i&monsterNi++){
monsterList.push(new monster());
当然这些对象不是我一开始就全部想好的，都是一步步加进去的，为了方便观看我一次性整合了。所以现在我先说玩家操纵的对象整一个的完善思路。首先我在构造函数里面给了玩家3个属性，速度、前进方向，角速度，护盾能量。我所设想的玩家是通过前进和改变方向来移动的，并不是简单的上下左右，让这个游戏更有操作感。
接着就是要改造按键监听事件了。//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////操作及UPDATA// Update game objectsvar update = function (modifier) {
if(hero.y&=0&&hero.y&=canvas.height&&hero.x&=0&&hero.x&=canvas.width){
if (38 in keysDown) { // Player holding up
hero.y -= hero.speed * modifier * Math.cos(hero.angle* Math.PI / 180);
hero.x += hero.speed * modifier * Math.sin(hero.angle* Math.PI / 180);
if (40 in keysDown) { // Player holding down
hero.y += hero.speed * modifier * Math.cos(hero.angle* Math.PI / 180)/10;
hero.x -= hero.speed * modifier * Math.sin(hero.angle* Math.PI / 180)/10;
if (37 in keysDown) { // Player holding left
hero.x += hero.speed * modifier * Math.sin((hero.angle-90)* Math.PI / 180)/10;
hero.y -= hero.speed * modifier * Math.cos((hero.angle-90)* Math.PI / 180)/10;
if (39 in keysDown) { // Player holding right
hero.x -= hero.speed * modifier * Math.sin((hero.angle-90)* Math.PI / 180)/10;
hero.y += hero.speed * modifier * Math.cos((hero.angle-90)* Math.PI / 180)/10;
if (87 in keysDown)
hero.sldSwitch=
hero.speed=128;
hero.sldSwitch=
hero.speed=256;
if (49 in keysDown)
for(var i=0;i&mslN;i++){
if(mslList[i].on==false)
mslList[i].angle=hero.
mslList[i].x=hero.x;
mslList[i].y=hero.y;
mslList[i].on=
mslReady[i]=
delete keysDown[49];
//alert(mslList[0].on+& &+mslList[1].on+& &+mslList[2].on);
wyReady_100();
if (81 in keysDown) { // Player holding right
hero.angle = hero.angle + hero.angleSpeed/10;
if (69 in keysDown) { // Player holding right
hero.angle = hero.angle - hero.angleSpeed/10;
stopKey();
wyReady_100();
alert(&撞了！&);
resetWy();
resetPlayer();
首先我们在按键监听事件里面增加一个判断if(hero.y&=0&&hero.y&=canvas.height&&hero.x&=0&&hero.x&=canvas.width)这个判断用来判断玩家是否越过这个画布的边界，如果越过了将会提示。
然后就是我们的方向键前，这里的监听事件都是按键盘的编码来的，前进方向是38号，为了对象能够按前进方向移动，我们要做一些高中数学计算。
hero.y -= hero.speed * modifier * Math.cos(hero.angle* Math.PI / 180); hero.x += hero.speed * modifier * Math.sin(hero.angle* Math.PI / 180);这段代码的意思就是，玩家的Y坐标=玩家当前的Y坐标+玩家的速度*时间*玩家前进方向的余弦值。由于js里面Math对象用的是弧度，并不是角度，所以要乘以π除以180。后退方向键的代码就相反，左右的则+90度或者-90度。我希望玩家更多用前进按钮操作，所以我将其它方向移动的速度减慢。
if (81 in keysDown) { // Player holding right
hero.angle = hero.angle + hero.angleSpeed/10;
if (69 in keysDown) { // Player holding right
hero.angle = hero.angle - hero.angleSpeed/10;
}我设置了Q键和E键为转向的按键，分别加减玩家前进方向的角度。
if (87 in keysDown)
hero.sldSwitch=
hero.speed=128;
hero.sldSwitch=
hero.speed=256;
}W键设置为护盾开关，按住则开松开则关，开启时玩家速度降低
if (49 in keysDown)
for(var i=0;i&mslN;i++){
if(mslList[i].on==false)
mslList[i].angle=hero.
mslList[i].x=hero.x;
mslList[i].y=hero.y;
mslList[i].on=
mslReady[i]=
delete keysDown[49];
//alert(mslList[0].on+& &+mslList[1].on+& &+mslList[2].on);
wyReady_100();
}数字键1发射导弹，发射时，为导弹的各种属性赋值玩家当前属性，然后弹起按钮防止他按下就将全部导弹一次性发射出去，设置尾焰的准备为FALSE，等导弹飞出去再开始绘制，跳出循环。不这样做，尾焰会错综复杂，我希望尾焰是分别跟在每个导弹后面的。
接下来让我们看看这个玩家的绘制。//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////坐标转换以及画图// Draw everythingvar render = function () {
if (bgReady) {
ctx.drawImage(bgImage, 0, 0);
if (heroReady) {
ctx.save();//保存状态
var angle = hero.angle * Math.PI / 180; // angle of rotation in radians
var rx = hero.x, ry = hero.y; // the rotation x and y
var px = hero.x, py = hero.y; // the objects center x and y
var radius = ry - // the difference in y positions or the radius
var dx = rx + radius * Math.sin(angle); // the draw x
var dy = ry - radius * Math.cos(angle); // the draw y
var wx = rx - (radius+heroImage.height/2) * Math.sin(angle); // the draw y
var wy = ry - (radius-heroImage.height/2) * Math.cos(angle); // the draw y
//ctx.drawImage(heroImage,hero.x-heroImage.width/2,hero.y-heroImage.height/2);
ctx.translate(dx,dy);//设置画布上的(0,0)位置，也就是旋转的中心点
ctx.rotate(angle);
ctx.translate(-dx, -dy);
ctx.drawImage(heroImage,dx-heroImage.width/2,dy-heroImage.height/2);//把图片绘制在旋转的中心点,
ctx.restore();//恢复状态
//更新轨迹
arrayXY_0(wx,wy);
arrayXY_100(wx,wy);
因为有旋转，所以要先保存画布的状态。ctx.save();//保存状态计算玩家需要旋转的弧度。计算旋转圆心。要根据对象的点和圆心的点找到旋转之后对象在的点。这里旋转中心就是玩家自己，所以radius是为0的；尾焰在对象中心稍微后面一点的位置，所以根据图像长度计算一下。设置旋转点，旋转，画图，一气呵成。最后更新尾焰，分成两段更新，让尾焰有一种会随着前进方向弯曲的感觉。
不考虑尾焰和护盾的绘制，到这里飞船的操作就已经完成了。
有人看再更。
登录百度帐号他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)&&3175 阅读
本文章首发自我的博客
http://blog.csdn.net/lufy_legend/article/details/7063316
在游戏的世界里，我们可以看到各种地图，各种游戏人物，看到人物在地图上行走，对话等，无论是地图还是人物，其实都是图片的处理与显示，把不同的图片显示到屏幕上，我们就看到不同的游戏界面，要想让这些图片同时显示到界面上，我们就需要处理好层次，让他们来分层显示，我们可以想象，如果游戏人物显示在地图的下层的话，显然会被地图遮挡住。
一款RPG游戏，我简单把它分为地图层，人物层，效果层(一些法术效果等)，对话层，控制层(按钮菜单等)。
我们只要依次将图片画在屏幕上，游戏人物将站在地图上，如果有对话，对话将出现在人物和地图的上面，而按钮等控件会出现在游戏的最外层
下面，我们一步步来实现一个简单的RPG游戏的开发
一，引擎下载
本游戏开发，需要用到HTML5开源引擎lufylegend.js
下载地址为：http://lufylegend.com/lufylegend
首先建立一个文件夹rpg(你也可以起其他的名字)
将下载好的lufylegend.js引擎的最新版本放到与rpg文件夹同目录
然后，在rpg文件夹里建一个index.html文件和一个js文件夹，在js文件夹里建一个Main.js文件
最后，在index.html里加入下面的代码
&!DOCTYPE html&
&meta charset=&UTF-8&&
&title&rpg&/title&
&div id=&mylegend&&loading……&/div&
&script type=&text/javascript& src=&./llufylegend-1.7.5.js&&&/script&
&script type=&text/javascript& src=&./js/Main.js&&&/script&
&/body&&/html&
游戏地图的实现
接下来，我们先来画最底层的地图层，
地图当然就是是由图片来组成的，如何在画面上显示一张图片，我之前已经写过专门的文章，代码如下
function main(){
loader = new LLoader();
loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);
loader.load(&map.jpg&,&bitmapData&);
function loadBitmapdata(event){
var bitmapdata = new LBitmapData(loader.content);
var bitmap = new LBitmap(bitmapdata);
addChild(bitmap);
游戏中的地图可以是一张比较大的图片，即整个图片就是游戏的地图，当人物或者地图移动的时候，改变图片显示的区域范围，从而实现地图的滚动和显示等，这样的话，必须为每个场景准备一张地图。
另外，地图也可以是由许多小的地图块儿来组成，比如，我们熟悉的《吞食天地》，《勇者斗恶龙》等经典小型rpg游戏，这样的地图，我们需要准备一张或几张地图块儿，把这些地图块组合成地图来显示，比如下图
在地图显示的时候，首先把图片切割，然后在根据预先设定好的位置显示到地图层上，这样我们就看到了一张完整的地图了
接下来，打开Main.js
在里面加入
init(50,&mylegend&,480,320,main);
在lufylegend.js引擎中，用init这个函数来初始化canvas，上面的代码表示，初始化一个速度为50，名字为mylegend，大小为480*320的游戏界面，初始化完成后调用main(),这个速度值是说每个多少毫秒游戏循环一次，所以这个值设定的越小，游戏运行的速度就越快
因为要调用main方法，所以我们要写一个main方法，main方法里做一些简单的准备工作。
虽说读取图片只需要一个
loader.load(&map.jpg&,&bitmapData&);
但是游戏中往往用到很多张图片，你可以用到哪一张再加载哪一张，也可以一次性全部加载完，然后再开始显示游戏
为了一次性把图片加载完，我的做法是，将需要的图片放到一个数组里，然后设定一个索引，每加载一个图片，让这个索引加1，当这个索引小于数组的长度，则继续加载，直到将数组中的图片全部加载完，然后开始进行下一步的工作
具体实现看下面的代码
//图片path数组
var imgData = new Array();
//读取完的图片数组
var imglist = {};
function main(){
//准备读取图片
imgData.push({name:&map&,path:&./image/map.jpg&});
imgData.push({name:&mingren&,path:&./image/mingren.png&});
imgData.push({name:&e1&,path:&./image/e1.png&});
imgData.push({name:&e2&,path:&./image/e2.png&});
//实例化进度条层
loadingLayer = new LSprite();
loadingLayer.graphics.drawRect(1,&black&,[50, 200, 200, 20],true,&#ffffff&);
addChild(loadingLayer);
//开始读取图片
loadImage();
function loadImage(){
//图片全部读取完成，开始初始化游戏
if(loadIndex &= imgData.length){
removeChild(loadingLayer);
gameInit();
//开始读取图片
loader = new LLoader();
loader.addEventListener(LEvent.COMPLETE,loadComplete);
loader.load(imgData[loadIndex].path,&bitmapData&);
function loadComplete(event){
//进度条显示
loadingLayer.graphics.clear();
loadingLayer.graphics.drawRect(1,&black&,[50, 200, 200, 20],true,&#ffffff&);
loadingLayer.graphics.drawRect(1,&black&,[50, 203, 200*(loadIndex/imgData.length), 14],true,&#000000&);
//储存图片数据
imglist[imgData[loadIndex].name] = loader.
//读取下一张图片
loadIndex++;
loadImage();
上面的代码不难明白，当图片没有读取完之前，会不断循环loadImage和loadComplete两个方法，当读取完之后，移除进度条，用legendLoadOver告诉游戏已经读取完成，然后调用gameInit方法，进行游戏的初始化工作。
看gameInit方法
function gameInit(event){
//游戏层显示初始化
layerInit();
//添加地图
//添加人物
addChara();
在gameInit方法中，首先进行游戏层的初始化，然后添加游戏地图，然后添加人物
游戏层显示初始化，按照我们一开始所说，我们一次来初始化地图层，人物层，效果层，对话层，控制层
//游戏层显示初始化
function layerInit(){
//游戏底层添加
backLayer = new LSprite();
addChild(backLayer);
//地图层添加
mapLayer = new LSprite();
backLayer.addChild(mapLayer);
//人物层添加
charaLayer = new LSprite();
backLayer.addChild(charaLayer);
//效果层添加
effectLayer = new LSprite();
backLayer.addChild(effectLayer);
//对话层添加
talkLayer = new LSprite();
backLayer.addChild(talkLayer);
//控制层添加
ctrlLayer = new LSprite();
backLayer.addChild(ctrlLayer);
有了游戏层次的划分，我们在添加游戏对象的时候，将地图添加到地图层，人物添加到人物层，他们就会依次显示在游戏的界面上
下面开始添加地图
首先我们需要准备好显示地图的数组
//地图图片数组
var map = [
[18,18,18,18,18,18,18,18,18,18,18,18,55,55,18],
[18,18,18,17,17,17,17,17,17,17,17,17,55,55,18],
[18,18,17,17,17,17,18,18,17,17,17,17,55,55,18],
[18,17,17,17,18,18,18,18,18,17,17,55,55,17,18],
[18,17,17,18,22,23,23,23,24,18,17,55,55,17,18],
[18,17,17,18,25,28,26,79,27,18,55,55,17,17,18],
[18,17,17,17,17,10,11,12,18,18,55,55,17,17,18],
[18,18,17,17,10,16,16,16,11,55,55,17,17,17,18],
[18,18,17,17,77,16,16,16,16,21,21,17,17,17,18],
[18,18,18,18,18,18,18,18,18,55,55,18,18,18,18]
这些数字分别对应着图中如下位置
然后看下面代码
//添加地图
function addMap(){
var i,j,index,indexX,indexY;
var bitmapdata,
//地图图片数据
bitmapdata = new LBitmapData(imglist[&map&]);
//将地图图片拆分，得到拆分后的各个小图片的坐标数组
imageArray = LGlobal.divideCoordinate(bitmapdata.image.width,bitmapdata.image.height,10,10);
//在地图层上，画出15*10的小图片
for(i=0;i&10;i++){
for(j=0;j&15;j++){
//从地图数组中得到相应位置的图片坐标
index = map[i][j];
//小图片的竖坐标
indexY = Math.floor(index /10);
//小图片的横坐标
indexX = index - indexY*10;
//得到小图片
bitmapdata = new LBitmapData(imglist[&map&],indexX*32,indexY*32,32,32);
bitmap = new LBitmap(bitmapdata);
//设置小图片的显示位置
bitmap.x = j*32;
bitmap.y = i*32;
//将小图片显示到地图层
mapLayer.addChild(bitmap);
这样，我们就把预先设置好的图片显示到了游戏界面上，形成了地图
先把addChara方法加上
//添加人物
function addChara(){
然后运行游戏
可以得到下面画面
游戏人物的实现
为了更好的实现游戏人物的控制，我们新建一个游戏人物类Character.js
里面代码如下
function Character(data,row,col,speed){
base(this,LSprite,[]);
var self =
//设定人物动作速度
self.speed = speed==null?3:
self.speedIndex = 0;
//设定人物大小
data.setProperties(0,0,data.image.width/col,data.image.height/row);
//得到人物图片拆分数组
var list = LGlobal.divideCoordinate(data.image.width,data.image.height,row,col);
//设定人物动画
self.anime = new LAnimation(this,data,list);
Character.prototype.onframe = function (){
var self =
if(self.speedIndex++ & self.speed)
self.speedIndex = 0;
self.anime.onframe();
在lufylegend.js引擎里，有一个LAnimation类，用来实现图片数组顺序播放，形成动画
使用LAnimation类需要三个参数，一个是显示动画的层，一个是图片，一个是图片的坐标数组
然后，调用LAnimation类的onframe方法，就可以实现动画的播放了
在index.html中引入Character类，然后修改addChara方法，
//添加人物
function addChara(){
bitmapdata = new LBitmapData(imglist[&mingren&]);
player = new Character(bitmapdata,4,4);
player.x = 32*5;
player.y = 32*6;
charaLayer.addChild(player);
在gameInit的末尾添加循环事件
//添加贞事件，开始游戏循环
backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);
最后，添加onframe方法
function onframe(){
player.onframe();
运行代码，看到了吗
一个会动的鸣人出现在游戏的地图上了
http://lufylegend.com/demo/rpg/index.html
lufylegend.js引擎包内包含这个demo，请直接下载lufylegend.js引擎，查看引擎包内源码
lufylegend.js引擎下载地址
http://lufylegend.com/lufylegend
下次，就要添加控制层，实现人物的走动和地图的滚动等，希望大家多多支持。