Heim Web-Frontend H5-Tutorial [HTML5-Spieleentwicklung] Fordern Sie die horizontale Version von ACT (1) heraus: Huang Zhongchu erscheint in Kaitiandi

[HTML5-Spieleentwicklung] Fordern Sie die horizontale Version von ACT (1) heraus: Huang Zhongchu erscheint in Kaitiandi

Mar 01, 2017 pm 04:14 PM

Obwohl ich kein Vollzeit-Spieleentwickler bin, habe ich versucht, verschiedene Arten von Spielen zu entwickeln, aber ich habe noch keine Side-Scrolling-Spiele ausprobiert. Dieses Mal werde ich die Lufylegend-Engine verwenden, um das Side-Scrolling-ACT herauszufordern Für die Spieleentwicklung

können Sie zu

http://lufylegend.com/lufylegend

gehen, um die neueste Version der Lufylegend-Engine herunterzuladen,

weil ich genauso bin. Dies ist das erste Mal, dass ich ein Spiel dieser Art entwickle. Wenn es also Ungenauigkeiten gibt, können Sie mir gerne antworten, um mich zu besprechen und zu korrigieren.

Inhaltsverzeichnis dieser Artikelserie (in Aktualisierung)

(1): Huang Zhongchu von Kaitiandi erscheint

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

(2): Zeigen Sie Ihre Fähigkeiten und Ihren Mut wie zuvor

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

(3): Leidenschaft empfinden, wenn man einen schönen Helden trifft

http://www.php.cn/html5- Tutorial-354347.html

Zuallererst gibt es das Problem mit dem Material, das ich einen halben Monat lang gesucht habe, aber ich habe keine andere Wahl, als General Huang Zhong zu fragen Hilfe. General Huang erzählte mir, dass er seit Hunderten von Jahren nicht mehr im Internet war, seit er von diesem Enkel von Ma Zhong geplant wurde Sehr aufgeregt. Ich tanzte sofort zu „Jiangnan Style“ und sang „Song of a Hero“. Seine Haltung ähnelte wirklich Li Kui, der aus Liangshanbo angereist war Ich wagte es nicht, es zu vernachlässigen, also nahm ich schnell den Computer und machte mich fertig. Dieses Mal werde ich es zuerst mit General Huang blockieren. Wenn Freunde gute Materialien haben, hoffe ich, dass sie diese bereitstellen können, damit der alte General Huang sich ausruhen kann.






Weil General Huang zu aufgeregt war und einfach vorwärts stürmte, bewegte er sich nur nach rechts und nicht nach links. Aus diesem Grund blieb mir nichts anderes übrig, als mich zu bewegen vorwärts Das LAnimation-Objekt in der Lufylegend-Engine wird nicht verwendet, da das LAnimation-Objekt ein Spiegelbild des Bildes verwenden kann, um die entgegengesetzte Aktion zum obigen Bild anzuzeigen.

Angesichts der Tatsache, dass es verschiedene Soldaten und Generäle auf dem Schlachtfeld gibt, sie aber alle Menschen sind und einige gemeinsame Eigenschaften haben und General Huang zu aufgeregt ist, verwendet diese Entwicklung immer noch OOP, um die Verwaltung und den Betrieb zu erleichtern Erstellen Sie basierend auf der Idee (der alte General Huang sagte sich, nachdem er es gehört hatte, oh Scheiße?) zunächst einen Charakter der übergeordneten Klasse


function Character(dataList,coordinateList,locationList,speed){
	base(this,LSprite,[]);
};
Nach dem Login kopieren

Schauen Sie sich diese an vier Parameter:

dataList: Schauen Sie sich zum Beispiel das Bild von General Huang oben an. Es gibt viele Aktionsgruppen, jede Aktionsgruppe ist ein Bild und der Parameter dataList sind diese Bildgruppen

coordinateList: Das LAnimation-Objekt muss Bilder nacheinander entsprechend den Koordinaten anzeigen, um eine Animation zu bilden. Dies muss sogar das Koordinatenarray des LAnimation-Objekts übergeben Das Bild ist für jede Aktion des Charakters unterschiedlich. Dieses Array wird verwendet, um die Anzeigeposition des entsprechenden Aktionsgruppenbilds anzupassen.

Geschwindigkeit: Es ist praktisch, die Häufigkeit des Charakters zu steuern Aktionen in jedem Frame auf der Zeitleiste

Das Folgende ist die Zeichenklasse. Der vollständige Konstruktor von


