今天就来唠唠我自个儿瞎琢磨搞的那个网页塔防游戏。一开始也没想着能做成啥样，就是那阵子玩了几款塔防，什么《植物大战僵尸》，《王国保卫战》啥的，就觉得手痒痒，寻思着用网页技术自个儿也整个简单的玩玩。
一开始选家伙事儿，那肯定是往简单里去。 网页嘛HTML搭个架子，CSS稍微画点皮，核心的动态交互那必须是JavaScript。当时也没想用啥复杂的游戏引擎或者框架，就觉得原生JS干就完了，一来是想看看纯手写能到啥程度，二来也是想把基础再过一遍。画图这块儿，直接就选了HTML5的Canvas，毕竟是专门干这个的，画点小方块小圆圈啥的，灵活。
第一步，总得让画面先出来点东西。 我先在Canvas上画了个简单的地图，就是一条弯弯曲曲的路，敌人就得顺着这条路走。然后是敌人，最开始就一个红色的方块代表，让它能从起点匀速走到终点。这个移动，一开始想着用 `setInterval` 定时挪位置，后来发现用 `requestAnimationFrame` 效果更动画也平滑些，不容易掉帧，学到了学到了。
有了敌人，就得有塔来防守。 塔的实现也挺直接的。我先做了个最基础的炮塔，就是一个能发射子弹的固定方块。玩家可以在地图上特定的位置花钱造塔。然后就是塔怎么攻击敌人。我的想法是，每个塔都有个攻击范围，是个圆形区域。只要有敌人进入这个范围，塔就自动锁定最近的那个敌人，然后biubiubiu发射子弹。子弹也是个小方块，朝着敌人飞过去。
接下来就是把这些零碎的功能串起来，形成一个能玩的基本流程。
比如说，敌人得一波一波地来。 我就设定了每波敌人的数量和种类，一开始简单点，后面波数多了，敌人也强一点，快一点。当前一波敌人被全灭或者有漏网之鱼后，隔一会儿再出下一波。
玩家得有资源的概念。 消灭敌人能赚钱，造塔花钱，升级塔也花钱。还得有个“生命值”的概念，就是基地能承受多少个敌人溜过去，生命值为零游戏就结束。
子弹打中敌人，敌人得掉血。 敌人血量没了就消失，玩家赚钱。这一块儿的碰撞检测，一开始我写得比较粗糙，就是判断子弹的坐标和敌人的坐标是不是重叠了。后来发现当子弹和敌人都比较小的时候，得精确点，就用了矩形碰撞检测的法子。
整个过程中，遇到的坑也不少。
最大的挑战是平衡性。 塔的攻击力、攻速、范围、造价，还有敌人的血量、速度、数量，这些数值稍微调不游戏要么太简单要么太难，玩起来就没意思。我就反复调整，自己当测试员，一遍遍地玩，找感觉。这块儿比写代码还费神。
还有就是性能问题。 当屏幕上的敌人和子弹一多，尤其是后期波数多了，电脑风扇就开始吼了，画面也卡。后来就琢磨着怎么优化，比如减少不必要的计算，对象池复用子弹对象而不是每次都新建销毁，这些都是一点点摸索出来的。
用户界面这块儿也挺简陋的，就是用Canvas的 `fillText` 方法在屏幕上显示当前的金钱、生命值、波数啥的。想做得好看点，那CSS和DOM元素配合可能更但我当时就想纯用Canvas试试水。
捣鼓出来的成品，也就是个能简单玩玩的程度。 画面挺朴素，功能也基础，没啥酷炫的特效和音效。但是从零开始，一步步把想法变成现实，这个过程还是挺有成就感的。而且通过这个小项目，对JavaScript的掌握，特别是Canvas绘图、动画循环、碰撞检测这些，理解确实深了不少。
现在回头看，这玩意儿还有很多能改进的地方，比如加更多种类的塔和敌人，搞个技能系统，弄个存档功能啥的。不过作为一次练手和记录，我觉得也算圆满了。主要还是享受那个瞎折腾的过程，挺有意思的。
还没有评论，来说两句吧...