自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

HTML 5開發(fā)RPG游戲之二（跑起來(lái)吧英雄）

作者：HTML5中國(guó)
開發(fā) 前端
要控制游戲的人物，首先，我們要由控制事件，當(dāng)觸發(fā)這個(gè)事件的時(shí)候，就來(lái)調(diào)用相應(yīng)的方法，做我們想要的做的處理setCoordinate和getCoordinate是設(shè)定和得到人物當(dāng)前的坐標(biāo)。

上一篇中，已經(jīng)詳細(xì)講解了，如何添加地圖，以及添加了一個(gè)游戲人物，現(xiàn)在我們來(lái)添加控制事件，讓這個(gè)小英雄走動(dòng)起來(lái)

0_1323875534sUfb (1).gif

我們已經(jīng)給游戲人物建立了一個(gè)Character類，

現(xiàn)在先來(lái)在類里加入

  1. Character.prototype.changeDir = function (dir){  
  2. };  
  3. /**  
  4.  * 設(shè)定人物坐標(biāo)  
  5.  * @param x方向坐標(biāo)，y方向坐標(biāo)   
  6.  **/  
  7. Character.prototype.setCoordinate = function (sx,sy){  
  8. };  
  9. /**  
  10.  * 獲取人物坐標(biāo)  
  11.  **/  
  12. Character.prototype.getCoordinate = function (){  
  13. }; 

changeDir 這個(gè)方法用來(lái)從外部控制人物方向和移動(dòng)

要控制游戲的人物，首先，我們要由控制事件，當(dāng)觸發(fā)這個(gè)事件的時(shí)候，就來(lái)調(diào)用相應(yīng)的方法，做我們想要的做的處理setCoordinate和getCoordinate是設(shè)定和得到人物當(dāng)前的坐標(biāo)

首先，為了適應(yīng)智能手機(jī)，我們暫時(shí)不用鍵盤事件，而是用點(diǎn)擊事件，所以我們先來(lái)添加兩個(gè)控制按鈕，在Main.js的gameInit方法的最下方，添加如下代碼

  1. //添加控制按鈕  
  2.     bitmapdata = new LBitmapData(imglist["e1"]);  
  3.     bitmap = new LBitmap(bitmapdata);  
  4.     bitmap.x = 0;  
  5.     bitmap.y = 0;  
  6.     ctrlLayer.addChild(bitmap);  
  7.     bitmapdata = new LBitmapData(imglist["e2"]);  
  8.     bitmap = new LBitmap(bitmapdata);  
  9.     bitmap.x = 280;  
  10.     bitmap.y = 30;  
  11.     ctrlLayer.addChild(bitmap);  
  12.     ctrlLayer.x = 40;  
  13.     ctrlLayer.y = 180; 

運(yùn)行代碼，得到預(yù)覽如下

0_1323996441iWWB.gif

在添加控制事件之前，為了實(shí)現(xiàn)控制方便，我們先來(lái)添加幾個(gè)變量

  1. //方向變量  
  2. var DOWN = 0;  
  3. var LEFT = 1;  
  4. var RIGHT = 2;  
  5. var UP = 3;  
  6. var STEP = 32;  
  7. //點(diǎn)擊狀態(tài)  
  8. var isKeyDown = false; 

STEP代表移動(dòng)步長(zhǎng)，因?yàn)榈貓D是有32*32的小圖片來(lái)組成的，所以我們?cè)O(shè)定人物移動(dòng)的步長(zhǎng)為32

方向變量的0,1,2,3分別對(duì)應(yīng)下面圖片中的第1,2,3,4行的方向

0_1323998361U1vb.gif

