基于RPGMakerMV的JavaScript基础-6

喜欢ヅ旅行 2022-06-08 03:26 324阅读 0赞

第六章        动态操作事件

第一节        扫雷游戏

扫雷游戏是一种比较简单而有趣的游戏，实现起来也简单。  
据说有纯事件的实现，然而我们这次再装一个小逼，要实现通过脚本动态的对事件进行操作。  
首先是我们的思路：  
由js脚本完成逻辑层，即整个扫雷的实现完全由js脚本实现，而地图上的事件仅仅用来做显示和交互（点击）用。  
并且，对于地图上的事件变化的控制，也应当由脚本来决定，包括动态生成事件（即根据设定来动态决定格子的数量和雷的数量）。  
先准备一张图再说，我们要用行走图的不同方向来表示不同的数字？或者小旗子，然后通过控制事件的方向来改变显示的数字，如图6-1所示。

![104236ui04il03z0x2ffkk.png][]    
图6-1

研究Game\_Event可知，其显示的图片由\_direction和\_originalPattern两个属性决定，关系如下表：

<table style="word-wrap:break-word; empty-cells:show; border-collapse:collapse; border:1px solid rgb(227,237,245); table-layout:auto; width:476px; color:rgb(68,68,68); font-family:Tahoma,&quot;Microsoft Yahei&quot;,Simsun; font-size:14px"> 
 <tbody style="word-wrap:break-word"> 
  <tr style="word-wrap:break-word"> 
   <td style="word-wrap:break-word; font-size:14px; padding:4px; border:1px solid rgb(227,237,245); overflow:hidden"> →_originalPattern<br style="word-wrap:break-word"> ↓_direction</td> 
   <td style="word-wrap:break-word; font-size:14px; padding:4px; border:1px solid rgb(227,237,245); overflow:hidden"> 0</td> 
   <td style="word-wrap:break-word; font-size:14px; padding:4px; border:1px solid rgb(227,237,245); overflow:hidden"> 1</td> 
   <td style="word-wrap:break-word; font-size:14px; padding:4px; border:1px solid rgb(227,237,245); overflow:hidden"> 2</td> 
  </tr> 
  <tr style="word-wrap:break-word"> 
   <td style="word-wrap:break-word; font-size:14px; padding:4px; border:1px solid rgb(227,237,245); overflow:hidden"> 2</td> 
   <td style="word-wrap:break-word; font-size:14px; padding:4px; border:1px solid rgb(227,237,245); overflow:hidden"> 空地</td> 
   <td style="word-wrap:break-word; font-size:14px; padding:4px; border:1px solid rgb(227,237,245); overflow:hidden"> 旗子</td> 
   <td style="word-wrap:break-word; font-size:14px; padding:4px; border:1px solid rgb(227,237,245); overflow:hidden"> 地雷</td> 
  </tr> 
  <tr style="word-wrap:break-word"> 
   <td style="word-wrap:break-word; font-size:14px; padding:4px; border:1px solid rgb(227,237,245); overflow:hidden"> 4</td> 
   <td style="word-wrap:break-word; font-size:14px; padding:4px; border:1px solid rgb(227,237,245); overflow:hidden"> 0（空地）</td> 
   <td style="word-wrap:break-word; font-size:14px; padding:4px; border:1px solid rgb(227,237,245); overflow:hidden"> 1</td> 
   <td style="word-wrap:break-word; font-size:14px; padding:4px; border:1px solid rgb(227,237,245); overflow:hidden"> 2</td> 
  </tr> 
  <tr style="word-wrap:break-word"> 
   <td style="word-wrap:break-word; font-size:14px; padding:4px; border:1px solid rgb(227,237,245); overflow:hidden"> 6</td> 
   <td style="word-wrap:break-word; font-size:14px; padding:4px; border:1px solid rgb(227,237,245); overflow:hidden"> 3</td> 
   <td style="word-wrap:break-word; font-size:14px; padding:4px; border:1px solid rgb(227,237,245); overflow:hidden"> 4</td> 
   <td style="word-wrap:break-word; font-size:14px; padding:4px; border:1px solid rgb(227,237,245); overflow:hidden"> 5</td> 
  </tr> 
  <tr style="word-wrap:break-word"> 
   <td style="word-wrap:break-word; font-size:14px; padding:4px; border:1px solid rgb(227,237,245); overflow:hidden"> 8</td> 
   <td style="word-wrap:break-word; font-size:14px; padding:4px; border:1px solid rgb(227,237,245); overflow:hidden"> 6</td> 
   <td style="word-wrap:break-word; font-size:14px; padding:4px; border:1px solid rgb(227,237,245); overflow:hidden"> 7</td> 
   <td style="word-wrap:break-word; font-size:14px; padding:4px; border:1px solid rgb(227,237,245); overflow:hidden"> 8</td> 
  </tr> 
 </tbody> 
</table>

第二节        系统设计

首先还是老套路，来个命名空间MineSweeping，接下来我们再多添加一个debug用的标志Debug，方便我们区分调试和正式的内容。

接下来是区域的宽度和高度，以及地雷的数量。还有记录地雷分布的数组MineMap（这个数值将在后面被变成二维数组，后面几个也一样），记录玩家清扫过的地雷的记录（即显示在屏幕上的数据的记录）的数组FoundMap，还有将动态生成的事件引用过来保存起来的数组EventMap。  
记录游戏状态，方便交互的State，还有左上角第一个事件，也是copy的原型事件的位置。  
这些都可以在游戏中用事件里面的脚本控制。如图6-2。

