当前位置：Gxlcms > html代码 > html5游戏开发-零基础开发RPG游戏-开源讲座(三)-卷轴&对话实现......

html5游戏开发-零基础开发RPG游戏-开源讲座(三)-卷轴&对话实现......

时间：2021-07-01 10:21:17 帮助过：26人阅读

了解上两篇的内容请点击：

html5游戏开发-零基础开发RPG游戏-开源讲座(一)

http://www.html5cn.org/article-1737-1.html

html5游戏开发-零基础开发RPG游戏-开源讲座(二)-跑起来吧英雄

http://www.html5cn.org/article-1738-1.html

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

1111.gif



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

http://code.google.com/p/legendforhtml5programming/downloads/list

地图的滚动

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

1212.gif



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

首先要添加一个变量来控制地图是否滚动
  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;

  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
  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. }
  46. }

看一下效果如下

1441.gif



人物的对话

对话的实现，在点击控制按钮的方形按钮时添加，所以，先在鼠标抬起的时候，判断是否点击了方形按钮
  1. function onup(event){
  2. isKeyDown = false;
  3. if(event.offsetX >= ctrlLayer.x + 280 && event.offsetX <= ctrlLayer.x+330){
  4. if(event.offsetY >= ctrlLayer.y+40 && event.offsetY <= ctrlLayer.y+100){
  5. //对话
  6. addTalk();
  7. }
  8. }
  9. }

在完善addTalk()方法的时候，首先准备好对话的内容
  1. var talkScriptList = {
  2. "talk1":new Array(
  3. {img:"m",name:"鸣人",msg:"我是木叶村的鸣人，你是谁？"},
  4. {img:"n",name:"黑衣忍者甲",msg:"你就是鸣人？九尾还在你身体里吗？"}
  5. ),
  6. "talk2":new Array(
  7. {img:"n",name:"黑衣忍者乙",msg:"鸣人，听说忍者大战就要开始了。"},
  8. {img:"m",name:"鸣人",msg:"真的吗？一定要想想办法啊。"}
  9. )
  10. };

talk1，talk2中talk后面的数字，代表人物的编号，其中每个对话单位的img为人物的头像，name为人物的名称,msg为对话的内容

添加对话时的做法是，当点击方形按钮后，判断小鸣人前方是否有人，如果有人，则将这个人物的编号取出来，再从上面的数组中获取相应的对话内容，然后，将相应的内容显示到游戏屏幕上，具体实现代码如下
  1. //对话内容
  2. var talkScript;
  3. var talkScriptList = {
  4. "talk1":new Array(
  5. {img:"m",name:"鸣人",msg:"我是木叶村的鸣人，你是谁？"},
  6. {img:"n",name:"黑衣忍者甲",msg:"你就是鸣人？九尾还在你身体里吗？"}
  7. ),
  8. "talk2":new Array(
  9. {img:"n",name:"黑衣忍者乙",msg:"鸣人，听说忍者大战就要开始了。"},
  10. {img:"m",name:"鸣人",msg:"真的吗？一定要想想办法啊。"}
  11. )
  12. };
  13. //对话序号
  14. var talkIndex = 0;
  15. //对话中
  16. var talking = false;

  18. /**
  19. * 添加对话
  20. * */
  21. function addTalk(){
  22. //如果对话内容为空，则开始判断是否可以对话
  23. if(talkScript == null){
  24. var key,tx = player.x,ty = player.y;
  25. switch (player.direction){
  26. case UP:
  27. ty -= STEP;
  28. break;
  29. case LEFT:
  30. tx -= STEP;
  31. break;
  32. case RIGHT:
  33. tx += STEP;
  34. break;
  35. case DOWN:
  36. ty += STEP;
  37. break;
  38. }
  39. for(key in charaLayer.childList){
  40. //判断前面又没有npc，有则开始对话
  41. if(charaLayer.childList[key].x == tx && charaLayer.childList[key].y == ty){
  42. if(talkScriptList["talk"+charaLayer.childList[key].index]){
  43. talkScript = talkScriptList["talk"+charaLayer.childList[key].index];
  44. talkIndex = 0;
  45. }
  46. }
  47. }
  48. //如果前方没有npc，则返回
  49. if(talkScript == null)return;
  50. }
  51. //将对话层清空
  52. talkLayer.removeAllChild();
  53. //当对话开始，且按照顺序进行对话
  54. if(talkIndex < talkScript.length){
  55. //得到对话内容
  56. var talkObject = talkScript[talkIndex];
  57. //对话背景
  58. bitmapdata = new LBitmapData(imglist["talk"]);
  59. bitmap = new LBitmap(bitmapdata);
  60. bitmap.width = 330;
  61. bitmap.height = 70;
  62. bitmap.x = 100;
  63. bitmap.y = 20;
  64. bitmap.alpha = 0.7;
  65. talkLayer.addChild(bitmap);
  66. //对话头像
  67. bitmapdata = new LBitmapData(imglist[talkObject.img]);
  68. bitmap = new LBitmap(bitmapdata);
  69. bitmap.x = 0;
  70. bitmap.y = 0;
  71. talkLayer.addChild(bitmap);
  72. //对话人物名称
  73. var name = new LTextField();
  74. name.x = 110;
  75. name.y = 30;
  76. name.size = "14";
  77. name.color = "#FFFFFF";
  78. name.text = "[" + talkObject.name + "]";
  79. talkLayer.addChild(name);
  80. //对话内容
  81. var msg = new LTextField();
  82. msg.x = 110;
  83. msg.y = 55;
  84. msg.color = "#FFFFFF";
  85. msg.text = talkObject.msg;
  86. talkLayer.addChild(msg);
  87. //对话内容逐字显示
  88. msg.wind();
  89. talkLayer.x = 20;
  90. talkLayer.y = 50;
  91. talkIndex++;
  92. }else{
  93. //对话结束
  94. talkScript = null;
  95. }
  96. }

效果看下图

1515.gif




游戏演示地址

http://fsanguo.comoj.com/html5/rpg3/index.html

之前其他地方也稍微做了修改，具体修改请看源代码，此次更新源代码，下载地址如下

http://legend-demo.googlecode.com/files/rpg3.zip



本文转自个人博客：http://blog.csdn.net/lufy_legend

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！