canvas及lufylegend引擎

随着对canvas的深入了解,发现canvas真是个好东西,也发现android真烂,哎!

最近在用canvas做小游戏,简单的跑酷类,打地鼠类的小游戏做了一遍,今天先写一个打地鼠的制作心得。

PS:以前用JS做过打地鼠的游戏,现在看看真心烂。

首先我使用的是lufylegend.js 1.9.1的版本(非常好用的引擎,强烈推荐)。

在制作过程中先来分析打地鼠的游戏大概需要那几个模块:1.老鼠这个对象。

                          2.游戏背景。

                          3.开始及结束。

首先来初始化引擎,lufylegend.js引擎初始化通过LInit(time,"id",x,y,main)实现;

引擎提供loading效果,当图片及js加载完毕后,删除loading效果,进入开始界面。

function main(){
if(LGlobal.canTouch){
LGlobal.stageScale = LStageScaleMode.SHOW_ALL;
LSystem.screen(LStage.FULL_SCREEN);
}
loadingLayer = new LoadingSample4();
addChild(loadingLayer);
LLoadManage.load(loadData, function(progress) {
loadingLayer.setProgress(progress);
}, imgLoadComplete);
};
function imgLoadComplete(result) {
datalist = result;
removeChild(loadingLayer);
loadingLayer = null;
var background = new Background();

开始界面先执行background函数来实现背景的创建,在background里来执行time、character函数;

function Background(){
base(this,LSprite,[]);
this.init();
};
Background.prototype.init = function(){
var self = this;
backLayer = new LSprite;
stageLayer = new LSprite;
addChild(backLayer);
self.bitmap = new LBitmap(new LBitmapData(datalist["background"],0,0,640,960));
backLayer.addChild(this.bitmap);
//console.log(this.bitmap.childList);
self.back = new LBitmap(new LBitmapData(datalist["backCove"],0,0,640,960));
self.back.x = 0;
self.back.y = 0;
backLayer.addChild(self.back);

timeLayer = new LSprite();
backLayer.addChild(timeLayer);
time = new Time();
timeLayer.addChild(time);
charaLayer = new LSprite();
backLayer.addChild(charaLayer);
};

time函数是通过时间来控制进度条的缩放,通过scroleX来改变时间进度条的长短。

character函数创建对象,通过对象的操控可以方便的对每个对象进行事件监听。

function Character(){
base(this,LSprite,[]);
this.init();
};
Character.prototype.init = function(){
var self = this;
self.x = adressData[adressNum][0];
self.y = adressData[adressNum][1];
self.adressNum = adressNum;
var charaNum = parseInt(Math.random()*4);
self.index = charaNum;
self.bitmap = new LBitmap(new LBitmapData(datalist[charaData[charaNum]]));
self.addChild(self.bitmap);
self.speed = 5;
self.canClick = false;
self.clickSpeed = 2;
};

当然要注意的是地鼠出现的位置不能重复,我通过数组的方法,每次随机出现的位置与数组内做比较,如果重复则重新随机数,不重复添加到数组中,并对对象进行赋值。当打到地鼠的时候删除数组中的这个位置。

Character.prototype.hide = function(obj){
var self = obj;
self.bitmap = new LBitmap(new LBitmapData(datalist[charaData[self.index][0]+"J"]));
charaLayer.addChild(self);
self.canClick = true;
self.addChild(self.bitmap);
self.x = adressData[self.adressNum][0];
self.y = adressData[self.adressNum][1];
for(var key in charaLayer.childList){
charaLayer.childList[key].clickSpeed -= 1;
if(self.canClick == true && charaLayer.childList[key].speed <= 0){
//移除该成员
var that = charaLayer.childList[key];
point += 100;
arr.remove(that.adressNum);
charaLayer.removeChild(charaLayer.childList[key]);
}
}
};
Character.prototype.run = function(){
var self = this;
for(var key in charaLayer.childList){
charaLayer.childList[key].speed -= 2;
if(self.canClick == false && charaLayer.childList[key].speed <= 0){
//移除该成员
arr.remove(charaLayer.childList[key].adressNum);
charaLayer.removeChild(charaLayer.childList[key]);
}
}
}

当然这是对charaLayer这个层上的对象进行操作,canvas游戏特别要注意层的这个概念。而且面向对象的思想也很重要。

在地鼠这个对象上要添加相应属性,方便后续操作的判断。首先判断这个地鼠是否被打中,我通过self.canClick属性来判断,若为false则没打中,改变速度,2秒后消失,如果打中值为true,更换图片,2秒后消失。

分数的加减在点击事件中,很简单。

gameover时,删除backLayer上所有层,增加一个层,显示游戏结束。

游戏不难,只要思路清晰,便很快能完成,理解层的概念,面向对象的思想,就OK了;

时间: 2024-10-13 21:03:35

canvas及lufylegend引擎的相关文章

H5canvas赛车游戏-基于lufylegend引擎

lufylegend引擎是canvas游戏中,比较简单的引擎之一,它不需要配置环境,类似引入jquery包的方式,引用对应js文件即可 lufylegend官方网站:http://www.lufylegend.com/ 首先看下游戏的截图    游戏设计比较粗糙,逻辑也很简单,就是通过点击左右来控制红色的汽车躲避对面开过来的车,若发生碰撞则游戏结束,另游戏速度会越来越快 游戏演示地址:http://htmlpreview.github.io/?https://github.com/gavin12

canvas和白鹭引擎中平移,旋转,缩放

canvas中的 translate() 和白鹭引擎中的 .x 或者 .y  所导致的平移效果并不是移动 目标元素,而是移动目标元素父亲所在的坐标系. 例如 bgg.translate(100,100) 所表达的含义是将父亲元素所在的坐标系 向右和向下 偏移100 px. 而设置元素大小时 context.fillRect(0, 0, 100, 100) 这里的前两个参数是 真 的 设置偏移量,表示 向右和向下 偏移100px.是设置距离父亲元素的偏移量. 设置旋转,不管是canvas还是白鹭引

为lufylegend引擎添加了两个扩展类LMovieClip和LTimer

之前有提到过,今天发到git上了,并且作一下说明吧. 这两个类都是依照as3中对应的类来写的,所以用法都一样,并且有完整的示例供参考,地址: http://git.oschina.net/lonewolf/lufylegendLib . 因为javascript不支持get和set属性,所以有关的属性都改为方法,如repeatCount属性为setRepeatCount和getRepeatCount. 其它的话都一样了,具体可以看看源码,有详细的注释,应该很容易看懂. 另外这两个类已经提交给lu

Html5+Lufylegend.js游戏开发(一)引擎介绍及原理

Yorhom|2013-09-26 10:30|次浏览| 游戏开发(4)HTML5(124)游戏引擎(33)Lufylegend.js(1) Html5游戏开发最近受到很多开发者的关注.但是html5本身不是为游戏开发而量身定造的,所以开发起来十分麻烦.因此挑选好的引擎对游戏开发十分有帮助. 在游戏开发中,有这么几种程序语言: C++配合OpenGL(移动端游戏开发) C++配合DirectX(PC端游戏开发) Java (移动端游戏开发) ActionScript(网页游戏开发) html5在

使用Html5+C#+微信 开发移动端游戏详细教程 :(三)使用html5引擎搭建游戏框架

教程里的案例我们是通过H5游戏引擎开发,目前H5的游戏引擎比较好用的是白鹭,不过对于新手来说白鹭的开发环境和工具使用过于复杂,这里推荐一个国内大神编写的游戏引擎:lufylegend. 直接在页面引入Js文件,就可以开发了,运行效率非常高效,语法是仿AS3语法,懂C#的人上手会很快. Lufylegend引擎具体的API和使用方法可以参考官网和论坛: http://www.lufylegend.com/api/zh_CN/out/classes/FPS.html 之前微信上有一款"怪兽必须死&q

开源HTML5 Canvas游戏Runtime发布

Cantk-Runtime是通用的HTML5 Canvas 2D游戏引擎运行库,让HTML5游戏的性能飞起来.Cantk-Runtime以PhoneGap插件的方式提供,从此结束PhoneGap低性能的恶名! Cantk-Runtime提供高效的HTML5 Canvas绘图API.兼容HTML5 Audio的游音乐/音效播放接口和原生的编辑器接口, 让HTML5 Canvas 2D游戏只需要简单的适配就可以跑起来. 欢迎加入QQ群 :223466431 特色 0.开源.开放全部源码,可用于商业和

速度挑战 - 2小时完成HTML5拼图小游戏

初学lufylegend.js之日,我用lufylegend.js开发了第一个HTML5小游戏--拼图游戏,还写了篇博文来炫耀一下:HTML5小游戏<智力大拼图>发布,挑战你的思维风暴.不过当时初学游戏开发,经验浅薄,所以没有好好专研游戏里的算法和代码的缺陷,导致游戏出现了很多bug,甚至拼图打乱后很可能无法复原.最近经常有朋友问起这个游戏,希望我能把代码里的bug改一下方便初学者学习,顺便我也打算测试一下自己写这种小游戏的速度,所以就抽出了一些时间将这个游戏从头到尾重新写了一遍,计算了一下用

50个最受网友欢迎的HTML5资源下载列表

完整附件下载地址:http://down.51cto.com/data/413867 附件预览: HTML 5游戏源码精选(共含9个游戏源码) http://down.51cto.com/zt/227 15个HTML5入门经典资料合集 http://down.51cto.com/zt/553 HTML 5基础入门学习教程 http://down.51cto.com/zt/234 初学者必知的HTML5入门级技巧[技术文档]下载 http://down.51cto.com/data/297883

『HTML5梦幻之旅』 - 跟随歌曲显示当前歌词

好像哪位老师曾说过,音乐是世界通用语言.是的,听不懂英文,但总能欣赏英文歌曲吧. 很早以前就想做个音乐播放器,但是由于跟随歌曲显示当前歌词的效果一直实现不了,所以我的想法一直无法实现.不过,最近创意不佳,没心情开发游戏了,于是闲下来搞点小发明.这次就先模仿一下手机QQ音乐中歌词显示效果. 恰巧,年末新歌蛮多的,于是我就选了一首比较好听的歌曲--手写的从前. 先看本次演示截图: 演示地址:http://wyh.wjjsoft.com/demo/lyrics/ 上面的演示地址可能有一半以上的人都打不