1. 游戏效果

[→ 点击此处预览效果 ←]

  • 方向键控制蛇的移动方向
  • 蛇吃到食物后,身体多出一格,分数+1,食物重新刷新位置
  • 最大等级为 8 级,每 2 分升一级,升级后蛇的移动速度增加
  • 若蛇撞到边界撞到自己,则游戏结束
  • 刷新页面后游戏重新开始

2. 实现方法

贪吃蛇小游戏用 TypeScript 编写,HTML 骨架和 CSS 样式部分比较简单,很多方法都可以实现效果,这里就说一说 TS 的实现思路。

因为小游戏比较简单,所以没用使用webpack等打包,直接写将 TS 编译后的 JS 文件引入页面。TS 部分运用了面向对象的编程思想,首先需要创建四个类,分别是食物类Food、蛇类Snake、计分面板类ScorePanel、游戏控制类GameControl,分别给他们编写相应的属性和方法:

属性方法
食物类Food绑定页面表示食物的红色方块即可获取食物 X、Y 坐标
修改食物的位置,即随机生成一个新的食物
蛇类Snake分别绑定页面的蛇容器、蛇身子、蛇头部分获取蛇头 X、Y 坐标
设置蛇头 X、Y 坐标
增加蛇身子
蛇身体移动
判断蛇是否撞自己
计分面板类ScorePanel分数
等级
绑定页面表示分数、等级的部分
加分
升级
游戏控制类GameControl绑定SnakeFoodScorePanel
是否存活的变量(布尔值)
按键方向
游戏初始化
判断键盘按下
蛇移动
判断蛇是否吃到食物

首先游戏控制类进行游戏初始化,通过定时器不断调用蛇移动方法。期间要判断用户按下的按键进行改变方向,判断蛇是否撞到自己、撞墙,判断蛇是否吃到食物,若吃到食物则加分、增加身体、刷新食物位置。根据分数判断是否升级。

3. 仓库地址

源代码已上传至:

  1. [Github]
  2. [Gitee]