游戏状态的改变我们用Start，Lost，Win三个方法封装起来。如图6-3。

游戏开始后，首先初始化地雷分布，由Math.Random()函数来确定出随机生成的地雷的位置。  
接下来，需要写好点击一下（或者叫扫雷一下，对着空白的格子点一下）的方法，即Click（原谅我起名字捉急）。如果点中了雷，那么直接游戏失败，否则，统计一下周围一圈的雷的数量，然后把这个数字记录到FoundMap里面。  
这里需要注意的是，如果周围都没有雷，那么我们需要把四周都自动点击（Click）一遍，这是一个递归用法。  
然后，是标记（画小旗子，记录一下这里有雷）的方法，即Sign。这个方法比较简单，只需要对于白方块改变状态为被标记状态就好，当然还需要把小旗子标志取消后恢复为白方块。  
之后，是扫过一圈，通常用在这个数字旁边插够了小旗子，然后程序帮助你把这个数字周围都点击一遍，即Sweep。以上这几个方法如同6-4。

![104236tuuuwuuu08khbhu8.png][]    
图6-2  
![104236ig3vuxkvuz2uw3dn.png][]    
图6-3  
![104237mxu97p0u3tu3ys3p.png][]    
图6-4

最后是将扫雷的逻辑操作跟MV的事件绑定在一起，让游戏的图形界面发挥功能。如图6-5，我们用Binding，Recheck和Refresh来完成。  
Binding方法将根据设定好的地图大小（扫雷区域的宽和高）复制那个样板事件，并且移动到对应的位置，这里复制事件用的函数来自汪神的思路（我只是大自然的搬运工，以及感谢汪神）。另外还要将生成的事件引用存到我们的EventMap数组里面，方便我们的使用。  
之后就是对事件的显示的图像进行操作了，这就是Recheck方法的功能，检测i，j位置处的FoundMap的值，即游戏中地块的状态。然后将对应的EventMap中的事件的\_direction和\_originalPattern两个属性做出相应的改变。  
最终就是Refresh方法，要使得事件的图像跟FoundMap的值一一对应起来，关键在于不断的进行同步，即不断的执行Recheck方法，这就是Refresh方法的功能，显然这需要异步方法进行实现，这里为了方便，就将这个方法放到了MV的并行事件中去执行了。如图6-6。

![104237varm0s0onmrlrsr8.png][]    
图6-5  
![104238yw5ww88q1e4neqa0.png][]    
图6-6

这就是整个游戏程序的思路，当然具体实现还要看具体的代码。

第三节        事件调用

插件的代码部分设计好后，我们就要在MV的事件里面调用它了。  
由于模仿单击，右击还有左右键同时按比较困难，我们就用一个MV变量来决定到底用什么击。

![104238dzc8hfujfzz92z2h.png][]    
图6-7

像这样，旁边放三个事件，分别使得MV变量0001的值变为0，1，2，分别用作单击，标记，还有扫一大片。如图6-7

然后是设置好地块事件，在运行时会复制此地块，如图6-8。在此事件中，由确定键触发，即点击鼠标触发，触发后，先获取玩家的位置x，y，然后将其依据操作类型进行处理，并将玩家的位置MV地图的x，y值转化为扫雷数组的x，y，再调用对应的操作的方法。

然后是游戏的初始化，即设置好地图的起始点，地图的宽高，雷的数量，复制地块等操作，如图6-9。

最后是游戏的重新开始，如图6-10。

至此，一个简单的扫雷小游戏就完成了。

![104238j6kogxvad65aod2k.png][]   
图6-8  
  
![104239yajb1dzojnpqnnay.png][]    
图6-9  
  
  
![104239q82vxo8667xa7q2o.png][]    
图6-10

[104236ui04il03z0x2ffkk.png]: http://rm.66rpg.com/data/attachment/forum/201707/19/104236ui04il03z0x2ffkk.png
[104236tuuuwuuu08khbhu8.png]: http://rm.66rpg.com/data/attachment/forum/201707/19/104236tuuuwuuu08khbhu8.png
[104236ig3vuxkvuz2uw3dn.png]: http://rm.66rpg.com/data/attachment/forum/201707/19/104236ig3vuxkvuz2uw3dn.png
[104237mxu97p0u3tu3ys3p.png]: http://rm.66rpg.com/data/attachment/forum/201707/19/104237mxu97p0u3tu3ys3p.png
[104237varm0s0onmrlrsr8.png]: http://rm.66rpg.com/data/attachment/forum/201707/19/104237varm0s0onmrlrsr8.png
[104238yw5ww88q1e4neqa0.png]: http://rm.66rpg.com/data/attachment/forum/201707/19/104238yw5ww88q1e4neqa0.png
[104238dzc8hfujfzz92z2h.png]: http://rm.66rpg.com/data/attachment/forum/201707/19/104238dzc8hfujfzz92z2h.png
[104238j6kogxvad65aod2k.png]: http://rm.66rpg.com/data/attachment/forum/201707/19/104238j6kogxvad65aod2k.png
[104239yajb1dzojnpqnnay.png]: http://rm.66rpg.com/data/attachment/forum/201707/19/104239yajb1dzojnpqnnay.png
[104239q82vxo8667xa7q2o.png]: http://rm.66rpg.com/data/attachment/forum/201707/19/104239q82vxo8667xa7q2o.png