一、开篇感慨：重温编程的乐趣
开篇感慨：重温编程的乐趣
学习编程感觉超棒！那时第一次接触它，就感觉自己俨然是个魔法师，想怎么玩就怎么玩。这次我们要用LSPrite的类做个简单的RPG游戏，想想都兴奋。说实话，JavaScript的继承方式比ActionScript还复杂，有点头疼。但只要能做出好玩的游戏，这些都不叫事儿。
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;
}
二、代码对比：JS与AS的异同
代码对比：JS与AS的异同
聊到代码，你们可能好奇，这次的JS和AS代码究竟有啥相似之处？其实，只要明白了AS，就会觉得JS跟它差不多。JS的语法有点特别，但真要动工编写时，会发现两者的思维过程非常相像。想象成，就算用的词儿不同，想表达的意思还是一回事！
三、成果展示：一个简单的RPG游戏
成果展示：一个简单的RPG游戏
说了半天，大家可能好奇这游戏到底怎么样？简单说，就是个小RPG游戏。虽然功能不多，但该有的都有。如果电脑支持HTML5就能网上直接玩儿；不然的话，赶快下个浏览器！几分钟搞定下载，然后就能享受超炫的游戏体验！
四、继承详解：JS的继承方式
继承详解：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];
}
}
}
说起来js的继承方法，跟as不太一样怎么弄？给大家科普下：在JS里，我们常常使用这样一个公式，有三个参数：child,base和base构造器参数数组。就靠这个策略，咱就能搞定继承了。虽然看起来有点麻烦，但一学就会，就像走路似的，路上可能曲折一点，但只要认准了路，总能到达目的地的。
五、实战演练：创建CharacterSprite类
实战演练：创建CharacterSprite类
好，开始说点实在的！首先，我们得把LSprite改成自己的东东，叫作CharacterSprite。这事挺简单，我们就在构造函数里写上base(this,LSprite,[])就行了。这样子的话，CharacterSprite就能继承LSprite的所有功能，比如说那个大家都喜欢用的addChild方法，就是从LSprite那里继承过来的哟。这就像是接班人一样，老一辈的知识和才智就这么慢慢地传下去了。
六、继承的魅力：代码的复用与扩展
继承的魅力：代码的复用与扩展
说起继承最牛逼的就是不用费劲地重写代码就能扩充功能！继承就像个万用包，啥时候都能用上那些写成好的代码。这样不仅省时省力，还方便别人读懂和维护。想象一下，有了这种神器，工作也就变得轻松得多！
七、总结与展望：编程之路，永无止境
总结与展望：编程之路，永无止境
好久不见！最近我又学会了新技能——新继承，而且还自己做了个RPG游戏！虽然后面有些坎坷，但总算完成了。编程，总是有新的知识要学，每次进步都能使我们更加强大。所以，我们得继续加油，向前闯荡！
各位小伙伴们，来聊聊你们程序员生活中有没有啥有趣的事情呀?赶快在评论区分享别忘了给小编点赞顺便转个发也是好的~
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.y){
self.y -= l;
marky = -1;
}else if(self.y 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);
}
评论0