用TypeScript实现贪吃蛇小游戏

1,034 阅读2分钟

上手TypeScript,从入门到放弃,先了解一下TypeScript的一些基本类型。

项目效果Demo

贪吃蛇小练习

项目代码地址:

Gitee

习前小问题

做出一个贪吃蛇小游戏,需要考虑哪些问题?(纯属个人的想法)

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

参与贡献

感谢 尚硅谷2021版TypeScript教程