首页 / HTML5 / [HTML5游戏开发]挑战横版ACT(二)：秀身手勇猛如当年

[HTML5游戏开发]挑战横版ACT(二)：秀身手勇猛如当年

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了[HTML5游戏开发]挑战横版ACT(二)：秀身手勇猛如当年，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含10495字，纯文字阅读大概需要15分钟。

内容图文

本篇是该系列文章第二篇，其他文章请看下面帖子中的目录

http://www.gxlcms.com/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);

效果如下

[HTML5游戏开发]挑战横版ACT(二)：秀身手勇猛如当年 - 文章图片

黄老将军看了看久违的熟悉的战场，又看了看战场上的“董”字旗子，吼道：“差点没气晕过去，董卓跟老夫有哪门子关系啊！？”

其实我也没办法，没有找到合适的图片了，下面就是让人物动起来了，黄忠在旁边继续吼到：“早就已经动起来了，只是不能动地方而已，都快累死了。”。话说这老家伙火怎么这么大...

懒得理他，继续写代码，下面将前面的代码休整一下，一个动作一个动作来。我只写核心部分，完整代码一会儿给出下载。

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引擎中调取父类函数的方法，两个参数，第一个参数是父类的方法名，第二个参数是固定参数arguments，因为Player继承自Character，所以就是调用Character对象的move函数。

然后在键盘键按下的侦听函数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，跳跃

了便于控制，我将跳跃图片修改了一下

[HTML5游戏开发]挑战横版ACT(二)：秀身手勇猛如当年 - 文章图片

因为人物动作是通过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，连续攻击

当连续几次普通攻击的时候，是会出现一次特殊的攻击的，我设定每三次攻击，进行一次特殊攻击

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);
}

当然，需要判断一下这几次连续攻击的时间，这里设定在1秒钟内进行三次攻击，则判定为连续攻击。

6，跳跃攻击

这个也简单，只要在人物处于跳跃状态的时候进行攻击，则判定为跳跃攻击。

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(hero.action == ACTION.JUMP){
		hero.setAction(ACTION.JUMP_ATTACK,hero.direction);
	}else{
		setTimeout("keylock = true;",50);
		hero.setAction(ACTION.ATTACK,hero.direction);
	}

7,技能攻击

玩过街机三国志的朋友们都知道，下=>上=>攻击,就会发动一下特殊的武将技，这个也简单，在攻击键按下的时候判断一下前两次按键就可以了。

if(keyLast01.keyCode == KEY.UP && keyLast02.keyCode == KEY.DOWN && keyThis.time - keyLast02.time < 300){
	keylock = true;
	hero.setAction(ACTION.SKILL,hero.direction);
}

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行。

[HTML5游戏开发]挑战横版ACT(二)：秀身手勇猛如当年 - 文章图片

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

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

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向下

[HTML5游戏开发]挑战横版ACT(二)：秀身手勇猛如当年 - 文章图片

跑：按两下走动

[HTML5游戏开发]挑战横版ACT(二)：秀身手勇猛如当年 - 文章图片

跳：K

[HTML5游戏开发]挑战横版ACT(二)：秀身手勇猛如当年 - 文章图片

攻击：J

[HTML5游戏开发]挑战横版ACT(二)：秀身手勇猛如当年 - 文章图片

连续攻击：攻击多次

[HTML5游戏开发]挑战横版ACT(二)：秀身手勇猛如当年 - 文章图片

跳跃攻击：K => J

[HTML5游戏开发]挑战横版ACT(二)：秀身手勇猛如当年 - 文章图片

撞击：S+K

[HTML5游戏开发]挑战横版ACT(二)：秀身手勇猛如当年 - 文章图片

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

[HTML5游戏开发]挑战横版ACT(二)：秀身手勇猛如当年 - 文章图片

绝招：J+K

[HTML5游戏开发]挑战横版ACT(二)：秀身手勇猛如当年 - 文章图片

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

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

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

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

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

内容总结

以上是互联网集市为您收集整理的[HTML5游戏开发]挑战横版ACT(二)：秀身手勇猛如当年全部内容，希望文章能够帮你解决[HTML5游戏开发]挑战横版ACT(二)：秀身手勇猛如当年所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/388676.html

来源：【匿名】

【上一篇】HTML5游戏开发-Box2dWeb应用(一)-创建各种各样的刚体【下一篇】html5如何获取php数据

更多 ►

【[HTML5游戏开发]挑战横版ACT(二)：秀身手勇猛如当年】教程文章相关的互联网学习教程文章

