溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

html5如何開發(fā)RPG游戲

發(fā)布時(shí)間：2022-03-16 15:19:57 來源：億速云 閱讀：393 作者：iii 欄目：web開發(fā)

本篇內(nèi)容主要講解“html5如何開發(fā)RPG游戲”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“html5如何開發(fā)RPG游戲”吧!

　　準(zhǔn)備工作

　　一，庫件下載

　　本游戲開發(fā)，需要用到開源庫件：LegendForHtml5Programming

　　請(qǐng)到這里下載最新版的LegendForHtml5Programming，本次開發(fā)需要1.2版以上

　　庫件的開發(fā)過程請(qǐng)看這里

　　二，庫件配置

　　首先建立一個(gè)文件夾rpg（你也可以起其他的名字）

　　然后將下載的庫件解壓，解壓后將legend文件夾放到與rpg文件夾同目錄

　　然后，在rpg文件夾里建一個(gè)index.html文件和一個(gè)js文件夾，在js文件夾里建一個(gè)Main.js文件

　　最后，在index.html里加入下面的代碼

　　<!DOCTYPE html>

　　<html>

　　<head>

　　<meta charset="UTF-8">

　　<title>rpg</title>

　　</head>

　　<body>

　　<div id="mylegend">loading&hellip;&hellip;</div>

　　<!-- 引入LegendForHtml5Programming庫件 -->

　　<script type="text/javascript" src=""></script>

　　<script type="text/javascript" src=""></script>

　　</body></html>

　　當(dāng)然，你也可以將legend文件夾放到其他地方，但是你需要修改legend文件夾下的legend.js文件中的LEGEND_PATH的值，來配置庫件的路徑

　　游戲地圖的實(shí)現(xiàn)

　　接下來，我們先來畫最底層的地圖層，

　　地圖當(dāng)然就是是由圖片來組成的，如何在畫面上顯示一張圖片，我之前已經(jīng)寫過專門的文章，代碼如下

　　var loader;

　　function main（）{

　　loader=new LLoader（）;

　　loader.addEventListener（LEvent.COMPLETE,loadBitmapdata）;

　　loader.load（"map.jpg","bitmapData"）;

　　}

　　function loadBitmapdata（event）{

　　var bitmapdata=new LBitmapData（loader.content）;

　　var bitmap=new LBitmap（bitmapdata）;

　　addChild（bitmap）;

　　}

　　如果想更詳細(xì)了解的話，看下面的帖子

　　用仿ActionScript的語法來編寫html5&mdash;&mdash;第一篇，顯示一張圖片

　　游戲中的地圖可以是一張比較大的圖片，即整個(gè)圖片就是游戲的地圖，當(dāng)人物或者地圖移動(dòng)的時(shí)候，改變圖片顯示的區(qū)域范圍，從而實(shí)現(xiàn)地圖的滾動(dòng)和顯示等，這樣的話，必須為每個(gè)場(chǎng)景準(zhǔn)備一張地圖。

　　另外，地圖也可以是由許多小的地圖塊兒來組成，比如，我們熟悉的《吞食天地》，《勇者斗惡龍》等經(jīng)典小型rpg游戲，這樣的地圖，我們需要準(zhǔn)備一張或幾張地圖塊兒，把這些地圖塊組合成地圖來顯示，比如下圖

　　在地圖顯示的時(shí)候，首先把圖片切割，然后在根據(jù)預(yù)先設(shè)定好的位置顯示到地圖層上，這樣我們就看到了一張完整的地圖了

　　接下來，打開Main.js

　　在里面加入

　　1. init（50,"mylegend",480,320,main）;

　　在legendForHtml5Progarmming中，用init這個(gè)函數(shù)來初始化canvas，上面的代碼表示，初始化一個(gè)速度為50，名字為mylegend，大小為480*320的游戲界面，初始化完成后調(diào)用main（），這個(gè)速度值是說每個(gè)多少毫秒游戲循環(huán)一次，所以這個(gè)值設(shè)定的越小，游戲運(yùn)行的速度就越快

　　因?yàn)橐{(diào)用main方法，所以我們要寫一個(gè)main方法，main方法里做一些簡單的準(zhǔn)備工作。

　　雖說讀取圖片只需要一個(gè)

　　1. loader.load（"map.jpg","bitmapData"）;

　　但是游戲中往往用到很多張圖片，你可以用到哪一張?jiān)偌虞d哪一張，也可以一次性全部加載完，然后再開始顯示游戲

