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

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

    • 前言
    • 1.游戏规则
    • 2.开发思路
      • 1.地图设计
      • 2.子弹发射事件
      • 3.水滴状态
      • 4.水滴溅射
      • 5.获胜条件
    • 3.源码
      • 3.1 Template 部分
      • 3.2 Script 部分
      • 3.3 Style 部分

前言

闲来无事,想起以前经常玩的一个小游戏《十滴水》,简单开发游戏逻辑,时间原因没编写动画和不同难度。
基于 Vue 开发,效果如下。
记录一次用 Vue 简单完成小游戏:十滴水 (无动画)_第1张图片

1.游戏规则

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

2.开发思路

1.地图设计

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

2.子弹发射事件

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

3.水滴状态

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

4.水滴溅射

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

5.获胜条件

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

3.源码

3.1 Template 部分


3.2 Script 部分


3.3 Style 部分


你可能感兴趣的:(游戏,vue,javascript,html5)