原生Js实现十滴水小游戏

介绍：

常见的十滴水小游戏，使用原生JS的模块化，模块化就是面向对象的思想，写这个练习需要有一点面向对象的基础，本人也是第一次接触Js的模块化，可能有些地方说的不对。原生JS模块化需要在Web服务器的环境下实现，例如Nodejs，本人使用Webstorm，直接debug即可。其中模块化加载需要在script标签上加入type="module"属性：

<script src="index.js"  type="module"></script>

模块导出导入：

export default {//模块需要导出的内容
}
//导入需要的模块，如Game类：
import Game from './Game.js';

思路：

• 首先，需要一个游戏类，来作为游戏的容器，控制游戏的开始和结束，提供计分功能（水滴数），执行游戏规则（水滴的碰撞，水滴超出棋盘后的销毁等）。
• 其次需要一个水球类，用来生成棋盘上的水球图形，还需要有鼠标点击后水球变大，变大后炸裂的功能。
• 当水球达到最大值后再次点击，会爆裂成四个水滴子弹散开，因此还需要有一个子弹类，它需要有移动和碰撞检测的功能。

具体实现：

html和css部分较简单，主要介绍Js部分。

• Game类：
  • wrap：游戏容器；
  • water：剩余水滴数；
  • num和value：用于显示剩余水滴数量和水滴减少时左边图形变化；
  • waterPolos：水球集合，后续碰撞检测时需要用到；
  • bullets：子弹集合，用于检测子弹是否全部销毁，游戏是否结束；
  • start()：
    • 设置游戏的容器（棋盘）；
    • 左上角剩余水滴数，水滴显示；
    • 循环棋盘格数，调用水球类生成水球图形，生成随机大小水球等；
  • bulletMove()：
    • 子弹与空格碰撞，与水滴碰撞，出边界后对应情况；
    • 当子弹都被销毁后，判断棋盘上是否剩余水球，是否还有剩余水滴来判断游戏是否结束；
• WaterPolo类：
  • level：水球的状态层级；
  • div、img、left、top：水球的位置信息，图片；
  • width、height：用于后续的碰撞检测；
  • onclik：定义一个点击属性，更新左侧水滴状态，水球状态；
  • onboom：水球爆炸，实例化四个子弹，调用子弹移动等；
  • draw()：绘制水球，获取当前水球位置；
  • levelUp()：水球升级
• bullet类：
  • div、left、top、dir：子弹位置，方向；
  • width、height：子弹大小，用于碰撞检测；
  • timer：定时器，控制子弹移动速度；
  • onmove：Game类bulletMove即为此功能封装出来的函数；
  • draw()：绘制子弹；
  • setPosition()：设定子弹位置，给水球爆炸时调用；
  • move()：子弹四散移动；
  • collision()：碰撞检测：
  • destory()：子弹销毁；

源码地址：原生JS实现十滴水小游戏练习

参考：妙味课堂