　　為了一次性把圖片加載完，我的做法是，將需要的圖片放到一個(gè)數(shù)組里，然后設(shè)定一個(gè)索引，每加載一個(gè)圖片，讓這個(gè)索引加1，當(dāng)這個(gè)索引小于數(shù)組的長度，則繼續(xù)加載，直到將數(shù)組中的圖片全部加載完，然后開始進(jìn)行下一步的工作

　　具體實(shí)現(xiàn)看下面的代碼

　　//圖片path數(shù)組

　　var imgData=new Array（）;

　　//讀取完的圖片數(shù)組

　　var imglist={};

　　function main（）{

　　//準(zhǔn)備讀取圖片

　　imgData.push（{name:"map",path:""}）;

　　imgData.push（{name:"mingren",path:""}）;

　　imgData.push（{name:"e1",path:""}）;

　　imgData.push（{name:"e2",path:""}）;

　　//實(shí)例化進(jìn)度條層

　　loadingLayer=new LSprite（）;

　　loadingLayer.graphics.drawRect（1,"black",[50, 200, 200, 20],true,"#ffffff"）;

　　addChild（loadingLayer）;

　　//開始讀取圖片

　　loadImage（）;

　　}

　　function loadImage（）{

　　//圖片全部讀取完成，開始初始化游戲

　　if（loadIndex >=imgData.length）{

　　removeChild（loadingLayer）;

　　legendLoadOver（）;

　　gameInit（）;

　　return;

　　}

　　//開始讀取圖片

　　loader=new LLoader（）;

　　loader.addEventListener（LEvent.COMPLETE,loadComplete）;

　　loader.load（imgData[loadIndex].path,"bitmapData"）;

　　}

　　function loadComplete（event）{

　　//進(jìn)度條顯示

　　loadingLayer.graphics.clear（）;

　　loadingLayer.graphics.drawRect（1,"black",[50, 200, 200, 20],true,"#ffffff"）;

　　loadingLayer.graphics.drawRect（1,"black",[50, 203, 200*（loadIndex/imgData.length）， 14],true,"#000000"）;

　　//儲(chǔ)存圖片數(shù)據(jù)

　　imglist[imgData[loadIndex].name]=loader.content;

　　//讀取下一張圖片

　　loadIndex++;

　　loadImage（）;

　　}

　　上面的代碼不難明白，當(dāng)圖片沒有讀取完之前，會(huì)不斷循環(huán)loadImage和loadComplete兩個(gè)方法，當(dāng)讀取完之后，移除進(jìn)度條，用legendLoadOver告訴游戲已經(jīng)讀取完成，然后調(diào)用gameInit方法，進(jìn)行游戲的初始化工作。

　　看gameInit方法

　　function gameInit（event）{

　　//游戲?qū)语@示初始化

　　layerInit（）;

　　//添加地圖

　　addMap（）;

　　//添加人物

　　addChara（）;

　　}

　　在gameInit方法中，首先進(jìn)行游戲?qū)拥某跏蓟?，然后添加游戲地圖，然后添加人物

　　游戲?qū)语@示初始化，按照我們一開始所說，我們一次來初始化地圖層，人物層，效果層，對(duì)話層，控制層

　　//游戲?qū)语@示初始化

　　function layerInit（）{

　　//游戲底層添加

　　backLayer=new LSprite（）;

　　addChild（backLayer）;

　　//地圖層添加

　　mapLayer=new LSprite（）;

　　backLayer.addChild（mapLayer）;

　　//人物層添加

　　charaLayer=new LSprite（）;

　　backLayer.addChild（charaLayer）;

　　//效果層添加

　　effectLayer=new LSprite（）;

　　backLayer.addChild（effectLayer）;

　　//對(duì)話層添加

　　talkLayer=new LSprite（）;

　　backLayer.addChild（talkLayer）;

　　//控制層添加

　　ctrlLayer=new LSprite（）;

　　backLayer.addChild（ctrlLayer）;

　　}

　　有了游戲?qū)哟蔚膭澐郑覀冊(cè)谔砑佑螒驅(qū)ο蟮臅r(shí)候，將地圖添加到地圖層，人物添加到人物層，他們就會(huì)依次顯示在游戲的界面

　　下面開始添加地圖

　　首先我們需要準(zhǔn)備好顯示地圖的數(shù)組

　　//地圖圖片數(shù)組

