js+jq实现坦克大战
现在可以在我博客主页 Vic’s blog查看完整的坦克大战
之前为了练习canvas写了个贪吃蛇,逻辑控制和计算过程实现起来也很简单,都说canvas很6,这次决定用它来实现一个坦克大战,但真实的坦克大战等级很多,估计建设坦克地图就能把人累死,如果封装的好一些,还可以省些精力,写个步骤,慢慢来!
一.坦克体积和基地分布区种类场景
1.坦克体积
- 我的坦克体积控制在40x40,画了个坦克原型欣赏一下
- 左翼履带和右翼履带分别是三个10x10绿色方块
- 坦克尾部是两个5x10绿色矩形
- 图中15x10红色矩形部分是坦克炮筒,子弹就会在这里射出
- 后方两个5x10红色矩形是炮筒支架,两个10x10黑色方块部分是坦克中心位置
2.坦克活动基地和坦克Home
-坦克活动基地是1000x600,坦克home是100x50,这两个尺寸我根据总尺寸居中定义的,知所以画出小格子,是为了方便我开发看坐标位置,
3.坦克行走和子弹轨迹设计
-坦克的行走:坦克行走的原理很简单,只要明白逐格动画(定格动画)就行,其实就和视频的单位(帧)相似的,把一帧一帧的定格画面连贯的播放起来,就自然形成了视频. 回到正题, 坦克的行走就是把图中每个格子的xy坐标根据方向的不同,对xy进行+10 -10的操作
表格中是坦克每个方向转到另一个方向xy坐标计算的结果,有些轻微的计算规律,但不适用每个方向
-坦克子弹射击:只要在2d的环境下,要想看见动作类型的画面,必须使用定格动画,射击的原理也一样.使用定时器用固定毫秒的间隔把子弹的起点x或y坐标循环+10,每射击一个子弹就把上一个子弹xy坐标的子弹位置清空,从而就展现了子弹的发射轨迹.子弹命中敌人的计算也很简单,每把子弹画到下一个xy坐标时,获取敌方坦克的边界xy位置相互对比下,子弹的位置是否跨越,是的话则命中敌方,效果也就达到了.
4.敌方坦克动态生成和行走,及射击,障碍物(钢板,板砖)
-敌方坦克的行走和射击和步骤3是一样的,区别是敌军射击概率被我改成可调节的,不然射击的太快的我的home就over了,敌方坦克的风格我定义了3种,只是颜色不一其他都一样,敌方坦克的生成使用定时器即可,监听敌方死亡事件,挂一个就新生成一个,很简单.钢板的原理子弹射击不透好实现,但子弹射击板砖的部分,目前还没搞定动态射击板砖逐渐建损的动画,所有这块我就略过了,真实的坦克大战随着子弹的升级 钢板也可以逐渐建损的动画,等我啥时候有思路了在实现吧