Html5游戏开发之乒乓Ping Pong游戏示例(三)

jQuery 介绍【这部分就不翻了，网上有很多的。如果有不懂的部分找度娘】用jQuery操作游戏元素我们已经用jQuery初始化了球拍。现在我们做一个如何使用jQuery安置游戏元素的实验。动起来-使用jQuery修改元素的位置让我们用网格背景来检查我们游戏的元素位置： 1、我们继续使用PingPong示例。 2、从这里下载我们需要的网格背景图片。 3、在练习目录下创建一个名字叫images的文件夹。 4、将下载的图片放置到jimages文件夹里。这个...

html5游戏开发-愤怒的小鸟文章推荐【图】

愤怒的小鸟是一款人气火爆的益智游戏，现在我试着用lufylegend库件和Box2dWeb物理引擎来看看在html5中如何制作此类经典的物理游戏。准备工作一首先，你需要下载lufylegend库件1.4.1版http://blog.csdn.net/lufy_legend/article/details/7751425box2dweb你可以到这里下载http://code.google.com/p/box2dweb/downloads/list关于lufylegend库件的使用方法，大家可以看一下我以前的一些文章和教程，或者看下面的api说明。http://lufy.n...

HTML5游戏开发引擎-初识CreateJS的详解（图文）【图】

CreateJS为CreateJS库，可以说是一款为HTML5游戏开发的引擎。打造 HTML5 游戏，构建新游戏，提供构建最新 HTML5 的技术、你可以通过这个网站学习如何构建跨平台和跨终端游戏。这个资源库还会告诉你如何构建多人在线游戏。CreateJS 是一套可以构建丰富交互体验的 HTML5 游戏的开源工具包，旨在降低 HTML5 项目的开发难度和成本，让开发者以熟悉的方式打造更具现代感的网络交互体验。1.进入createjs首页：首页有几个tab页，有EASEJS...

详细介绍HTML5游戏开发5条建议及开发工具分享【图】

当你开发基于HTML5的游戏时，你有很多选择。使用什么样的编辑器？是否用到Canvas 2d、WebGL？采用什么样的呈现框架和游戏引擎？这些选择大部分由开发者的个人经验和游戏将要发布的平台决定。幸运的是，有关HTML5游戏开发的指南现在已经有很多了。而这篇文章则是要告诉开发者在开发HTML5游戏以前应该具备的一些全局概念。你能从这篇文章中学到什么？这里会介绍HTML5游戏开发的一些框架，你将知道如何使你设计的游戏能够在更多的平台...

[html5游戏开发]数独游戏-完整算法-开源讲座【图】

开言：本次讲一下数独游戏的开发，数独游戏是一个填数字的游戏，在一个9x9的方格内，这个9x9的大格子又可以分为9个3x3的小的九宫格，在这些格子内填写上1至9的数字，使得每一行，每一列，并且每个小的九宫格内的数字都不重复,游戏玩法简单，数字组合千变万化，所以玩起来特别有意思。在中国数独游戏似乎没那么流行，但是在日本这个游戏非常受欢迎，在通勤的电车上，经常能看到一些人一个手拿着一本数独游戏的书，另一个手拿着一支铅...

[HTML5游戏开发]挑战横版ACT(一)：开天地黄忠初登场【图】

鄙人虽然不是专职的游戏开发者，但是自己也尝试着开发过各种各样类型的游戏，不过横版类游戏还没有尝试过，本次就使用lufylegend引擎来挑战一下横版ACT类游戏的开发，大家可以到http://lufylegend.com/lufylegend下载lufylegend引擎的最新版本，由于鄙人也是第一次开发此类游戏，所以有不妥的地方，欢迎大家回帖探讨和指正。该系列文章目录（更新中）(一)：开天地黄忠初登场http://www.gxlcms.com/html5-tutorial-354344.html(二)：...

HTML5游戏开发-Box2dWeb应用(二)-碰撞以及各种连接【图】

上次介绍了用box2dweb创建各种刚体，这次来介绍如何用鼠标拖拽刚体，刚体之间的碰撞，以及刚体之间的各种连接。一，鼠标拖拽刚体使用lufylegend.js库件后，拖拽刚体变得很简单，只需调用LSprite的setBodyMouseJoint(true);方法即可，修改上一节中的add方法如下function add(){var rand = Math.random();if(rand < 0.33){cLayer = new LSprite();cLayer.x = 50 + Math.random()*700;cLayer.y = 50;backLayer.addChild(cLayer);bitma...