简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
집
기사
Q&A
강의
주제
다운로드
게임
사전
최근 업데이트

집  >  기사  >  웹 프론트엔드  >  [HTML5 게임 개발] ACT의 수평 버전에 도전하다(2): 실력을 뽐내고 예전처럼 용감하게

[HTML5 게임 개발] ACT의 수평 버전에 도전하다(2): 실력을 뽐내고 예전처럼 용감하게

黄舟
黄舟원래의
2017-03-01 16:20:301769검색

이 글은 시리즈의 두 번째 글입니다. 다른 글은 아래 글의 목차를 참고해주세요

http:// www.php.cn/ html5-tutorial-354344.html

갑자기 나는 황종 장군과 황이 한동안 음식도 마시지 않고 어둠의 전장에 있었다는 것을 기억했습니다. 하고 있었다.
현장에 와서 살펴보니 이런 걱정은 쓸데없는 일이라는 것을 깨달았습니다. 노장군은 여전히 ​​현장에서 활발하고 활발하게 움직이며 "나를 함정에 빠뜨리려고 하지 마세요. 한동안 죽었어."

노장군이 필사적으로 두 걸음 전진하려는 모습을 보고 노장군을 움직이게 하기로 결정했습니다.
하지만 먼저 전장을 밝게 하고 배경 이미지를 준비한 다음 LBitmap 개체를 사용하여 게임에 표시하고 원래 검은색 직사각형을 주석 처리해야 합니다. 

//背景层
	backLayer = new LSprite();
	//backLayer.graphics.drawRect(1,"#000",[0,0,LGlobal.width,LGlobal.height],true,"#000");
	baseLayer.addChild(backLayer);
	var background = new LBitmap(new LBitmapData(imglist["back"]));
	backLayer.addChild(background);

효과는 다음과 같습니다



황장군은 익숙한 전장을 바라보았습니다. 오랫동안 보지 못했다가 다시 보니 전장에 있는 '동'이라는 글자가 적힌 깃발을 바라보며 소리쳤다. "숨이 막힐 뻔했는데, 동탁은 나와 어떤 관계인가!? "

사실 선택의 여지가 없었고, 적합한 사진을 찾을 수 없었습니다. 다음 단계는 캐릭터를 움직이게 하는 것입니다. 황종은 계속해서 "이미 움직이고 있는데 움직일 수 없습니다"라고 외쳤습니다. 어디든 거의 지쳤어." 그런데 이 늙은이는 왜 이렇게 화를 내는 걸까요...

그 사람 눈치 보지 않고 계속 코드를 작성하고 싶지 않아서 이제 이전 코드를 쉬고 한 동작씩 하도록 하겠습니다. . 핵심 부분만 작성하고 전체 코드는 곧 다운로드해 드리겠습니다.

1. 돌아다니기

게임에서는 키보드의 각 키의 상태가 눌려졌는지, 팝업되었는지를 정확하게 판단해야 하므로, 상태를 저장하기 위한 keyCtrl 배열을 준비합니다. 키보드 키 중.

누르면 

keyCtrl[e.keyCode] = true;

팝업되면 

keyCtrl[e.keyCode] = false;

를 사용합니다. 이런 식으로 keyCtrl 배열을 통해 각 키의 상태를 얻을 수 있습니다.

다음으로, Character 클래스의 onframe 함수에서 move 함수를 호출합니다. move 함수에서는 캐릭터의 현재 상태를 기반으로 움직일 단계를 계산합니다. 

Character.prototype.move = function (){
	var self = this, mx = self.mx, my = self.my;
	if(self.action == ACTION.MOVE || self.action == ACTION.JUMP || self.action == ACTION.JUMP_ATTACK){
		mx *= MOVE_STEP;
		my *= MOVE_STEP;
	}else if(self.action == ACTION.RUN){
		mx *= MOVE_STEP*2;
		my *= MOVE_STEP*2;
	}else if(self.action == ACTION.HIT){
		mx = MOVE_STEP*2*(self.direction == DIRECTION.RIGHT ? 1 : -1);
		my = 0;
	}else{
		mx = my = 0;
	}
	if(mx == 0 && my == 0)return;
	self.x += mx;
	self.y += my;
	if(self.y < 250){
		self.y = 250;
	}else if(self.y > 448){
		self.y = 448;
	}
};

