저는 전업 게임 개발자는 아니지만 다양한 종류의 게임을 개발해 보았지만 아직 횡스크롤 게임을 시도해 본 적은 없습니다. 이번에는 lufylegend 엔진을 사용하여 횡스크롤 ACT에 도전해 보겠습니다. 게임 개발의 경우
http://lufylegend.com/lufylegend
에서 최신 버전의 lufylegend 엔진을 다운로드할 수 있습니다
나도 똑같으니까 이런 종류의 게임을 개발하는 것은 이번이 처음이므로, 부정확한 점이 있으면 모두가 답장을 보내 토론하고 정정할 수 있습니다.
이 시리즈의 기사 목차(업데이트 중)
(1): Kaitiandi의 Huang Zhongchu 등장
http://www .php.cn/ html5-tutorial-354344.html
(2): 이전과 마찬가지로 기술과 용기를 뽐내세요
http://www.php. cn/html5-tutorial-354345.html
(3): 아름다운 영웅을 만났을 때의 열정
http://www.php.cn/html5- tutorial-354347.html
우선 재료의 문제가 있습니다. 보름 동안 찾아보았으나 만족스러운 재료를 찾지 못하여 황종 장군에게 부탁할 수밖에 없습니다. 황 장군은 마종의 손자에게 음모를 당한 이후로 수백 년 동안 인터넷에 접속하지 못했다고 말했습니다. 전쟁터에 간다는 말을 듣자마자 나는 바로 그 자리에 섰습니다. 나는 즉시 "강남류"에 맞춰 춤을 추고 "영웅의 노래"를 불렀다. 그의 자세는 정말 양산보에서 온 리쿠이와 같았고, 그는 노래를 부르더니 "가라"고 외쳤다. 감히 방치할 수가 없어서 얼른 컴퓨터를 들고 준비를 했습니다. 이번에는 황장군을 이용해 먼저 막아내겠습니다. 좋은 자료가 있는 친구가 있으면 옛 황장군이 쉴 수 있도록 제공해 주셨으면 좋겠습니다.
황 장군이 너무 신나서 앞으로 달려가니까 왼쪽이 아니고 오른쪽으로만 움직일 수밖에 없었어요. LAnimation 객체는 이미지의 미러 이미지를 사용하여 위 이미지와 반대 동작을 표시할 수 있으므로 lufylegend 엔진의 LAnimation 객체는 사용되지 않습니다.
전장에는 다양한 군인과 장군이 있지만 그들은 모두 인간이고 공통된 속성을 가지고 있으며, 황 장군이 너무 흥분한 점을 고려하면 관리 및 운영을 용이하게 하기 위해 이번 개발에서는 여전히 OOP를 사용합니다. 이 말을 듣고 황장군이 속으로 '아, 젠장?'이라는 생각을 바탕으로 먼저 캐릭터의 부모 클래스 캐릭터
function Character(dataList,coordinateList,locationList,speed){
base(this,LSprite,[]);
};를 만들어 살펴보도록 하겠습니다. 이 네 가지 매개변수:
dataList: 예를 들어 위의 Huang 장군 그림을 보세요. 많은 작업 그룹이 있으며, 각 작업 그룹은 그림입니다.
coordinateList: LAnimation 개체는 애니메이션을 형성하기 위해 좌표에 따라 그림을 순차적으로 표시해야 합니다.
locationList: 각 그림의 크기를 고려하여 LAnimation 개체의 좌표 배열도 전달해야 합니다. 캐릭터의 액션이 다르고, 위치도 다릅니다. 이 배열은 해당 액션 그룹 그림의 표시 위치를 조정하는 데 사용됩니다.
속도: 각 프레임에서 캐릭터 액션의 빈도를 제어하는 것이 편리합니다. 타임라인
다음은 전체 Character 클래스 생성자입니다
function Character(dataList,coordinateList,locationList,speed){
base(this,LSprite,[]);
var self = this;
//初始化
//动作
self.action = ACTION.STAND;
//方向
self.direction = DIRECTION.RIGHT;
//保存参数
self.coordinateList = coordinateList;
self.locationList = locationList;
self.dataList = dataList;
self.speed = speed==null?1:speed;
//保存初始化动作的图片
self.data = dataList[ACTION.STAND];
self.speedIndex = 0;
//利用LAnimation对象来显示连贯的动作
self.anime = new LAnimation(self,self.data,self.coordinateList[0]);
self.anime.setAction(0);
self.anime.x = -self.data.width*0.5;
self.anime.y = -self.data.height;
};ACTION 변수와 DIRECTION 변수는 다음과 같습니다
//动作
var ACTION = {STAND:0,MOVE:1,RUN:2,JUMP:3,ATTACK:4};
//方向
var DIRECTION = {RIGHT:"right",LEFT:"left"};다음은 LAnimation 클래스에 대한 자세한 소개입니다. LAnimation 클래스는 일련의 그림을 순서대로 또는 역순으로 재생하여 애니메이션을 구성합니다. 다음
■기능:
■参数：
上面的三个参数中，layer是一个LSprite对象，data是一个LBitmapData对象，这些都比较好理解，第三个参数list是一个二维数组，它的格式如下
[
[{x:0,y:0},{x:0,y:0},{x:0,y:0}],
[{x:0,y:0},{x:0,y:0},{x:0,y:0}],
[{x:0,y:0},{x:0,y:0},{x:0,y:0}]
]LAnimation对象的setAction函数，有四个参数，分别为
LAnimation.setAction(rowIndex,colIndex,mode,isMirror) 参数： rowIndex：播放动画的行号 colIndex：播放动画的列号 mode：(1,0,-1)分别代表(正序播放,静止,倒序播放) isMirror：Boolean型，当设定为true的时候，图片显示为水平翻转后的镜像
当然，光有一个构造器是不行的，因为LAnimation对象是通过调用onframe函数来实现播放的，所以给Character类添加一个函数，如下
Character.prototype.onframe = function (){
var self = this;
//人物动作速度控制
if(self.speedIndex++ < self.speed)return;
self.speedIndex = 0;
//人物动画播放
self.anime.onframe();
};如此一来，只要不断的调用Character的实例的onframe函数，就能实现动态播放了。
黄老将军可能对比不感兴趣，此时已经在一旁打起了呼噜，我必须加快速度了......
考虑到战场上敌方和我方会有不同处理，建立一个继承自Character类的子类，如下
function Player(datalist,coordinateList,locationList,speed){
base(this,Character,[datalist,coordinateList,locationList,speed]);
};因为想要实例化这个类，需要三个参数，我再新建一个对象来获取这三个参数
var CharacterList = {
huangzhong:function(){
//图片数据
var dataList = new Array();
dataList.push(new LBitmapData(imglist["player_stand"],0,0,106,77));
dataList.push(new LBitmapData(imglist["player_move"],0,0,115,85));
dataList.push(new LBitmapData(imglist["player_run"],0,0,125,87));
dataList.push(new LBitmapData(imglist["player_jump"],0,0,131,212));
dataList.push(new LBitmapData(imglist["player_attack"],0,0,242,143));
//图片分割数据
var coordinateList = new Array();
coordinateList.push(LGlobal.pideCoordinate(1272,77,1,12));
coordinateList.push(LGlobal.pideCoordinate(920,85,1,8));
coordinateList.push(LGlobal.pideCoordinate(750,87,1,6));
coordinateList.push(LGlobal.pideCoordinate(786,212,1,6));
var attackList = LGlobal.pideCoordinate(484,143,1,2);
coordinateList.push([[attackList[0][0],attackList[0][1],attackList[0][1],attackList[0][1]]]);
//图片位置数据
var locationList = new Array();
locationList.push({x:0,y:0});
locationList.push({x:0,y:0});
locationList.push({x:0,y:0});
locationList.push({x:0,y:0});
locationList.push({x:20,y:20});
return [dataList,coordinateList,locationList];
}
}所以我们要得到黄老将军的参数的话，就直接CharacterList.huangzhong()就可以了。
这时候，耳旁突然一声大吼，用什么拼音，要用English,怎么的也得叫Mr.Huang或者Huang Sir吧，由于英语太差，所以我假装没听到，继续写代码......
下面，开始就马上开始游戏初始化的工作。
//初始化层 baseLayer = new LSprite(); addChild(baseLayer); //背景层 backLayer = new LSprite(); backLayer.graphics.drawRect(1,"#000",[0,0,LGlobal.width,LGlobal.height],true,"#000"); baseLayer.addChild(backLayer); //人物层 charaLayer = new LSprite(); baseLayer.addChild(charaLayer); addHero(); //添加贞事件 baseLayer.addEventListener(LEvent.ENTER_FRAME,onframe);
暂时没有准备背景图片，所以就画了一个黑色矩形当做背景了，下面看addHero函数和onframe函数
function addHero(){
var heroData = CharacterList.huangzhong();
hero = new Player(heroData[0],heroData[1],heroData[2]);
hero.x = 200;
hero.y = 200;
charaLayer.addChild(hero);
}
function onframe(){
var key = null;
for(key in charaLayer.childList){
charaLayer.childList[key].onframe();
}
}运行代码，得到效果如下
话说，黄老将军正在呼呼地睡大觉，突然被我弄进了游戏里，并且四种漆黑一片，立刻就想到跑，但是由于我没有添加动作变换代码，它只能傻傻的站在那里，脑子里各种问号，为了不欺负人家，我必须赶紧写下去。
游戏中，有走，跑，跳，攻击等各种动作，咱们就用键盘的wsad来控制上下左右，j控制攻击，k控制跳，首先要添加键盘事件
//添加键盘事件 LEvent.addEventListener(LGlobal.window,LKeyboardEvent.KEY_DOWN,onkeydown); LEvent.addEventListener(LGlobal.window,LKeyboardEvent.KEY_UP,onkeyup);
function onkeydown(e){
if(keylock)return;
switch(e.keyCode){
case KEY.LEFT:
hero.setAction(ACTION.MOVE,DIRECTION.LEFT);
break;
case KEY.RIGHT:
hero.setAction(ACTION.MOVE,DIRECTION.RIGHT);
break;
case KEY.UP:
hero.setAction(ACTION.MOVE,hero.direction);
break;
case KEY.DOWN:
hero.setAction(ACTION.MOVE,hero.direction);
break;
case KEY.ATTACK:
keylock = true;
hero.setAction(ACTION.ATTACK,hero.direction);
break;
case KEY.JUMP:
keylock = true;
hero.setAction(ACTION.JUMP,hero.direction);
break;
}
}
function onkeyup(e){
if(hero.action == ACTION.MOVE || hero.action == ACTION.RUN)hero.setAction(ACTION.STAND,hero.direction);
keylock = false;
}hero是Player对象的一个实例，既然调用了Player对象的setAction函数，那就必须给Player对象添加这个函数，不过我依然将函数添加到它的父类Character里面
/**
* 动作变换
* @param action 动作
* @param direction 方向
*/
Character.prototype.setAction = function (action,direction){
var self = this;
//动作和方向都没有改变，则不做变换
if(self.action == action && self.direction == direction)return;
//重新设定保存在LAnimation对象中的图片和坐标数组
self.data = self.dataList[action];
self.anime.bitmap.bitmapData = self.data;
self.anime.bitmap.bitmapData.setCoordinate(0,0);
self.anime.imageArray = self.coordinateList[action];
self.action = action;
self.direction = direction;
//如果方向向左则必须使用镜像
self.anime.setAction(0,0,null,self.direction == DIRECTION.LEFT);
//调整位置
self.setLocation();
//如果被添加了事件，则将事件移除
self.anime.removeEventListener(LEvent.COMPLETE,self.overAction);
//除了走和跑，其他动作要保持连贯性，在一个动作结束之前，不能再次变换，所以添加动画播放结束事件，来控制keylock的值
if(self.action != ACTION.MOVE && self.action != ACTION.RUN){
self.anime.addEventListener(LEvent.COMPLETE,self.overAction);
}
};
Character.prototype.setLocation = function (){
var self = this;
self.anime.x = self.locationList[self.action].x*(self.direction == DIRECTION.LEFT ? -1 : 1)-self.data.width*0.5;
self.anime.y = self.locationList[self.action].y-self.data.height;
};
Character.prototype.overAction = function (anime){
var self = anime.parent;
self.anime.removeEventListener(LEvent.COMPLETE,self.overAction);
self.setAction(ACTION.STAND,self.direction);
keylock = false;
};也许是黄老将军太久没有上战场了，现在已经开始活蹦乱跳了
测试连接
http://lufy.netne.net/lufylegend-js/act/index.html
黄老将军虽然无比兴奋，但是很快就发现了不对劲儿，因为无论走，跳，向左，向右，他只能在同一个地方折腾，急得他满头大汗，于是我在他回头看我之前，我就先闪人了，身后传来黄老将军的一声怒吼：“我X”。
本次丫丫就到这里了，要想知道黄老将军在战场上究竟做了什么，请听下回分析。
本次源码下载
http://fsanguo.comoj.com/download.php?i=act01.rar
以上就是[HTML5游戏开发]挑战横版ACT(一)：开天地黄忠初登场的内容，更多相关内容请关注PHP中文网（www.php.cn）！
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
