思洋互动网站建设学前班

但是，光这样还是不行，我们发现，人物是可以移动了，但是他现在是超人，飞檐走壁无所不入，移动的畅通无阻

这就需要我们在移动过程中，加入移动判断，看看是否可以移动，

为了实现这个判断，我们必须要知道地图什么地方可以移动，什么地方不可以移动
广州网站建设,网站建设,广州网页设计,广州网站设计

所以，我们需要一个地图的地形，如下

1. //地图地形数组  
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. ]; 

地形数组中，0代表可以移动，1代表障碍物，是不可移动的，接下来，给Character类添加判断方法

1. /**  
2.  * 障碍物判断  
3.  * @param 判断方向   
4.  **/ 
5. Character.prototype.checkRoad = function (dir){  
6.     var self = this;  
7.     var tox,toy,myCoordinate;  
8.     //当判断方向为空的时候，默认当前方向  
9.     if(dir==null)dir=self.direction;  
10.     //获取人物坐标  
11.     myCoordinate = self.getCoordinate();  
12.     //开始计算移动目的地的坐标  
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.     //如果移动的范围超过地图的范围，则不可移动  
32.     if(tox <= 0 || toy <= 0)return false;  
33.     if(toy >= mapdata.length || tox >= mapdata[0].length)return false;  
34.     //如果目的地为障碍，则不可移动  
35.     if(mapdata[toy][tox] == 1)return false;  
36.     return true;  
37. }; 

然后，在changeDir方法，和onmove方法中，添加相应的判断，如下
广州网站建设,网站建设,广州网页设计,广州网站设计

1. /**  
2.  * 开始移动   
3.  **/ 
4. Character.prototype.onmove = function (){  
5.     var self = this;  
6.     //设定一个移动步长中的移动次数  
7.     var ml_cnt = 4;  
8.     //计算一次移动的长度  
9.     var ml = STEP/ml_cnt;  
10.     //根据移动方向，开始移动  
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.     //当移动次数等于设定的次数，开始判断是否继续移动  
27.     if(self.moveIndex >= ml_cnt){  
28.         self.moveIndex = 0;  
29.         //如果已经松开移动键，或者前方为障碍物，则停止移动，否则继续移动  
30.         if(!isKeyDown || !self.checkRoad()){  
31.             self.move = false;  
32.             return;  
33.         }  
34.     }  
35. };  
36. /**
37.  * 改变人物方向，并判断是否可移动  
38.  **/ 
39. Character.prototype.changeDir = function (dir){  
40.     var self = this;  
41.     //如果正在移动，则无效  
42.     if(!self.move){  
43.         //设定人物方向  
44.         self.direction = dir;  
45.         //设定图片动画  
46.         self.anime.setAction(dir);  
47.         //判断是否可移动  
48.         if(!self.checkRoad(dir))return;  
49.         //如果可以移动，则开始移动  
50.         self.move = true;  
51.         self.moveIndex = 0;  
52.     }  
53. }; 

好了，大功告成，开始运行吧

测试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