위의 self.mx, self.my는 Player 클래스에서 계산됩니다.

Player.prototype.move = function (){
	var self = this, mx = 0, my = 0;
	if(keyCtrl[KEY.LEFT]){
		mx = -1;
	}else if(keyCtrl[KEY.RIGHT]){
		mx = 1;
	}else if(keyCtrl[KEY.UP]){
		my = -1;
	}else if(keyCtrl[KEY.DOWN]){
		my = 1;
	}
	self.mx = mx;
	self.my = my;
	self.callParent("move",arguments);
};

callParent 함수는 lufylegend 엔진에서 상위 클래스 함수를 호출하는 방법으로, 두 개의 매개변수, 첫 번째 매개변수는 상위 클래스의 메소드 이름이고, 두 번째 매개변수는 고정 매개변수 인수입니다. Player는 Character를 상속하므로 Character 객체의 이동 함수를 호출합니다.

그러면 키보드 키 누름에 대한 onkeydown 청취 기능에서 키에 따라 캐릭터의 상태가 변경되어 캐릭터가 걸을 수 있게 됩니다.

2. 달리기

달리기는 왼쪽이나 오른쪽을 연속해서 두 번 누르는 것입니다. 이때는 다음과 같은 요령 등을 고려하여 판단해야 합니다. 키를 저장하는 배열 keyList

var keyList = [{keyCode:0,time:0},{keyCode:0,time:0},{keyCode:0,time:0}];

키를 누를 때마다 현재 정보가 배열에 푸시되고 불필요한 키 정보(두 번 전)가 제거됩니다. 

var keyThis = {keyCode:e.keyCode,time:(new Date()).getTime()};
var keyLast01 = keyList[0];
var keyLast02 = keyList[1];
keyList.unshift(keyThis);
keyList.pop();

