思洋互动网站建设学前班

四，利用游戏脚本实现地图的切换

为了让大家看到游戏脚本的便利性，现在利用脚本实现游戏中的场景切换。

将json脚本修改如下
广州网站建设,网站建设,广州网页设计,广州网站设计

1. var script = {  
2.     stage01:{  
3.         map:[  
4.             [18,18,18,18,18,18,18,18,18,18,18,18,55,55,18,18,18],  
5.             [18,18,18,17,17,17,17,17,17,17,17,17,55,55,17,17,18],  
6.             [18,18,17,17,17,17,18,18,17,17,17,17,55,55,17,17,18],  
7.             [18,17,17,17,18,18,18,18,18,17,17,55,55,17,17,17,18],  
8.             [18,17,17,18,22,23,23,23,24,18,17,55,55,17,17,17,18],  
9.             [18,17,17,18,25,28,26,79,27,18,55,55,17,17,17,17,18],  
10.             [18,17,17,17,17,10,11,12,18,18,55,55,17,17,17,17,18],  
11.             [18,18,17,17,10,16,16,16,11,55,55,17,17,17,17,17,18],  
12.             [18,18,17,17,77,16,16,16,16,21,21,17,17,17,17,17,18],  
13.             [18,18,17,17,77,16,16,16,16,55,55,17,17,17,17,17,18],  
14.             [18,18,18,18,18,18,18,18,18,55,55,18,18,18,18,18,18]],  
15.         mapdata:[  
16.             [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],  
17.             [1,1,1,0,0,0,0,0,0,0,0,0,1,1,0,0,1],  
18.             [1,1,0,0,0,0,1,1,0,0,0,0,1,1,0,0,1],  
19.             [1,0,0,0,1,1,1,1,1,0,0,1,1,0,0,0,1],  
20.             [1,0,0,1,1,1,1,1,1,1,0,1,1,0,0,0,1],  
21.             [1,0,0,1,1,1,0,1,1,1,1,1,0,0,0,0,1],  
22.             [1,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,1],  
23.             [1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,1],  
24.             [1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],  
25.             [1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,1],  
26.             [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]],  
27.         add:[  
28.              {chara:"player",img:"mingren",x:5,y:6},  
29.              {chara:"npc",img:"npc1",x:7,y:6},  
30.              {chara:"npc",img:"npc1",x:3,y:3}],  
31.         talk:{  
32.             talk1:[  
33.                       {img:"m",name:"鸣人",msg:"我是木叶村的鸣人，你是谁？"},  
34.                       {img:"n",name:"黑衣忍者甲",msg:"你就是鸣人？九尾还在你身体里吗？"}  
35.                   ],  
36.             talk2:[  
37.                       {img:"n",name:"黑衣忍者乙",msg:"鸣人，听说忍者大战就要开始了。"},  
38.                       {img:"m",name:"鸣人",msg:"真的吗？一定要想想办法啊。"}  
39.                   ]  
40.         },  
41.         jump:[  
42.               {at:{x:6,y:5},to:"stage02"}  
43.         ]  
44.     },  
45.     stage02:{  
46.         map:[  
47.             [0,0,1,2,2,2,2,2,2,2,2,1,0,0,0],  
48.             [0,0,1,3,5,5,1,5,5,5,5,1,0,0,0],  
49.             [0,0,1,80,4,4,1,80,4,4,4,1,0,0,0],  
50.             [0,0,1,80,4,4,1,80,8,7,8,1,0,0,0],  
51.             [0,0,1,80,4,4,5,81,4,4,4,1,0,0,0],  
52.             [0,0,1,2,2,2,6,4,4,4,4,1,0,0,0],  
53.             [0,0,1,3,5,5,81,4,4,4,4,1,0,0,0],  
54.             [0,0,1,80,4,4,4,4,4,4,9,1,0,0,0],  
55.             [0,0,1,2,2,2,2,6,2,2,2,1,0,0,0]],  
56.         mapdata:[  
57.             [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],  
58.             [1,1,1,0,0,0,1,0,0,0,0,1,1,1,1],  
59.             [1,1,1,0,0,0,1,0,0,0,0,1,1,1,1],  
60.             [1,1,1,0,0,0,1,0,0,1,0,1,1,1,1],  
61.             [1,1,1,0,0,0,0,0,0,0,0,1,1,1,1],  
62.             [1,1,1,1,1,1,0,0,0,0,0,1,1,1,1],  
63.             [1,1,1,0,0,0,0,0,0,0,0,1,1,1,1],  
64.             [1,1,1,0,0,0,0,0,0,0,1,1,1,1,1],  
65.             [1,1,1,1,1,1,1,0,1,1,1,1,1,1,1]],  
66.         add:[  
67.              {chara:"player",img:"mingren",x:7,y:8},  
68.              {chara:"npc",img:"npc1",x:8,y:3},  
69.              {chara:"npc",img:"npc1",x:10,y:3}],  
70.         talk:{  
71.               talk1:[  
72.                         {img:"m",name:"鸣人",msg:"你们在干什么啊？"},  
73.                         {img:"n",name:"黑衣忍者甲",msg:"我们在喝茶。"}  
74.                   ],  
75.               talk2:[  
76.                         {img:"n",name:"黑衣忍者乙",msg:"我们在喝茶，你不要打扰我们。"},  
77.                         {img:"m",name:"鸣人",msg:"....."}  
78.                   ]  
79.         },  
80.         jump:[  
81.               {at:{x:7,y:8},to:"stage01"}  
82.         ]  
83.     }  
84.  
85.  
86. }; 