　　var map=[

　　[18,18,18,18,18,18,18,18,18,18,18,18,55,55,18],

　　[18,18,18,17,17,17,17,17,17,17,17,17,55,55,18],

　　[18,18,17,17,17,17,18,18,17,17,17,17,55,55,18],

　　[18,17,17,17,18,18,18,18,18,17,17,55,55,17,18],

　　[18,17,17,18,22,23,23,23,24,18,17,55,55,17,18],

　　[18,17,17,18,25,28,26,79,27,18,55,55,17,17,18],

　　[18,17,17,17,17,10,11,12,18,18,55,55,17,17,18],

　　[18,18,17,17,10,16,16,16,11,55,55,17,17,17,18],

　　[18,18,17,17,77,16,16,16,16,21,21,17,17,17,18],

　　[18,18,18,18,18,18,18,18,18,55,55,18,18,18,18]

　　];

　　這些數(shù)字分別對(duì)應(yīng)著圖中如下位置

　　然后看下面代碼

　　//添加地圖

　　function addMap（）{

　　var i,j,index,indexX,indexY;

　　var bitmapdata,bitmap;

　　//地圖圖片數(shù)據(jù)

　　bitmapdata=new LBitmapData（imglist["map"]）;

　　//將地圖圖片拆分，得到拆分后的各個(gè)小圖片的坐標(biāo)數(shù)組

　　imageArray=LGlobal.divideCoordinate（bitmapdata.image.width,bitmapdata.image.height,10,10）;

　　//在地圖層上，畫出15*10的小圖片

　　for（i=0;i<10;i++）{

　　for（j=0;j<15;j++）{

　　//從地圖數(shù)組中得到相應(yīng)位置的圖片坐標(biāo)

　　index=map[i][j];

　　//小圖片的豎坐標(biāo)

　　indexY=Math.floor（index /10）;

　　//小圖片的橫坐標(biāo)

　　indexX=index - indexY*10;

　　//得到小圖片

　　bitmapdata=new LBitmapData（imglist["map"],indexX*32,indexY*32,32,32）;

　　bitmap=new LBitmap（bitmapdata）;

　　//設(shè)置小圖片的顯示位置

　　bitmap.x=j*32;

　　bitmap.y=i*32;

　　//將小圖片顯示到地圖層

　　mapLayer.addChild（bitmap）;

　　}

　　}

　　}

　　這樣，我們就把預(yù)先設(shè)置好的圖片顯示到了游戲界面上，形成了地圖

　　先把a(bǔ)ddChara方法加上

　　//添加人物

　　function addChara（）{

　　}

　　然后運(yùn)行游戲

　　可以得到下面畫面

　　游戲人物的實(shí)現(xiàn)

　　為了更好的實(shí)現(xiàn)游戲人物的控制，我們新建一個(gè)游戲人物類Character.js

　　里面代碼如下

　　function Character（data,row,col,speed）{

　　base（this,LSprite,[]）;

　　var self=this;

　　//設(shè)定人物動(dòng)作速度

　　self.speed=speed==null?3:speed;

　　self.speedIndex=0;

　　//設(shè)定人物大小

　　data.setProperties（0,0,data.image.width/col,data.image.height/row）;

　　//得到人物圖片拆分?jǐn)?shù)組

　　var list=LGlobal.divideCoordinate（data.image.width,data.image.height,row,col）;

　　//設(shè)定人物動(dòng)畫

　　self.anime=new LAnimation（this,data,list）;

　　};

　　Character.prototype.onframe=function （）{

　　var self=this;

　　if（self.speedIndex++ < self.speed）return;

　　self.speedIndex=0;

　　self.anime.onframe（）;

　　};

　　在legendForHtml5Programming里，有一個(gè)LAnimation類，用來實(shí)現(xiàn)圖片數(shù)組順序播放，形成動(dòng)畫

　　使用LAnimation類需要三個(gè)參數(shù)，一個(gè)是顯示動(dòng)畫的層，一個(gè)是圖片，一個(gè)是圖片的坐標(biāo)數(shù)組

　　然后，調(diào)用LAnimation類的onframe方法，就可以實(shí)現(xiàn)動(dòng)畫的播放了

　　在index.html中引入Character類，然后修改addChara方法

　　//添加人物

　　function addChara（）{

　　bitmapdata=new LBitmapData（imglist["mingren"]）;

　　player=new Character（bitmapdata,4,4）;

　　player.x=32*5;

　　player.y=32*6;

　　charaLayer.addChild（player）;

　　}

　　在gameInit的末尾添加循環(huán)事件

　　//添加貞事件，開始游戲循環(huán)

　　backLayer.addEventListener（LEvent.ENTER_FRAME,onframe）;

　　最后，添加onframe方法

　　function onframe（）{

　　player.onframe（）;

　　}

到此，相信大家對(duì)“html5如何開發(fā)RPG游戲”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手