第四篇,继承与简单的rpg
用仿ActionScript的语法来编写html5——第一篇,显示一张图片
http://blog.csdn.net/lufy_legend/article/details/6753032
用仿ActionScript的语法来编写html5——第二篇,利用Sprite来实现动画
http://blog.csdn.net/lufy_legend/article/details/6760812
用仿ActionScript的语法来编写html5——第三篇,鼠标事件与游戏人物移动
http://blog.csdn.net/lufy_legend/article/details/6770713
这次用继承自LSprite的类来实现简单的rpg的demo
先看一下最后的代码与as的相似度
- var backLayer;
- //地图
- var mapimg;
- //人物
- var playerimg;
- var loader
- var imageArray;
- var loadIndex = 0;
- var imgData = new Array({name:"back.jpg",img:null},{name:"1.png",img:null},{name:"2.png",img:null});
- var chara;
- var charaList;
- function main(){
- loadImage();
- }
- function loadImage(){
- if(loadIndex >= imgData.length){
- gameInit();
- return;
- }
- loader = new LLoader();
- loader.addEventListener(LEvent.COMPLETE,loadComplete);
- loader.load(imgData[loadIndex].name,"bitmapData");
- }
- function loadComplete(event){
- imgData[loadIndex].img = loader.content;
- loadIndex++;
- loadImage();
- }
- function gameInit(event){
- var bitmapdata;
- bitmapdata = new LBitmapData(imgData[0].img);
- mapimg = new LBitmap(bitmapdata);
- document.getElementById("inittxt").innerHTML="";
- backLayer = new LSprite();
- addChild(backLayer);
- backLayer.addChild(mapimg);
- bitmapdata = new LBitmapData(imgData[1].img,0,0,70,92);
- imageArray = LGlobal.divideCoordinate(bitmapdata.image.width,bitmapdata.image.height,8,8);
- playerimg = new LBitmap(bitmapdata);
- chara = new CharacterSprite(true,playerimg,imageArray,0,0);
- backLayer.addChild(chara);
- charaList = new Array();
- for(var i=0;i<10;i++){
- bitmapdata = new LBitmapData(imgData[2].img,0,0,80,91);
- imageArray = LGlobal.divideCoordinate(bitmapdata.image.width,bitmapdata.image.height,8,8);
- playerimg = new LBitmap(bitmapdata);
- var npcx = parseInt(Math.random()*800/3)*3;
- var npcy = parseInt(Math.random()*480/3)*3;
- var npc = new CharacterSprite(false,playerimg,imageArray,npcx,npcy);
- backLayer.addChild(npc);
- charaList.push(npc);
- }
- backLayer.addEventListener(LEvent.ENTER_FRAME, onframe)
- backLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown);
- }
- function onframe(){
- chara.onframe();
- for(var i=0;i<charaList.length;i++){
- charaList[i].onframe();
- }
- }
- function onmousedown(event){
- chara.toCoordinate.x = parseInt(event.selfX/3)*3;
- chara.toCoordinate.y = parseInt(event.selfY/3)*3;
- }
应该还算可以吧?
看一下成果吧,看不到效果的请下载支持html5的浏览器
http://fsanguo.comoj.com/html5/jstoas03/index.html
下面说一说如何继承,继承的话,js没有办法像as那样继承,
js的继承看下面
- function base(derive,baseSprite,baseArgs){
- baseSprite.apply(derive,baseArgs);
- for(prop in baseSprite.prototype){
- var proto = derive.constructor.prototype;
- if(!proto[prop]){
- proto[prop] = baseSprite.prototype[prop];
- }
- }
- }
三个参数分别是child,base,base构造器参数数组
这个方法可以实现js的完美继承
现在来建立一个继承自LSprite的类CharacterSprite
只需要在构造器里调用base(this,LSprite,[])就可以实现继承
而且CharacterSprite因为继承了LSprite的方法,所以它有addChild等方法
CharacterSprite类代码如下
- function CharacterSprite(ishero,bitmap,imageArray,x,y){
- base(this,LSprite,[]);
- var self = this;
- self.x = x;
- self.y = y;
- self.toCoordinate = {x:x,y:y};
- self.ishero = ishero;
- self.animeIndex = 0;
- self.dirindex = 0;
- self.dirmark = {"0,1":0,"-1,0":1,"1,0":2,"0,-1":3,"-1,1":4,"1,1":5,"-1,-1":6,"1,-1":7};
- self.bitmap = bitmap;
- self.imageArray = imageArray;
- self.addChild(bitmap);
- }
- CharacterSprite.prototype.onframe = function (){
- var self = this;
- self.animeIndex++;
- if(self.animeIndex >= self.imageArray[0].length){
- self.animeIndex = 0;
- }
- var markx = 0,marky = 0;
- var l = 3;
- if(self.x > self.toCoordinate.x){
- self.x -= l;
- markx = -1;
- }else if(self.x < self.toCoordinate.x){
- self.x += l;
- markx = 1;
- }
- if(self.y > self.toCoordinate.y){
- self.y -= l;
- marky = -1;
- }else if(self.y < self.toCoordinate.y){
- self.y += l;
- marky = 1;
- }
- if(markx !=0 || marky != 0){
- var mark = markx+","+marky;
- self.dirindex = self.dirmark[mark];
- }else if(!self.ishero){
- if(self.index > 0){
- self.index -= 1;
- }else{
- self.index = parseInt(Math.random()*300);
- self.toCoordinate.x = parseInt(Math.random()*800/3)*3;
- self.toCoordinate.y = parseInt(Math.random()*480/3)*3;
- }
- }
- self.bitmap.bitmapData.setCoordinate(self.imageArray[self.dirindex][self.animeIndex].x,self.imageArray[self.dirindex][self.animeIndex].y);
- }
然后,准备好图片,按照最开始的代码,就可以完成rpg人物的添加移动等内容了