, wobei die ACTION-Variable und die DIRECTION-Variable wie folgt sind folgt
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;
};
Nach dem Login kopieren


//动作
var ACTION = {STAND:0,MOVE:1,RUN:2,JUMP:3,ATTACK:4};
//方向
var DIRECTION = {RIGHT:"right",LEFT:"left"};
Nach dem Login kopieren


Das Folgende ist eine detaillierte Einführung in die LAnimation-Klasse Bilder in der Reihenfolge oder in umgekehrter Reihenfolge. Die offizielle Erklärung lautet wie folgt:

实现简单动画的播放,原理是将一张大的图片,按照保存有坐标的二维数组保存的坐标来逐个显示。

■参数:

layer:LSprite显示层
data:LBitmapData对象
list:装有坐标的二维数组


上面的三个参数中,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}]
]
Nach dem Login kopieren

LAnimation对象的setAction函数,有四个参数,分别为

LAnimation.setAction(rowIndex,colIndex,mode,isMirror)
参数:
rowIndex:播放动画的行号
colIndex:播放动画的列号
mode:(1,0,-1)分别代表(正序播放,静止,倒序播放)
isMirror:Boolean型,当设定为true的时候,图片显示为水平翻转后的镜像
Nach dem Login kopieren

当然,光有一个构造器是不行的,因为LAnimation对象是通过调用onframe函数来实现播放的,所以给Character类添加一个函数,如下


Character.prototype.onframe = function (){
	var self = this;
	//人物动作速度控制
	if(self.speedIndex++ < self.speed)return;
	self.speedIndex = 0;
	//人物动画播放
	self.anime.onframe();
};
Nach dem Login kopieren

如此一来,只要不断的调用Character的实例的onframe函数,就能实现动态播放了。


黄老将军可能对比不感兴趣,此时已经在一旁打起了呼噜,我必须加快速度了......

考虑到战场上敌方和我方会有不同处理,建立一个继承自Character类的子类,如下


function Player(datalist,coordinateList,locationList,speed){
	base(this,Character,[datalist,coordinateList,locationList,speed]);
};
Nach dem Login kopieren

因为想要实例化这个类,需要三个参数,我再新建一个对象来获取这三个参数

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];
	}
}
Nach dem Login kopieren

所以我们要得到黄老将军的参数的话,就直接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);
Nach dem Login kopieren

暂时没有准备背景图片,所以就画了一个黑色矩形当做背景了,下面看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();
	}
}
Nach dem Login kopieren

运行代码,得到效果如下


话说,黄老将军正在呼呼地睡大觉,突然被我弄进了游戏里,并且四种漆黑一片,立刻就想到跑,但是由于我没有添加动作变换代码,它只能傻傻的站在那里,脑子里各种问号,为了不欺负人家,我必须赶紧写下去。

游戏中,有走,跑,跳,攻击等各种动作,咱们就用键盘的wsad来控制上下左右,j控制攻击,k控制跳,首先要添加键盘事件


	//添加键盘事件
	LEvent.addEventListener(LGlobal.window,LKeyboardEvent.KEY_DOWN,onkeydown);
	LEvent.addEventListener(LGlobal.window,LKeyboardEvent.KEY_UP,onkeyup);
Nach dem Login kopieren
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;
}
Nach dem Login kopieren

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;
};
Nach dem Login kopieren

也许是黄老将军太久没有上战场了,现在已经开始活蹦乱跳了


测试连接

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)!


Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Tabellenrahmen in HTML Tabellenrahmen in HTML Sep 04, 2024 pm 04:49 PM

Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.

Verschachtelte Tabelle in HTML Verschachtelte Tabelle in HTML Sep 04, 2024 pm 04:49 PM

Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.

HTML-Rand links HTML-Rand links Sep 04, 2024 pm 04:48 PM

Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.

HTML-Tabellenlayout HTML-Tabellenlayout Sep 04, 2024 pm 04:54 PM

Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.

HTML-geordnete Liste HTML-geordnete Liste Sep 04, 2024 pm 04:43 PM

Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele

HTML-Eingabeplatzhalter HTML-Eingabeplatzhalter Sep 04, 2024 pm 04:54 PM

Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.

Text in HTML verschieben Text in HTML verschieben Sep 04, 2024 pm 04:45 PM

Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.

HTML-Onclick-Button HTML-Onclick-Button Sep 04, 2024 pm 04:49 PM

Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.

See all articles