0 Comments

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

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

人物的对话

对话的实现,在点击控制按钮的方形按钮时添加,所以,先在鼠标抬起的时候,判断是否点击了方形按钮


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

在完善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;  
  17.  
  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.     }  

效果看下图

广州网站建设,网站建设,广州网页设计,广州网站设计

游戏演示地址:http://fsanguo.comoj.com/html5/rpg3/index.html

之前其他地方也稍微做了修改,具体修改请看源代码,此次更新源代码,下载地址如下:http://fsanguo.comoj.com/html5/rpg5/rpg5.rar

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

标签:
飞机