0 Comments

HTML 5开发RPG游戏之三(卷轴和对话)(1)

发布于:2013-11-15  |   作者:广州网站建设  |   已聚集:人围观

前两篇,RPG的开发已经实现了添加地图和添加游戏人物,本篇来实现地图的卷轴滚动和人物对话的实现,效果如下

本次开发,更新了一下库件至1.3,请点击下面的链接,下载库件1.3版以上版本

http://code.google.com/p/legendforhtml5programming/downloads/list
广州网站建设,网站建设,广州网页设计,广州网站设计

地图的滚动

关于地图的滚动原理,可以参照下图

按照上图说明,实现地图滚动,只需要先把即将出现的地图(图中黄色部分)画上,然后滚动地图,待地图滚动完毕之后,将屏幕之外的部分(图中绿色部分)移除

首先要添加一个变量来控制地图是否滚动


  1. //地图滚动  
  2. var mapmove = false

然后,在人物移动的时候,判断地图是否需要滚动
广州网站建设,网站建设,广州网页设计,广州网站设计


  1. /**  
  2.  * 地图是否滚动  
  3.  **/ 
  4. Character.prototype.checkMap = function (dir){  
  5.     var self = this;  
  6.     mapmove = false;  
  7.     //如果不是英雄,则地图不需要滚动  
  8.     if(!self.isHero)return;  
  9.       
  10.     switch (dir){  
  11.         case UP:  
  12.             if(self.y + charaLayer.y> STEP)break;  
  13.             if(mapLayer.y >= 0)break;  
  14.             addMap(0,-1);  
  15.             mapmove = true;  
  16.             break;  
  17.         case LEFT:  
  18.             if(self.x + charaLayer.x > STEP)break;  
  19.             if(mapLayer.x >= 0)break;  
  20.             addMap(-1,0);  
  21.             mapmove = true;  
  22.             break;  
  23.         case RIGHT:  
  24.             if(self.x < 480 - 2*STEP)break;  
  25.             if(480 - mapLayer.x >= map[0].length*STEP)break;  
  26.             addMap(1,0);  
  27.             mapmove = true;  
  28.             break;  
  29.         case DOWN:  
  30.             if(self.y < 288 - 2*STEP)break;  
  31.             if(288 - mapLayer.y >= map.length*STEP)break;  
  32.             addMap(0,1);  
  33.             mapmove = true;  
  34.             break;  
  35.     }  
  36. }; 

在移动过程中,判断地图是否处于滚动状态,如果地图处于滚动,则滚动地图,否则移动人物


  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(mapmove)delMap();  
  46.         self.moveIndex = 0;  
  47.         //如果已经松开移动键,或者前方为障碍物,则停止移动,否则继续移动  
  48.         if(!isKeyDown || !self.checkRoad()){  
  49.             self.move = false;  
  50.             return;  
  51.         }else if(self.direction != self.direction_next){  
  52.             self.direction = self.direction_next;  
  53.             self.anime.setAction(self.direction);  
  54.         }  
  55.         //地图是否滚动  
  56.         self.checkMap(self.direction);  
  57.     }  
  58. }; 

最后,将地图的数组和地形扩大为大于屏幕大小


  1. //地图图片数组  
  2. var map = [  
  3. [18,18,18,18,18,18,18,18,18,18,18,18,55,55,18,18,18],  
  4. [18,18,18,17,17,17,17,17,17,17,17,17,55,55,17,17,18],  
  5. [18,18,17,17,17,17,18,18,17,17,17,17,55,55,17,17,18],  
  6. [18,17,17,17,18,18,18,18,18,17,17,55,55,17,17,17,18],  
  7. [18,17,17,18,22,23,23,23,24,18,17,55,55,17,17,17,18],  
  8. [18,17,17,18,25,28,26,79,27,18,55,55,17,17,17,17,18],  
  9. [18,17,17,17,17,10,11,12,18,18,55,55,17,17,17,17,18],  
  10. [18,18,17,17,10,16,16,16,11,55,55,17,17,17,17,17,18],  
  11. [18,18,17,17,77,16,16,16,16,21,21,17,17,17,17,17,18],  
  12. [18,18,17,17,77,16,16,16,16,55,55,17,17,17,17,17,18],  
  13. [18,18,18,18,18,18,18,18,18,55,55,18,18,18,18,18,18]  
  14. ];  
  15. //地图地形数组  
  16. var mapdata = [  
  17. [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],  
  18. [1,1,1,0,0,0,0,0,0,0,0,0,1,1,0,0,1],  
  19. [1,1,0,0,0,0,1,1,0,0,0,0,1,1,0,0,1],  
  20. [1,0,0,0,1,1,1,1,1,0,0,1,1,0,0,0,1],  
  21. [1,0,0,1,1,1,1,1,1,1,0,1,1,0,0,0,1],  
  22. [1,0,0,1,1,1,0,1,1,1,1,1,0,0,0,0,1],  
  23. [1,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,1],  
  24. [1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,1],  
  25. [1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],  
  26. [1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,1],  
  27. [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]  
  28. ]; 

为了实现地图滚动,修改添加地图的方法,根据参数来实现添加上面图片的黄色地图部分


  1. //添加地图  
  2. function addMap(cx,cy){  
  3.     var i,j,index,indexX,indexY;  
  4.     var bitmapdata,bitmap;  
  5.     var mapX = mapLayer.x / STEP;  
  6.     var mapY = mapLayer.y / STEP;  
  7.     var mx = cx<0?-1:0,my = cy<0?-1:0;  
  8.     if(imageArray == null){  
  9.         //地图图片数据  
  10.         bitmapdata = new LBitmapData(imglist["map"]);  
  11.         //将地图图片拆分,得到拆分后的各个小图片的坐标数组  
  12.         imageArray = LGlobal.divideCoordinate(bitmapdata.image.width,bitmapdata.image.height,10,10);  
  13.     }  
  14.     mapLayer.removeAllChild();  
  15.     //在地图层上,画出15*10的小图片  
  16.     for(i=my;i<9 +Math.abs(cy) && i-mapY < map.length;i++){  
  17.         for(j=mx;j<15 +Math.abs(cx)&& j-mapX < map[0].length;j++){  
  18.             //从地图数组中得到相应位置的图片坐标  
  19.             index = map[i-mapY][j-mapX];  
  20.             //小图片的竖坐标  
  21.             indexY = Math.floor(index /10);  
  22.             //小图片的横坐标  
  23.             indexX = index - indexY*10;  
  24.             //得到小图片  
  25.             bitmapdata = new LBitmapData(imglist["map"],indexX*32,indexY*32,32,32);  
  26.             bitmap = new LBitmap(bitmapdata);  
  27.             //设置小图片的显示位置  
  28.             bitmap.x = j*STEP - mapLayer.x;  
  29.             bitmap.y = i*STEP - mapLayer.y;  
  30.             //将小图片显示到地图层  
  31.             mapLayer.addChild(bitmap);  
  32.         }  
  33.     }  
  34. }  
  35. //移除多余地图块  
  36. function delMap(){  
  37.     var bitmap,i;  
  38.     for(i=0;i<mapLayer.childList.length;i++){  
  39.         bitmap = mapLayer.childList[i];  
  40.         if(bitmap.x + mapLayer.x < 0 || bitmap.x + mapLayer.x >= 480 ||   
  41.                 bitmap.y + mapLayer.y < 0 || bitmap.y + mapLayer.y >= 288){  
  42.             mapLayer.removeChild(bitmap);  
  43.             i--;  
  44.         }  
  45.     }  

看一下效果如下

 

 

标签:
飞机