欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-10 22:50:08
  第四篇,继承与简单的rpg 用仿ActionScript的语法来编写html5——第一篇, 用仿ActionSc...

 

第四篇,继承与简单的rpg

用仿ActionScript的语法来编写html5——第一篇,

用仿ActionScript的语法来编写html5——第二篇,利用Sprite来实现动画

用仿ActionScript的语法来编写html5——第三篇,鼠标事件与游戏人物移动

 

这次用继承自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.pideCoordinate(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.pideCoordinate(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的浏览器

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

 

 

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


 

摘自 lufy小屋