之所以添加點(diǎn)擊狀態(tài)，是因?yàn)?，?dāng)我們按下移動(dòng)按鈕沒有抬起的時(shí)候，人物應(yīng)該始終處于移動(dòng)狀態(tài)，所以用這個(gè)變量來(lái)區(qū)分，我們是否按下或者抬起好了，做好了準(zhǔn)備工作，現(xiàn)在就開始添加移動(dòng)事件

  1. //添加點(diǎn)擊控制事件  
  2.     backLayer.addEventListener(LMouseEvent.MOUSE_DOWN,ondown);  
  3.     backLayer.addEventListener(LMouseEvent.MOUSE_UP,onup);  
  4.  
  5. function ondown(event){  
  6.     //根據(jù)點(diǎn)擊位置，判斷移動(dòng)方向  
  7.     if(event.offsetX >= ctrlLayer.x + 40 && event.offsetX <= ctrlLayer.x+80){  
  8.         if(event.offsetY >= ctrlLayer.y && event.offsetY <= ctrlLayer.y+40){  
  9.             player.changeDir(UP);  
  10.         }else if(event.offsetY >= ctrlLayer.y+80 && event.offsetY <= ctrlLayer.y+120){  
  11.             player.changeDir(DOWN);  
  12.         }  
  13.     }else if(event.offsetX >= ctrlLayer.x && event.offsetX <= ctrlLayer.x+40){  
  14.         if(event.offsetY >= ctrlLayer.y +40 && event.offsetY <= ctrlLayer.y+80){  
  15.             player.changeDir(LEFT);  
  16.         }  
  17.     }else if(event.offsetX >= ctrlLayer.x+80 && event.offsetX <= ctrlLayer.x+120){  
  18.         if(event.offsetY >= ctrlLayer.y +40 && event.offsetY <= ctrlLayer.y+80){  
  19.             player.changeDir(RIGHT);  
  20.         }  
  21.     }  
  22.     isKeyDown = true;  
  23. }  
  24. function onup(event){  
  25.     isKeyDown = false;  
  26. } 

這里需要知道的是，在智能手機(jī)里，其實(shí)點(diǎn)擊事件是TOUCH_START,TOUCH_MOVE，TOUCH_END事件

使用legendForHtml5Programming庫(kù)件的時(shí)候，只需要添加MOUSE_DOWN，MOUSE_MOVE，MOUSE_UP事件，然后庫(kù)件會(huì)自動(dòng)判斷是加載TOUCH事件還是MOUSE事件

在ondown方法中，我們將isKeyDown的狀態(tài)變?yōu)閠rue，表示我們正處于按下狀態(tài)

然后，根據(jù)我們點(diǎn)擊的位置，來(lái)調(diào)用Character類的changeDir方法，并且傳入點(diǎn)擊的方向

有了控制事件，現(xiàn)在的關(guān)鍵就在于changeDir方法，只要根據(jù)傳進(jìn)來(lái)的值，來(lái)實(shí)現(xiàn)移動(dòng)就可以了

我們?cè)囅耄绻看我苿?dòng)一個(gè)步長(zhǎng)的話，那么人物就會(huì)由一個(gè)小方格跳到令一個(gè)方格，而我們需要的是，讓它緩慢的移動(dòng)到下一個(gè)方格，有一個(gè)移動(dòng)的過(guò)程

為了實(shí)現(xiàn)這個(gè)過(guò)程，我們?cè)谝苿?dòng)的時(shí)候不是讓人物的坐標(biāo)馬上就改變，而是改變?nèi)宋锏臓顟B(tài)，由靜止到移動(dòng)，然后處于移動(dòng)狀態(tài)的時(shí)候，再讓人物一小步一小步的移動(dòng)到目標(biāo)點(diǎn)

修改Character類的構(gòu)造器，如下

  1. function Character(data,row,col,speed){  
  2.     base(this,LSprite,[]);  
  3.     var self = this;  
  4.     //設(shè)定人物動(dòng)作速度  
  5.     self.speed = speed==null?3:speed;  
  6.     self.speedIndex = 0;  
  7.     //設(shè)定人物大小  
  8.     data.setProperties(0,0,data.image.width/col,data.image.height/row);  
  9.     //得到人物圖片拆分?jǐn)?shù)組  
  10.     var list = LGlobal.divideCoordinate(data.image.width,data.image.height,row,col);  
  11.     //設(shè)定人物動(dòng)畫  
  12.     self.anime = new LAnimation(this,data,list);  
  13.     //調(diào)整人物位置  
  14.     self.anime.y -= 16;  
  15.     //設(shè)定不移動(dòng)  
  16.     self.move = false;  
  17.     //在一個(gè)移動(dòng)步長(zhǎng)中的移動(dòng)次數(shù)設(shè)定  
  18.     self.moveIndex = 0;  
  19. }; 

