《上手TypeScript,从入门到放弃》,先了解一下TypeScript的一些基本类型。
项目效果Demo
项目代码地址:
习前小问题
做出一个贪吃蛇小游戏,需要考虑哪些问题?(纯属个人的想法)
1、如何随机生成食物的位置?并保证不会出现在区域外?
2、蛇是如何移动的?当拐弯后,身体该如何做出相应的变化?
3、移动过程中,撞墙了怎么办?
4、移动过程中,通过什么判断蛇是吃掉了食物?
5、吃掉食物后,蛇的身体变长了,如何展现?食物该如何处理?
6、移动过程中,蛇头拐弯,撞到自身怎么办?
7、吃掉食物后,积分和等级的相应的变化,固定的计算公式
8、如何控制蛇的移动方向?需要使用哪个键盘事件?
9、蛇在自动前进的时候,键盘的前进、后退、向上、向下出现冲突/转向了,怎么办?
10、哪些情况,表示游戏结束?
代码思路
根据前面的问题,捋一下贪吃蛇的完成思路。
1、页面布局,规划出一个蛇的移动范围
2、随机生成食物的X/Y轴坐标,坐标范围在 0 ~ 区域的宽高
3、每吃掉食物,积分自增1;每10积分,等级升一级;每次升级,移动速度也变快
4、吃掉食物后,身体需要增加一截
5、蛇的身体移动:当蛇头移动一步时,后面相邻的身体移动到前面的坐标位置。
实际代码中,我们需要从身体最后一个开始设置它的坐标位置。
因为若是从蛇头开始设置,当蛇头移动后,原始的位置已经发生了更改,此时再设置后面身体的坐标,会出错。
6、蛇头在移动后,通过判断蛇头的坐标与蛇身的坐标是否重合,来判断是否撞到了自身
7、蛇头在移动后,通过蛇头的坐标与食物的坐标是否重合来判断是否吃到食物
8、蛇头在移动后,通过蛇头的坐标在区域坐标范围内来判断是否撞墙
9、通过监听键盘keydown事件,控制蛇的上下左右的前进方向,相应的X/Y轴坐标增加或者减少
10、当蛇头移动时,禁止控制蛇向反向移动
11、当检测到蛇吃掉食物后,重复2、3、4