游戏的目标是在障碍物或瓷砖上射出球，并在瓷砖到达设备底端之前销毁这些瓷砖。 您可能会获得各种助力，在与水平或垂直方向的助力碰撞时，会导致球改变方向或发射激光。 在整个游戏中的每个关卡中，您都将获得加电功能，该功能会在碰撞时增加您的球数，并且每个障碍物都会有一个碰撞数。 如果将碰撞计数减少到0，则障碍物将被销毁。我在游戏中创建了不同的菜单，可以帮助用户控制游戏（例如暂停，重新启动，主菜单），并且还创建了与障碍物游戏类似的不同动画销毁烟花，下一级滑块动画，流畅的球运动。
我如何在BBTAN中使用HTML5 Canvas
- 仅iPad，gamedev-＃11-足以竞争吗？
- 进入新的游戏领域— Android游戏开发
- Node.js多人游戏的体系结构
- 如何选择启动日期：时间
- 规模炸弹-如何测试您的工具包是否不会在项目中期将您逼死，与您离婚并偷走孩子。
我使用HTML 元素通过javascript动态绘制图形。 画布有几种绘制路径，框，圆，文本和添加图像的方法。 通过canvas的draw（）方法，我在游戏中获得了60 fps的速度以增加平滑度。
1.创建平铺地图
首先，瓷砖地图是2D游戏开发中非常流行的技术。 它从称为瓦片的小型规则形状图像构建级别地图。 但就我而言，这是完全不同的，因为我不需要图像来创建世界地图，而是需要正方形作为对象和通电。 重要的方面是面向对象的图块映射方法。 我创建了两个不同的类，一个用于正方形瓦片，另一个用于通电，因此可以使用该类创建其对象的多个实例，以用瓦片填充我的游戏世界，每个瓦片都有自己的碰撞计数。
2.创建精灵表
对我来说，另一个障碍是创建子画面。 我不得不做很多研究，但找不到任何有用的东西。 然后，我决定继续创建自己的Sprite工作表。 精灵表包含游戏中使用的图像集合。 在HTML5 canvas的帮助下，我在开始时仅加载了一次图像，并且无需进一步加载即可使用它。 因此，提供了更流畅，更流畅的游戏体验。
Sprite工作表还有助于为角色设置动画（例如：我使用了角色的底部两个位置，以使角色看起来像是通过交换图像来扔球的方式），这可以通过画布和一些逻辑编码轻松实现。
3.碰撞检测
这是逻辑变得棘手的地方，因为我的整个游戏都是基于碰撞检测的，因此我不得不为此做很多功课。 基本上，我的BBTAN版本中有两种类型的碰撞，因为我没有包括任何三角形障碍物。 对于两种类型的碰撞，我都使用正方形和圆形的中心来检测它们之间的最近距离，从而检测出球与障碍物/助力盘之间的碰撞。 碰撞检测必须精确，并且在检测到之后，逻辑的第二部分是改变碰撞后球的方向和运动。
4.动画和游戏声音
最后，在完成我所有的游戏逻辑之后，我必须确保游戏具有令人眼前一亮的外观。 我通过添加各种动画来确保这一点，例如（激光，通电，障碍物破坏，任何开始菜单动画）。
同样，游戏声音在使游戏更具吸引力方面起着巨大的作用，因为感觉物体确实真的在相互碰撞，并且激光正在砸破这些物体并将其每一部分破坏成碎片。 我利用了画布提供的音频标签来添加游戏音频。 我必须记录音频并将其分解为100到200毫秒，以获得正确的质量和准确的音频时序。
重要要点
我从该项目中获得的主要收获是获得了开发人员的新经验。
另外，我还要感谢我的朋友和导师，他们帮助我完成了如此出色的游戏。
如果您想在此处查看源代码。
最后，请尝试游戏。