調(diào)整人物位置是因?yàn)?，人物的圖片分割后，每個(gè)動(dòng)作的大小為32*48，而地圖每個(gè)小格的大小是32*32，然后設(shè)定人物狀態(tài)為不移動(dòng)，然后修改changeDir 方法

  1. /**  
  2.  * 改變?nèi)宋锓较? 
  3.  **/ 
  4. Character.prototype.changeDir = function (dir){  
  5.     var self = this;  
  6.     //如果正在移動(dòng)，則無(wú)效  
  7.     if(!self.move){  
  8.         //設(shè)定人物方向  
  9.         self.direction = dir;  
  10.         //設(shè)定圖片動(dòng)畫  
  11.         self.anime.setAction(dir);  
  12.         //開始移動(dòng)  
  13.         self.move = true;  
  14.         self.moveIndex = 0;  
  15.     }  
  16. }; 

這里要簡(jiǎn)單說(shuō)明一下LAnimation類的setAction方法，setAction(rowindex,colindex)方法有兩個(gè)參數(shù)，LAnimation里傳進(jìn)來(lái)的圖片數(shù)組是一個(gè)二維數(shù)組,這兩個(gè)參數(shù)分別可以改變目前顯示的圖片的動(dòng)作，當(dāng)然，也可以只傳其中一個(gè)參數(shù)

我這次是將4*4的人物動(dòng)作圖片分割為4*4的二維數(shù)組傳給了LAnimation類，所以現(xiàn)在每一行圖片代表一個(gè)方向

人物狀態(tài)設(shè)置為移動(dòng)后，就應(yīng)該在循環(huán)事件里開始一步步的移動(dòng)了

  1. /**  
  2.  * 循環(huán)事件   
  3.  **/ 
  4. Character.prototype.onframe = function (){  
  5.     var self = this;  
  6.     //人物動(dòng)作速度控制  
  7.     if(self.speedIndex++ < self.speed)return;  
  8.     self.speedIndex = 0;  
  9.     //當(dāng)人物可移動(dòng)，則開始移動(dòng)  
  10.     if(self.move)self.onmove();  
  11.     //人物動(dòng)畫播放  
  12.     self.anime.onframe();  
  13. };  
  14. /**  
  15.  * 開始移動(dòng)   
  16.  **/ 
  17. Character.prototype.onmove = function (){  
  18.     var self = this;  
  19.     //設(shè)定一個(gè)移動(dòng)步長(zhǎng)中的移動(dòng)次數(shù)  
  20.     var ml_cnt = 4;  
  21.     //計(jì)算一次移動(dòng)的長(zhǎng)度  
  22.     var ml = STEP/ml_cnt;  
  23.     //根據(jù)移動(dòng)方向，開始移動(dòng)  
  24.     switch (self.direction){  
  25.         case UP:  
  26.             self.y -= ml;  
  27.             break;  
  28.         case LEFT:  
  29.             self.x -= ml;  
  30.             break;  
  31.         case RIGHT:  
  32.             self.x += ml;  
  33.             break;  
  34.         case DOWN:  
  35.             self.y += ml;  
  36.             break;  
  37.     }  
  38.     self.moveIndex++;  
  39.     //當(dāng)移動(dòng)次數(shù)等于設(shè)定的次數(shù)，開始判斷是否繼續(xù)移動(dòng)  
  40.     if(self.moveIndex >= ml_cnt){  
  41.         self.moveIndex = 0;  
  42.         //如果已經(jīng)松開移動(dòng)鍵，則停止移動(dòng)，否則繼續(xù)移動(dòng)  
  43.         if(!isKeyDown){  
  44.             self.move = false;  
  45.             return;  
  46.         }  
  47.     }  
  48. }; 

