首页前端开发HTML用仿ActionScript的语法来编写html5――第四篇，继承与简单的rpg

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

时间2024-01-26 11:13:03发布访客分类HTML浏览655
导读：收集整理的这篇文章主要介绍了html5教程-用仿ActionScript的语法来编写html5――第四篇，继承与简单的rpg，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾...
收集整理的这篇文章主要介绍了html5教程-用仿ActionScript的语法来编写html5――第四篇，继承与简单的rpg，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

 

第四篇，继承与简单的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; i10; 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; icharaList.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小屋

 

第四篇，继承与简单的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; i10; 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; icharaList.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小屋

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

APIArrayconstdivDOMHTMLhtml5letMappost-format-galleryPropthis数组

若转载请注明出处： 用仿ActionScript的语法来编写html5――第四篇，继承与简单的rpg
本文地址： https://pptw.com/jishu/586685.html
用仿ActionScript的语法来编写html5――第三篇，鼠标事件与游戏人物移动 用仿ActionScript的语法来编写html5――第五篇，Graphics绘图

游客 回复需填写必要信息
↑