日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
HTML5開發(fā)RPG游戲之二（跑起來吧英雄）

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

創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設、高性價比新豐網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式新豐網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設找我們，業(yè)務覆蓋新豐地區(qū)。費用合理售后完善，十年實體公司更值得信賴。

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

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

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

changeDir 這個方法用來從外部控制人物方向和移動

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

首先，為了適應智能手機，我們暫時不用鍵盤事件，而是用點擊事件，所以我們先來添加兩個控制按鈕，在Main.js的gameInit方法的最下方，添加如下代碼

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

運行代碼，得到預覽如下

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

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

STEP代表移動步長，因為地圖是有32*32的小圖片來組成的，所以我們設定人物移動的步長為32

方向變量的0,1,2,3分別對應下面圖片中的第1,2,3,4行的方向

之所以添加點擊狀態(tài)，是因為，當我們按下移動按鈕沒有抬起的時候，人物應該始終處于移動狀態(tài)，所以用這個變量來區(qū)分，我們是否按下或者抬起好了，做好了準備工作，現(xiàn)在就開始添加移動事件

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

這里需要知道的是，在智能手機里，其實點擊事件是TOUCH_START,TOUCH_MOVE，TOUCH_END事件

使用legendForHtml5Programming庫件的時候，只需要添加MOUSE_DOWN，MOUSE_MOVE，MOUSE_UP事件，然后庫件會自動判斷是加載TOUCH事件還是MOUSE事件

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

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

有了控制事件，現(xiàn)在的關鍵就在于changeDir方法，只要根據(jù)傳進來的值，來實現(xiàn)移動就可以了

我們試想，如果每次移動一個步長的話，那么人物就會由一個小方格跳到令一個方格，而我們需要的是，讓它緩慢的移動到下一個方格，有一個移動的過程

為了實現(xiàn)這個過程，我們在移動的時候不是讓人物的坐標馬上就改變，而是改變?nèi)宋锏臓顟B(tài)，由靜止到移動，然后處于移動狀態(tài)的時候，再讓人物一小步一小步的移動到目標點

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

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

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

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

這里要簡單說明一下LAnimation類的setAction方法，setAction(rowindex,colindex)方法有兩個參數(shù)，LAnimation里傳進來的圖片數(shù)組是一個二維數(shù)組,這兩個參數(shù)分別可以改變目前顯示的圖片的動作，當然，也可以只傳其中一個參數(shù)

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

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

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

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

#p#

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

這就需要我們在移動過程中，加入移動判斷，看看是否可以移動，

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

所以，我們需要一個地圖的地形，如下

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

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

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

然后，在changeDir方法，和onmove方法中，添加相應的判斷，如下

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

好了，大功告成，開始運行吧

測試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


新聞標題：HTML5開發(fā)RPG游戲之二（跑起來吧英雄）
標題URL：http://m.5511xx.com/article/cceihio.html