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

最新推荐文章于 2024-08-11 19:46:27 发布
最新推荐文章于 2024-08-11 19:46:27 发布
阅读量153 收藏
点赞数
文章标签： php

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

http://blog.csdn.net/lufy_legend/article/details/8441677

话说突然想起来黄忠黄老将军被我仍在漆黑的战场上已经有一段时日了，没吃没喝的，不知道怎么样了。
等我来到战场上一看，才发现这个担心是多余的，老将军依然精神抖擞的在原地活蹦乱跳，嘴里不停的喊着，“别想困住老夫，老夫已经死过一回了”。

看着老将军如此拼命的想要往前走两步，我决定让老将军走动起来。
不过首先，得先让战场明亮起来，准备一张背景图片，然后使用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引擎中调取父类函数的方法，两个参数，第一个参数是父类的方法名，第二个参数是固定参数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，跳跃

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


因为人物动作是通过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行。

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

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

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进行下载。

转载请注明：转自lufy_legend的博客

欢迎继续关注我的博客

http://blog.csdn.net/lufy_legend



hw999
关注
[Unity3D]Unity3D游戏开发之ACT游戏三连击效果实现综述
素履独行 | 元培的个人博客
07-24 1万+
各位朋友，大家好，我是秦元培，欢迎大家关注我的博客，我的博客地址是blog.csdn.net/qinyuanpei。在研究了Unity3D Mecanim动画系统的重定向特性后，今天我们继续来探索Mecanim动画系统更多的特性吧。今天博主想和大家分享的是ACT游戏中的三连击效果的实现，由于Unity3D目前存在Animation和Animator两种类型的动画组件，因此本文将分别讲这两种类型的动
解决1:5:2 ERROR:Failed to load FNP_ACT_INstallerCA.dll. 3.5报错问题
郑德帅
12-01 2342
Failed to load FNP_ACT_INstallerCA.dll. 3.51 报错信息2 报错信息分析3 报错解决 1 报错信息 1:5:2 ERROR:Failed to load FNP_ACT_INstallerCA.dll. 3.5 2 报错信息分析 其实看报错原因，报错原因很明显了，加载 FNP_ACT_INstallerCA.dll配置文件失败，原因可能是该文件不存在 亦或 读取不到该文件。 3 报错解决   .先是网上找了一圈，发现全是没用的方法，有些说是缺少，下载下来却是个
ACT GAME MAKER
08-26
新一点版本的AGM，可以用于制作横版动作游戏
[HTML5游戏开发]挑战横版ACT(三)：遇红颜英雄亦多情
我的java
03-04 243
本篇是该系列文章第三篇，其他文章请看下面帖子中的目录 http://blog.csdn.net/lufy_legend/article/details/8441677 开篇啰嗦本系列教程，是我首次采用调侃式开发，文中大多数内容都是口水，大家直接空干了读就行了，谨防被淹。进行该类型开发的第一个瓶颈，就是素材了，在此多谢网友yorhomwang提供了大量素材网址。 下面是本次开发的成果，大家先预览一...
分析Cocos2d-x横版ACT手游源代码 1、公共
11-19 2005
直接上代码 不说什么 这一款源代码 注释及多 PublicDef.h 公共头文件#define NF_PLATFORM 1 //当前版本（默认为普通版） //版本列表 #define NF_PLATFORM_NORMAL 1 //normal #define NF_PLATFORM_91 2 //91 playform #define NF_PLATFORM_PP
J2me横版动作游戏源代码
06-30
很厉害的一款游戏 希望能给大家带来灵感 希望可以继续优化
ACT游戏引擎设计及DEMO展示
prince58的专栏
12-17 3312
 声明：这个DEMO中所用的图片来自己GL的游戏，只是为了学习研究之用，请下载测试过后把游戏删除。谢谢！ 说明：这段时间工作不是很忙，利用业余时间把前两年在手机游戏公司的一些经验和积累做一个总结，写了这个横版动作类的游戏引擎。现在也完成的差不多了，下一步准备在此基础上做一些修改，添加任务事件的功能，把这个引擎改成RPG游戏也适用的。 这个游戏DEMO只是为了学习研究和展示自己的引擎