這里，我選擇了讓人物每個(gè)步長(zhǎng)分四次進(jìn)行移動(dòng)，這樣就實(shí)現(xiàn)了緩慢移動(dòng)的效果，運(yùn)行程序，點(diǎn)擊畫面中的方向鍵，看到了把，人物已經(jīng)可以開始移動(dòng)了，而且是緩慢的移動(dòng)

1010.gif

#p#

但是，光這樣還是不行，我們發(fā)現(xiàn)，人物是可以移動(dòng)了，但是他現(xiàn)在是超人，飛檐走壁無(wú)所不入，移動(dòng)的暢通無(wú)阻

這就需要我們?cè)谝苿?dòng)過(guò)程中，加入移動(dòng)判斷，看看是否可以移動(dòng)，

為了實(shí)現(xiàn)這個(gè)判斷，我們必須要知道地圖什么地方可以移動(dòng)，什么地方不可以移動(dòng)

所以，我們需要一個(gè)地圖的地形，如下

  1. //地圖地形數(shù)組  
  2. var mapdata = [  
  3. [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],  
  4. [1,1,1,0,0,0,0,0,0,0,0,0,1,1,1],  
  5. [1,1,0,0,0,0,1,1,0,0,0,0,1,1,1],  
  6. [1,0,0,0,1,1,1,1,1,0,0,1,1,0,1],  
  7. [1,0,0,1,1,1,1,1,1,1,0,1,1,0,1],  
  8. [1,0,0,1,1,1,0,1,1,1,1,1,0,0,1],  
  9. [1,0,0,0,0,0,0,0,1,1,1,1,0,0,1],  
  10. [1,1,0,0,0,0,0,0,0,1,1,0,0,0,1],  
  11. [1,1,0,0,0,0,0,0,0,0,0,0,0,0,1],  
  12. [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]  
  13. ]; 

地形數(shù)組中，0代表可以移動(dòng)，1代表障礙物，是不可移動(dòng)的，接下來(lái)，給Character類添加判斷方法

  1. /**  
  2.  * 障礙物判斷  
  3.  * @param 判斷方向   
  4.  **/ 
  5. Character.prototype.checkRoad = function (dir){  
  6.     var self = this;  
  7.     var tox,toy,myCoordinate;  
  8.     //當(dāng)判斷方向?yàn)榭盏臅r(shí)候，默認(rèn)當(dāng)前方向  
  9.     if(dir==null)dir=self.direction;  
  10.     //獲取人物坐標(biāo)  
  11.     myCoordinate = self.getCoordinate();  
  12.     //開始計(jì)算移動(dòng)目的地的坐標(biāo)  
  13.     switch (dir){  
  14.         case UP:  
  15.             tox = myCoordinate.x;  
  16.             toy = myCoordinate.y - 1;  
  17.             break;  
  18.         case LEFT:  
  19.             tox = myCoordinate.x - 1;  
  20.             toy = myCoordinate.y ;  
  21.             break;  
  22.         case RIGHT:  
  23.             tox = myCoordinate.x + 1;  
  24.             toy = myCoordinate.y;  
  25.             break;  
  26.         case DOWN:  
  27.             tox = myCoordinate.x;  
  28.             toy = myCoordinate.y + 1;  
  29.             break;  
  30.     }  
  31.     //如果移動(dòng)的范圍超過(guò)地圖的范圍，則不可移動(dòng)  
  32.     if(tox <= 0 || toy <= 0)return false;  
  33.     if(toy >= mapdata.length || tox >= mapdata[0].length)return false;  
  34.     //如果目的地為障礙，則不可移動(dòng)  
  35.     if(mapdata[toy][tox] == 1)return false;  
  36.     return true;  
  37. }; 

