第四篇,继承与简单的rpg

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

然后,准备好图片,按照最开始的代码,就可以完成rpg人物的添加移动等内容了

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

用仿ActionScript的语法来编写html5——第四篇,继承与简单的rpg的更多相关文章

  1. 用仿ActionScript的语法来编写html5——第五篇,Graphics绘图

    用仿ActionScript的语法来编写html5——第五篇,Graphics绘图 canvas本身就是一个Graphics,可以直接进行绘图在actionscript里面,每个Sprite都有一个G ...

  2. 用仿ActionScript的语法来编写html5——第八篇,图片处理+粒子效果

    用仿ActionScript的语法来编写html5系列开发到现在,应该可以做出一些东西了,下面先来研究下图片的各种效果预览各种效果看下图效果和代码看这里,看不到效果的请下载支持html5的浏览器 ht ...

  3. 用仿ActionScript的语法来编写html5——第六篇,TextField与输入框

    一,对比1,html5中首先看看在html5的canvas中的文字显示 var canvas = document.getElementById("myCanvas"); var ...

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

    第三篇,鼠标事件与游戏人物移动 一,假设假设,所有可添加鼠标事件的对象,都有一个mouseEvent方法,添加的鼠标事件同过这个mouseEvent来调用.这样的话,添加鼠标事件,其实只需要给canv ...

  5. 用仿ActionScript的语法来编写html5——第七篇,自定义按钮

    第七篇,自定义按钮这次弄个简单点的,自定义按钮.其实,有了前面所定义的LSprite,LBitmap等类,定义按钮就很方便了.下面是添加按钮的代码, function gameInit(event){ ...

  6. 用仿ActionScript的语法来编写html5——终篇,LegendForHtml5Programming1.0开源库件

    一,LegendForHtml5Programming1.0库件是什么?它是一个javascript库,它模仿了ActionScript的语法,用于html5的开发,目前实现的功能相对较少,还不能称之 ...

  7. 用仿ActionScript的语法来编写html5——第九篇,仿URLLoader读取文件

    第九篇,仿URLLoader读取文件 先看看最后的代码 function readFile(){ urlloader = new LURLLoader(); urlloader.addEventLis ...

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

    上一篇,我已经模仿as,加入了LBitmap和LBitmapData类,并且用它们实现了静态图片的显示.这次用Sprite来动态显示图片.依然遵循上一篇对显示对象的处理的思路,添加LSprite类,并 ...

  9. 用仿ActionScript的语法来编写html5——第一篇,显示一张图片

    第一篇,显示一张图片 一,代码对比 as代码: public var loader:Loader; public function loadimg():void{ loader = new Loade ...

随机推荐

  1. oracle表空间中PCTFREE, PCTUSED, INITRANS, MAXTRANX参数的解释

    1. PCTFREE 要形容一个 BLOCK 的运作,我们可以把一个 BLOCK 想成一个水杯.侍者把水倒入放在我们面前的水杯,要多满呢,我们要求他倒 9 分满好了,这时候 PCTFREE 代表着设定 ...

  2. jsp中跳出循环

    <c:otherwise> <c:set var="flag" value="true" /><!-- 设置flag --> ...

  3. 关于appStore不显示构建版本的问题

    近日往AppStore上跟新一个版本,提交了好几次,每次都提交成功了,但是在iTunes Contacts上一直没有看到可选的构建版本,也没看到有邮件的反馈,纳闷了好久都不知道是什么鬼原因,后面发现是 ...

  4. Oracle基础(三)数据库管理

    上篇介绍了Oracle数据库的基本操作指令:增.删.改.查以下针对数据库的管理进行介绍 数据库角色介绍 数据管理员:  至少有一个数据库管理员dba. 职责:安装和升级oracel数据库 建库,表空间 ...

  5. 数据泵导出oracle 10g数据库

    首先连接sqlplus: sqlplus /nolog conn system/manager (或者连接其他用户) 1.创建whboa目录,用于存放导出的dmp文件(需要提前手动创建目录“E:\or ...

  6. 使用Net.Sockets.TcpListener和Net.Sockets.TcpClient进行图片传输时怎样精确控制接收缓存数组大小

    <span style="font-size:18px;">在dotnet平台Net.Sockets.TcpListener和Net.Sockets.TcpClient ...

  7. [原创]CI持续集成系统环境--Gitlab+Gerrit+Jenkins完整对接https://www.cnblogs.com/kevingrace/p/5651447.html

      近年来,由于开源项目.社区的活跃热度大增,进而引来持续集成(CI)系统的诞生,也越发的听到更多的人在说协同开发.敏捷开发.迭代开发.持续集成和单元测试这些拉风的术语.然而,大都是仅仅听到在说而已, ...

  8. Tuning SQL 11

    这一章还是概述性的说明 优化器 现在都是在用 Cost-based 这种调优器 注意这本书的作者是个大牛, 他就是说 DBA OVER 那个人, Jonathan Lewis hint 是人告诉SQL ...

  9. RMAN Restore, Recovery

    Complete recovery: rman target / nocatalog startup mount; restore database; recover database; alter ...

  10. Ubuntu14.04中安装Sublime_Text_3

    Sublime Text 简介 Sublime Text 是一款流行的文本编辑器软件,有点类似于TextMate,跨平台,可运行在Linux.Windows和Mac OS X.也是许多程序员喜欢使用的 ...