记录一次用 Vue 简单完成小游戏:十滴水 (无动画)

前言

闲来无事，想起以前经常玩的一个小游戏《十滴水》，简单开发游戏逻辑，时间原因没编写动画和不同难度。
基于 Vue 开发,效果如下。

1.游戏规则

鼠标点击消耗子弹增大水滴，水滴饱和后再加水就会破裂，破裂后会向四方溅射水滴，引起一系列爆炸。
在这里用方块代替水滴，方块内部填满后意味着水滴饱和。
每次水滴爆炸时获得分数，所有水滴破裂即为获胜，进入下一关，奖励若干子弹。
用完子弹未进入下一关，则游戏结束。

2.开发思路

1.地图设计

随机散布水滴在一个矩阵上，每个元素即为水滴 水滴都有自身属性，如 x:行,y:列,level:当前层级。

2.子弹发射事件

每当点击元素时，则消耗一个子弹，并为元素层级累计 1,当层级大于 0 时，则表明该坐标存在一个水滴。

3.水滴状态

当元素的层级达到设定的最大层级，则代表水滴发生爆炸,自身消失(层级归 0)，并向四周（上下左右）发射水滴。

4.水滴溅射

水滴溅射时会朝自身周围四个方向发射水滴，如果发射中的水滴经过的元素层级为 0，则表明该元素没水滴，继续朝该方向飞行，直到找到有层级(有水滴)的元素，为之层级+1，如超出边界，则不作处理,并重复上诉条件判断。

5.获胜条件

当所有水滴不存在时(矩阵中所有元素的层级为 0 时)，则获胜，进入下一关卡。

3.源码

3.1 Template 部分

<template>
  <div class="st">
    hasBlock:{
  { hasBlock }} bullets:{
  { bullets }} scores:{
  { scores }} level:{
  {
      gLevel
    }