PHP前端开发

用仿ActionScript的语法来编写html5——第四篇,继承与简单的rpg

百变鹏仔 3个月前 (10-19) #H5教程
文章标签 语法

这次用继承自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);        }