仿AS语法来写HTML5—第4章，继承与简单的rpg_H5之家

这次用继承自LSprite的类来实现简单的rpg的demo
先看一下最后的代码与as的相似度

JavaScript Code复制内容到剪贴板

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;
}

应该还算可以吧？
看一下成果吧
http://fsanguo.comoj.com/html5/jstoas03/index.html

下面说一说如何继承，继承的话，js没有办法像as那样继承，
js的继承看下面

JavaScript Code复制内容到剪贴板

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类代码如下

JavaScript Code复制内容到剪贴板

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人物的添加移动等内容了

下一篇，也不知该研究什么了，先试着做个小游戏，然后看缺什么吧