游戏策划学习（二）---游戏策划与开发方法---常见的游戏类型
qq_54350870的博客
11-26 4310
游戏
【愚公系列】《AIGC辅助软件开发》037-高阶产品应用开发：利用ChatGPT自动输出当日新闻资讯
最新发布
时光隧道
08-11 1万+
在信息爆炸的时代，及时获取新闻资讯已成为人们日常生活中不可或缺的一部分。然而，海量的信息常常让我们感到不知所措。如何快速、准确地获取最新的新闻动态，成为了许多人的需求。高阶产品应用开发为解决这一难题提供了新的思路，特别是利用人工智能技术，像ChatGPT这样的语言模型，能够自动输出当日新闻资讯，极大地提升了信息获取的效率。本文将深入探讨如何利用ChatGPT进行当日新闻资讯的自动输出，从技术架构到实现过程，我们将分享具体的开发步骤和挑战，帮助你理解如何将这一创新应用落地。
VSC# ArcGIS 二次开发--出图工具：添加图名、比例尺、指北针、图例，导出图片或文件、打印地图
热门推荐
KiKi_62586的博客
07-18 1万+
这是我们GIS课程的结课作业，只能说，大心血 链接在最后，但是还是希望大家可以看看代码，可以留言相互交流学习。   目录 链接在最后，但是还是希望大家可以看看代码，可以留言相互交流学习。 添加图名 指北针 比例尺（类似指北针。从样式库里添加） 图例 指北针窗体 导出地图 打印地图   添加图名 public void AddTitle(IPageLayout page...
cocos2dx 源码 act横版战斗手游 学习游戏架构 动作游戏
10-24
cocos2dx 源码 act横版战斗手游 学习游戏架构 动作游戏，非常有学习参考价值
基于HTML5的横版射击游戏源码
03-15
基于HTML5的横版射击游戏，参考自flash游戏《双面特工》,附件为该游戏所有源码
基于HTML5的格斗游戏mk.js.zip
07-17
mk.js是一个使用HTML5 canvas和JavaScript创建的简单格斗游戏。该游戏是开源的，源码托管在Github上。 演示：http://mk.mgechev.com/ mk.js共有三种游戏模式： 基本模式：只能操纵一个角色 多人模式：允许两个玩家在一台电脑上对战 网络模式：允许两个玩家在网络上对战 对于网络模式，需要先安装服务器： git clone git@github.com:mgechev/mk.js cd mk.js/server npm install node server.js 然后访问http://localhost:55555开始游戏。 介绍内容来自 iteye
Egret RPG 跑图Demo
09-26
Egret RPG 跑图Demo 2.5D地图 A星寻路 NPC 瓦片地图 Egret RPG 跑图Demo 2.5D地图 A星寻路 NPC 瓦片地图 Egret RPG 跑图Demo 2.5D地图 A星寻路 NPC 瓦片地图
40个H5小游戏实例完整源码
10-18
Html5游戏平台源码，40款h5小游戏和多款有趣的测试。在浏览器可以直接运行。包含包括答题问卷、积分赚取、抽奖、找你妹，跑酷、2048、小鸟飞飞、飞的更高、一个都不能死......等，对与要写H5小游戏或者微信公众号小游戏的朋友是一个很好的参考，大家可以下载来看看
NewMoonDog 影子狗 基于JavaScript的跑酷游戏，复制就能玩
long_songs的博客
03-25 756
↑ 跳跃 ↓ 坐下 跳砍 ← 往后跑 → 向前跑 enter 无敌翻滚 d 显示外形 q 重新开始游戏 energy 能量。
egret白鹭引擎开发的两个H5小游戏源码分享
water12233的博客
01-17 6024
业余时间，使用egret白鹭引擎开发了两个H5小游戏，现已开放源代码，希望对学习白鹭引擎开发的同学有所帮助。 源码地址：https://github.com/BaldwinZhang 游戏图片：  ...
Egret手机游戏战争迷雾
Egret_or_Unity的博客
03-30 2822
手机游戏战争迷雾
html5横版跑酷游戏《我和骑士》截图
niehanmin的博客
04-19 576
J2ME手机游戏开发实战指南：RPG&ACT架构详解
特别是第8和9章，通过实例解析，为RPG和ACT游戏设计了定制化的程序架构，深入剖析了手机游戏程序开发的核心技术，使得即使是J2ME初学者也能快速掌握关键技术。 前五章着重介绍了游戏制作的各个环节的最佳实践配置，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值