睿美印象网络欢迎您的到来,并真诚的希望能与您合作!
睿美印象网络
返回上一页
客服QQ
点击这里给我发消息
客服QQ
点击这里给我发消息
一切从沟通开始……

仿AS语法来写HTML5—第4章,继承与简单的rpg

作者:睿美印象网站建设工作室  发布日期:2012-11-17
 这次用继承自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人物的添加移动等内容了


转载请注明:睿美印象网站建设工作室www.ruimeiyx.com
分享到:
已有 0 条评论
暂无评论
睿美印象在线客服
客服部小睿:
点击这里给我发消息
设计部小美:
点击这里给我发消息
技术海绵哥:
点击这里给我发消息
在线淘客服:
睿美印象网络
淘客服小睿:
睿美印象小睿
淘客服小美:
睿美印象小美