그런 다음 키 시퀀스의 정보를 바탕으로 실행 여부를 판단합니다. 

	switch(e.keyCode){
		case KEY.LEFT:
			if(keyLast01.keyCode == KEY.LEFT && keyThis.time - keyLast01.time < 200){
				hero.setAction(ACTION.RUN,DIRECTION.LEFT);
			}else{
				hero.setAction(ACTION.MOVE,DIRECTION.LEFT);
			}
			break;
		case KEY.RIGHT:
			if(keyLast01.keyCode == KEY.RIGHT && keyThis.time - keyLast01.time < 200){
				hero.setAction(ACTION.RUN,DIRECTION.RIGHT);
			}else{
				hero.setAction(ACTION.MOVE,DIRECTION.RIGHT);
			}
			break;

3. 점프

제어를 용이하게 하기 위해 점프 그림을 수정했습니다


LAnimation 객체를 통해 캐릭터의 움직임이 표현되기 때문에 점프 과정에서 LAnimation 객체의 y좌표만 변경하면 점프가 가능합니다.

Player 클래스의 onframe 함수를 다시 작성했습니다. 

Player.prototype.onframe = function (){
	var self = this;
	self.callParent("onframe",arguments);
	if(self.action == ACTION.JUMP){
		self.onjump();
	}else if(self.action == ACTION.JUMP_ATTACK){
		self.onjump_attack();
	}
};

위 코드에서는 캐릭터가 점프하거나 점프하여 공격할 때 해당 onjump 함수와 onjump_attack 함수가 호출됩니다. 이 두 함수에서는 LAnimation 객체의 y 좌표는 사진의 재생 횟수에 따라 

Player.prototype.onjump = function (){
	var self = this;
	self.setLocation();
	var index = self.anime.colIndex;
	self.yArr = [0,-10,-20,-30,-40,-40,-30,-20,-10,0];
	self.anime.y += self.yArr[index];
};
Player.prototype.onjump_attack = function (){
	var self = this;
	self.setLocation();
	var index = self.anime.colIndex;
	if(index >= self.yArr.length)return;
	self.anime.y += self.yArr[index];
};

수정됩니다. 이렇게 하면 점프가 완벽하게 구현됩니다.


4. 공격

공격 시 공격 동작이 끝나기 전에는 걷기나 점프 등의 동작이 불가능하므로 공격 버튼을 눌렀을 때 잠금이 필요합니다. 키를 삭제하고 무효화

setTimeout("keylock = true;",50);
hero.setAction(ACTION.ATTACK,hero.direction);

setTimeout 함수를 사용하는 이유는 무엇입니까? , 발동시키는 필살기도 있기 때문에, 필살기를 발동시키려면 공격버튼과 점프버튼을 동시에 눌러야 하는데 사람이 동시에 두 버튼을 누르는 것은 불가능합니다. 여기서는 이 간격의 최대값을 50밀리초로 설정하므로 이 50밀리초 내에 점프 키를 다시 누를 수 있습니다.

5연속 공격

일반 공격이 여러 번 연속되면 3번의 공격마다 특수 공격이 등장합니다.

아아아아

물론이죠. 이러한 연속 공격의 시간을 판단해야 합니다. 1초 내에 3번의 공격이 수행되면 연속 공격으로 판단됩니다.


6. 점프 공격

이것도 간단합니다. 캐릭터가 점프한 상태에서 공격하면 점프 공격으로 판정됩니다.

아아아

7, 스킬공격

아케이드 삼국지를 해본 친구들은 다 알겠지만, 아래 => 위로 => 공격하면 특수 일반 스킬이 발동된다. 이것도 간단하다. .공격 버튼을 눌렀을 때 처음 두 번의 키 누름을 판단하세요.

아아아아

8. 대박

화면이 적들로 가득 차면 어떻게 해야 할까요? 확대하면 됩니다.

在攻击键按下的时候，判断一下跳跃键是不是同时被按下了。

if(keyLast01.keyCode == KEY.JUMP && keyThis.time - keyLast01.time < 50){
	keylock = true;
	hero.setAction(ACTION.BIG_SKILL,hero.direction);
}

当然，在跳跃键按下的时候，也需要判断一下攻击键是不是被按下了。

if(keyLast01.keyCode == KEY.ATTACK && keyThis.time - keyLast01.time < 50){
	keylock = true;
	hero.setAction(ACTION.BIG_SKILL,hero.direction);
}

绝招发动的时候，其他按键是无效的，所以键按键上锁keylock=true;

比较特殊的是，绝招图片的动作比较多，全都合到一行上的话，图片太长，所以我分成了5行。

其他的动作图片都是一行，所以这里需要做些特殊处理，就是当一行图片播放完之后，马上开始播放下一行图片，知道全部动作都播放完为止。

处理过程是，首先在动作改变的时候，加上侦听函数

self.anime.addEventListener(LEvent.COMPLETE,self.overAction);

这样，当一组动作播放完毕之后，会调用overAction函数

下面是Character对象的overAction函数

Character.prototype.overAction = function (anime){
	var self = anime.parent;
	self.anime.removeEventListener(LEvent.COMPLETE,self.overAction);
	var lastAction = self.action;
	var animeAction = anime.getAction();
	self.setAction(ACTION.STAND,self.direction);
	self.overActionRun(lastAction,animeAction);
};
Character.prototype.overActionRun = function (lastAction,animeAction){
};

LAnimation对象的getAction函数是获取当前的属性，包括播放的图片序号和镜像等，具体请参照lufylegend引擎的API文档，接着在Player对象中重写overActionRun函数。


Player.prototype.overActionRun = function (lastAction,animeAction){
	var self = this;
	self.callParent("overActionRun",arguments);
	keylock = false;
	
	if(lastAction == ACTION.BIG_SKILL && animeAction[0] < 3){
		keylock = true;
		self.setAction(ACTION.BIG_SKILL,self.direction);
		self.anime.setAction(animeAction[0]+1);
		self.anime.onframe();
	}
};

animeAction[0]是播放图片的行序号，根据行序号的值，判定是否继续播放下一行动作，绝招处理完成。

最后，整合一下上面的处理，onkeydown函数的完整代码如下。

function onkeydown(e){
	if(keylock || keyCtrl[e.keyCode])return;
	
	var keyThis = {keyCode:e.keyCode,time:(new Date()).getTime()};
	var keyLast01 = keyList[0];
	var keyLast02 = keyList[1];
	
	keyCtrl[e.keyCode] = true;
	keyList.unshift(keyThis);
	keyList.pop();
	
	switch(e.keyCode){
		case KEY.LEFT:
			if(keyLast01.keyCode == KEY.LEFT && keyThis.time - keyLast01.time < 200){
				hero.setAction(ACTION.RUN,DIRECTION.LEFT);
			}else{
				hero.setAction(ACTION.MOVE,DIRECTION.LEFT);
			}
			break;
		case KEY.RIGHT:
			if(keyLast01.keyCode == KEY.RIGHT && keyThis.time - keyLast01.time < 200){
				hero.setAction(ACTION.RUN,DIRECTION.RIGHT);
			}else{
				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:
			if(keyLast01.keyCode == KEY.ATTACK && keyLast02.keyCode == KEY.ATTACK && keyThis.time - keyLast02.time < 1000){
				keyList = [{keyCode:0,time:0},{keyCode:0,time:0},{keyCode:0,time:0}];
				keylock = true;
				hero.setAction(ACTION.BIG_ATTACK,hero.direction);
			}else if(keyLast01.keyCode == KEY.JUMP && keyThis.time - keyLast01.time < 50){
				keylock = true;
				hero.setAction(ACTION.BIG_SKILL,hero.direction);
			}else if(hero.action == ACTION.JUMP){
				hero.setAction(ACTION.JUMP_ATTACK,hero.direction);
			}else if(keyLast01.keyCode == KEY.UP && keyLast02.keyCode == KEY.DOWN && keyThis.time - keyLast02.time < 300){
				keylock = true;
				hero.setAction(ACTION.SKILL,hero.direction);
			}else{
				setTimeout("keylock = true;",50);
				hero.setAction(ACTION.ATTACK,hero.direction);
			}
			break;
		case KEY.JUMP:
			if(keyLast01.keyCode == KEY.ATTACK && keyThis.time - keyLast01.time < 50){
				keylock = true;
				hero.setAction(ACTION.BIG_SKILL,hero.direction);
			}else if(keyCtrl[KEY.DOWN]){
				hero.setAction(ACTION.HIT,hero.direction);
			}else{
				hero.setAction(ACTION.JUMP,hero.direction);
			}
			break;
	}
}

测试连接如下：

http://lufy.netne.net/lufylegend-js/act02/index.html

下面是各个动作的按键，大家可以测试一下

走动：A向左，D向右，W向上，S向下


跑：按两下走动


跳：K


攻击：J


连续攻击：攻击多次


跳跃攻击：K => J


撞击：S+K


技能攻击：S => W => J


绝招：J+K



老将军既然已经能跑能跳了，便冲着我大喊：“马忠在哪儿？”。要知道找个素材那可是比登天还难啊，我上哪里给他找马忠去啊，下次还是先给他整几个炮灰让他先过过瘾吧。

上面说的可能有点乱，现在给出本次源码下载，喜欢的可以看一下。

http://fsanguo.comoj.com/download.php?i=act02.rar

注意：该附件只包含本次文章源码，lufylegend.js引擎请到http://lufylegend.com/lufylegend进行下载。

 以上就是[HTML5游戏开发]挑战横版ACT(二)：秀身手勇猛如当年的内容，更多相关内容请关注PHP中文网（www.php.cn）！


성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：[HTML5 게임 개발] ACT의 수평 버전에 도전하다(1): 카이티엔디에 황중추 등장다음 기사：[HTML5 게임 개발] ACT의 수평 버전에 도전하다(1): 카이티엔디에 황중추 등장

관련 기사

더보기