可以看到，我添加了stage02，即第二个场景，并且在脚本里引入了jump节点来控制游戏场景的切换，其中jump中的at表示游戏主人公移动到达的坐标，to表示到达这个坐标后跳转到的画面名称。这里的jump之所以是数组，是因为一个场景也可以跳转到其他多个场景。

上面的脚本实现了stage01和stage02两个场景的互相跳转。

为了读取这个jump，以及实现跳转，我们需要在游戏主人公移动一个步长之后，判断一下是否应该跳转了，修改Character类的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.             if(mapmove){  
14.                 mapLayer.y += ml;  
15.                 charaLayer.y += ml;  
16.             }  
17.             self.y -= ml;  
18.             break;  
19.         case LEFT:  
20.             if(mapmove){  
21.                 mapLayer.x += ml;  
22.                 charaLayer.x += ml;  
23.             }  
24.             self.x -= ml;  
25.             break;  
26.         case RIGHT:  
27.             if(mapmove){  
28.                 mapLayer.x -= ml;  
29.                 charaLayer.x -= ml;  
30.             }  
31.             self.x += ml;  
32.             break;  
33.         case DOWN:  
34.             if(mapmove){  
35.                 mapLayer.y -= ml;  
36.                 charaLayer.y -= ml;  
37.             }  
38.             self.y += ml;  
39.             break;  
40.     }  
41.     self.moveIndex++;  
42.     //当移动次数等于设定的次数，开始判断是否继续移动  
43.     if(self.moveIndex >= ml_cnt){  
44.         //一个地图步长移动完成后，判断地图是否跳转  
45.         if(self.isHero && self.moveIndex > 0)checkJump();  
46.         self.moveIndex = 0;  
47.         //一个地图步长移动完成后，如果地图处于滚动状态，则移除多余地图块  
48.         if(mapmove)delMap();  
49.         //如果已经松开移动键，或者前方为障碍物，则停止移动，否则继续移动  
50.         if(!isKeyDown || !self.checkRoad()){  
51.             self.move = false;  
52.             return;  
53.         }else if(self.direction != self.direction_next){  
54.             self.direction = self.direction_next;  
55.             self.anime.setAction(self.direction);  
56.         }  
57.         //地图是否滚动  
58.         self.checkMap(self.direction);  
59.     }  
60. }; 

我添加了一行

1. if(self.isHero && self.moveIndex > 0)checkJump(); 

表示，移动完后如果该人物是游戏主人公则进行跳转判断

所以，我们需要添加一个checkJump方法

1. //游戏场景跳转测试  
2. function checkJump(){  
3.     var jump = stage.jump;  
4.     var jumpstage;  
5.     for(var i=0;i<jump.length;i++){  
6.         jumpjumpstage = jump[0];  
7.         if(player.x == jumpstage.at.x * 32 && player.y == jumpstage.at.y * 32){  
8.             //获取该场景脚本数据  
9.             stage = script[jumpstage.to];  
10.             //开始跳转  
11.             initScript(stage);  
12.             return;  
13.         }  
14.     }  
15. } 

好了，一切都很简单吧，运行游戏看看效果吧,小鸣人走到地图的小房门的部分是，场景发生跳转
广州网站建设,网站建设,广州网页设计,广州网站设计

游戏测试URL：http://fsanguo.comoj.com/html5/rpg5/index.html

本次更新源代码下载：http://fsanguo.comoj.com/html5/rpg5/rpg5.rar

原文链接：http://www.cnblogs.com/html5cn/articles/2337054.html