开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情
游戏背景
你是一个军舰指挥官，你的领海中潜入了敌国潜艇，你需要在躲避敌方导弹的同时，利用水雷消灭对方。
其实游戏是根据小学上电脑课时候，玩的一款单机游戏模仿的， 键盘左右控制小船移动，空格键控制小船丢水雷。正好最近在了解可视化相关的知识，就做了这个demo。
预览效果
本来里面的船、潜艇，导弹之类的都是用canvas画的，奈何本人审美不行，画出来的太丑。就直接上网上找了图片。正常图片应该是透明背景的，上传的码上掘金后，背景都没了，也可以在这里查看效果。
开发中要注意的点
-
移动
本来我是每个元素单独有一个move函数，调用时擦除上一次位置，重新在下一个位置draw。这样我发现，不仅每个元素都要单独设置一个定时器，而且擦除时候会擦除多余的元素。最终，我设置一个绘画队列，每隔60ms清空一次画布，并且执行绘画队列里的函数，这样，只需每次改变位置后，自动就会产生移动效果。
-
碰撞检测
在项目中，要检测船和导弹的碰撞、导弹和海平面的碰撞，水雷和潜艇的碰撞，水雷合海底的碰撞，潜艇超出视野时的碰撞。同时在碰撞后，不仅要清除对应实例在绘画队列里的函数，如果是潜艇的话，还要销毁潜艇实例。为了方便存取，队列使用了Map对象，这样可以使用this作为key值，draw函数作为value值。
不足
最遗憾的是没有把爆炸效果做出来，还有一个就是我感觉元素移动的时候总是有闪烁的感觉，调整了刷新频率和使用了双缓存还是没有用，不知道是不是我的错觉。希望有看到这篇文章的jy们，能够在评论区指点一下。
总的来说，项目里涉及到的canvas知识并不是很多，如果我最后没使用图片的话，还会有一些线条，曲线的使用方法，后面还会继续学习可视化方面的知识，欢迎交流讨论。