然后，在changeDir方法，和onmove方法中，添加相應(yīng)的判斷，如下

  1. /**  
  2.  * 開始移動(dòng)   
  3.  **/ 
  4. Character.prototype.onmove = function (){  
  5.     var self = this;  
  6.     //設(shè)定一個(gè)移動(dòng)步長(zhǎng)中的移動(dòng)次數(shù)  
  7.     var ml_cnt = 4;  
  8.     //計(jì)算一次移動(dòng)的長(zhǎng)度  
  9.     var ml = STEP/ml_cnt;  
  10.     //根據(jù)移動(dòng)方向，開始移動(dòng)  
  11.     switch (self.direction){  
  12.         case UP:  
  13.             self.y -= ml;  
  14.             break;  
  15.         case LEFT:  
  16.             self.x -= ml;  
  17.             break;  
  18.         case RIGHT:  
  19.             self.x += ml;  
  20.             break;  
  21.         case DOWN:  
  22.             self.y += ml;  
  23.             break;  
  24.     }  
  25.     self.moveIndex++;  
  26.     //當(dāng)移動(dòng)次數(shù)等于設(shè)定的次數(shù)，開始判斷是否繼續(xù)移動(dòng)  
  27.     if(self.moveIndex >= ml_cnt){  
  28.         self.moveIndex = 0;  
  29.         //如果已經(jīng)松開移動(dòng)鍵，或者前方為障礙物，則停止移動(dòng)，否則繼續(xù)移動(dòng)  
  30.         if(!isKeyDown || !self.checkRoad()){  
  31.             self.move = false;  
  32.             return;  
  33.         }  
  34.     }  
  35. };  
  36. /**  
  37.  * 改變?nèi)宋锓较?，并判斷是否可移?dòng)  
  38.  **/ 
  39. Character.prototype.changeDir = function (dir){  
  40.     var self = this;  
  41.     //如果正在移動(dòng)，則無(wú)效  
  42.     if(!self.move){  
  43.         //設(shè)定人物方向  
  44.         self.direction = dir;  
  45.         //設(shè)定圖片動(dòng)畫  
  46.         self.anime.setAction(dir);  
  47.         //判斷是否可移動(dòng)  
  48.         if(!self.checkRoad(dir))return;  
  49.         //如果可以移動(dòng)，則開始移動(dòng)  
  50.         self.move = true;  
  51.         self.moveIndex = 0;  
  52.     }  
  53. }; 

好了，大功告成，開始運(yùn)行吧

測(cè)試URL如下:http://fsanguo.comoj.com/html5/rpg/index.html

這次的源代碼下載:http://fsanguo.comoj.com/html5/rpg5/rpg5.rar

原文鏈接：http://www.cnblogs.com/html5cn/articles/2333828.html

【編輯推薦】

  1. HTML 5開發(fā)RPG游戲之一（地圖人物實(shí)現(xiàn)）
  2. HTML 5開發(fā)RPG游戲之三（卷軸和對(duì)話）
  3. HTML 5開發(fā)RPG游戲之四（游戲腳本化）
  4. 開發(fā)HTML5跨平臺(tái)游戲相關(guān)經(jīng)驗(yàn)
  5. HTML 5開發(fā)的優(yōu)秀網(wǎng)頁(yè)游戲
責(zé)任編輯：張偉 來(lái)源： HTML5中國(guó)的博客
HTML5
相關(guān)推薦

2010-07-13 09:31:08

RubyRuby on Rai

2009-04-29 14:40:17

2012-05-15 13:57:41

HTML5

2023-03-02 23:09:53

Node.jsC++JS

2012-05-15 13:44:00

HTML5中國(guó)

2012-05-15 13:10:57

HTML5

2011-05-04 11:26:47

優(yōu)化

2021-01-22 14:03:34

Flutter系統(tǒng)鴻蒙

2024-05-27 09:01:22

2021-01-12 11:12:58

大數(shù)據(jù)智慧交通

2023-08-03 09:02:32

LangChain開發(fā)GLM

2022-12-06 09:03:44

代碼fork系統(tǒng)

2015-08-04 17:46:19

戴爾anycloud云計(jì)算

2022-01-10 10:23:07

瀏覽器Vitenode

2017-11-17 15:25:02

Java線程安全

2021-11-10 10:00:48

鴻蒙HarmonyOS應(yīng)用

2023-01-31 07:42:29

代碼JDKMaven

2014-04-18 17:12:00

樂(lè)跑手環(huán)

2012-05-15 10:35:35

HTML5

2012-01-06 14:10:13

HTML 5
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)