溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“html5如何開發RPG游戲”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“html5如何開發RPG游戲”吧!
準備工作
一，庫件下載
本游戲開發，需要用到開源庫件：LegendForHtml5Programming
請到這里下載最新版的LegendForHtml5Programming，本次開發需要1.2版以上
庫件的開發過程請看這里
二，庫件配置
首先建立一個文件夾rpg（你也可以起其他的名字）
然后將下載的庫件解壓，解壓后將legend文件夾放到與rpg文件夾同目錄
然后，在rpg文件夾里建一個index.html文件和一個js文件夾，在js文件夾里建一個Main.js文件
最后，在index.html里加入下面的代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>rpg</title>
</head>
<body>
<div id="mylegend">loading……</div>
<!-- 引入LegendForHtml5Programming庫件 -->
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
</body></html>
當然，你也可以將legend文件夾放到其他地方，但是你需要修改legend文件夾下的legend.js文件中的LEGEND_PATH的值，來配置庫件的路徑
游戲地圖的實現
接下來，我們先來畫最底層的地圖層，
地圖當然就是是由圖片來組成的，如何在畫面上顯示一張圖片，我之前已經寫過專門的文章，代碼如下
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）;
}
如果想更詳細了解的話，看下面的帖子
用仿ActionScript的語法來編寫html5——第一篇，顯示一張圖片
游戲中的地圖可以是一張比較大的圖片，即整個圖片就是游戲的地圖，當人物或者地圖移動的時候，改變圖片顯示的區域范圍，從而實現地圖的滾動和顯示等，這樣的話，必須為每個場景準備一張地圖。
另外，地圖也可以是由許多小的地圖塊兒來組成，比如，我們熟悉的《吞食天地》，《勇者斗惡龍》等經典小型rpg游戲，這樣的地圖，我們需要準備一張或幾張地圖塊兒，把這些地圖塊組合成地圖來顯示，比如下圖
在地圖顯示的時候，首先把圖片切割，然后在根據預先設定好的位置顯示到地圖層上，這樣我們就看到了一張完整的地圖了
接下來，打開Main.js
在里面加入
1. init（50,"mylegend",480,320,main）;
在legendForHtml5Progarmming中，用init這個函數來初始化canvas，上面的代碼表示，初始化一個速度為50，名字為mylegend，大小為480*320的游戲界面，初始化完成后調用main（），這個速度值是說每個多少毫秒游戲循環一次，所以這個值設定的越小，游戲運行的速度就越快
因為要調用main方法，所以我們要寫一個main方法，main方法里做一些簡單的準備工作。
雖說讀取圖片只需要一個
1. loader.load（"map.jpg","bitmapData"）;
但是游戲中往往用到很多張圖片，你可以用到哪一張再加載哪一張，也可以一次性全部加載完，然后再開始顯示游戲
為了一次性把圖片加載完，我的做法是，將需要的圖片放到一個數組里，然后設定一個索引，每加載一個圖片，讓這個索引加1，當這個索引小于數組的長度，則繼續加載，直到將數組中的圖片全部加載完，然后開始進行下一步的工作
具體實現看下面的代碼
//圖片path數組
var imgData=new Array（）;
//讀取完的圖片數組
var imglist={};
function main（）{
//準備讀取圖片
imgData.push（{name:"map",path:""}）;
imgData.push（{name:"mingren",path:""}）;
imgData.push（{name:"e1",path:""}）;
imgData.push（{name:"e2",path:""}）;
//實例化進度條層
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）{
//進度條顯示
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"）;
//儲存圖片數據
imglist[imgData[loadIndex].name]=loader.content;
//讀取下一張圖片
loadIndex++;
loadImage（）;
}
上面的代碼不難明白，當圖片沒有讀取完之前，會不斷循環loadImage和loadComplete兩個方法，當讀取完之后，移除進度條，用legendLoadOver告訴游戲已經讀取完成，然后調用gameInit方法，進行游戲的初始化工作。
看gameInit方法
function gameInit（event）{
//游戲層顯示初始化
layerInit（）;
//添加地圖
addMap（）;
//添加人物
addChara（）;
}
在gameInit方法中，首先進行游戲層的初始化，然后添加游戲地圖，然后添加人物
游戲層顯示初始化，按照我們一開始所說，我們一次來初始化地圖層，人物層，效果層，對話層，控制層
//游戲層顯示初始化
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）;
//對話層添加
talkLayer=new LSprite（）;
backLayer.addChild（talkLayer）;
//控制層添加
ctrlLayer=new LSprite（）;
backLayer.addChild（ctrlLayer）;
}
有了游戲層次的劃分，我們在添加游戲對象的時候，將地圖添加到地圖層，人物添加到人物層，他們就會依次顯示在游戲的界面
下面開始添加地圖
首先我們需要準備好顯示地圖的數組
//地圖圖片數組
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]
];
這些數字分別對應著圖中如下位置
然后看下面代碼
//添加地圖
function addMap（）{
var i,j,index,indexX,indexY;
var bitmapdata,bitmap;
//地圖圖片數據
bitmapdata=new LBitmapData（imglist["map"]）;
//將地圖圖片拆分，得到拆分后的各個小圖片的坐標數組
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++）{
//從地圖數組中得到相應位置的圖片坐標
index=map[i][j];
//小圖片的豎坐標
indexY=Math.floor（index /10）;
//小圖片的橫坐標
indexX=index - indexY*10;
//得到小圖片
bitmapdata=new LBitmapData（imglist["map"],indexX*32,indexY*32,32,32）;
bitmap=new LBitmap（bitmapdata）;
//設置小圖片的顯示位置
bitmap.x=j*32;
bitmap.y=i*32;
//將小圖片顯示到地圖層
mapLayer.addChild（bitmap）;
}
}
}
這樣，我們就把預先設置好的圖片顯示到了游戲界面上，形成了地圖
先把addChara方法加上
//添加人物
function addChara（）{
}
然后運行游戲
可以得到下面畫面
游戲人物的實現
為了更好的實現游戲人物的控制，我們新建一個游戲人物類Character.js
里面代碼如下
function Character（data,row,col,speed）{
base（this,LSprite,[]）;
var self=this;
//設定人物動作速度
self.speed=speed==null?3:speed;
self.speedIndex=0;
//設定人物大小
data.setProperties（0,0,data.image.width/col,data.image.height/row）;
//得到人物圖片拆分數組
var list=LGlobal.divideCoordinate（data.image.width,data.image.height,row,col）;
//設定人物動畫
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里，有一個LAnimation類，用來實現圖片數組順序播放，形成動畫
使用LAnimation類需要三個參數，一個是顯示動畫的層，一個是圖片，一個是圖片的坐標數組
然后，調用LAnimation類的onframe方法，就可以實現動畫的播放了
在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的末尾添加循環事件
//添加貞事件，開始游戲循環
backLayer.addEventListener（LEvent.ENTER_FRAME,onframe）;
最后，添加onframe方法
function onframe（）{
player.onframe（）;
}
到此，相信大家對“html5如何開發RPG游戲”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
