# 贪吃蛇

学编程初期我写过两个版本的贪吃蛇，他们的逻辑都一样，只是`贪吃蛇2`使用了canvas渲染，`贪吃蛇1`使用了dom元素渲染（效果差），我推荐读者优先体验`贪吃蛇2`。

## 贪吃蛇2

![](https://s2.loli.net/2025/06/19/CFWndZ4igyX7VEw.png)

[https://www.565455.xyz/mapping.html?link=https://fancc666.gitee.io/test/snake/newsnake/](https://www.565455.xyz/mapping.html?link=https://fancc666.gitee.io/test/snake/newsnake/)

**操作说明**

- 下方的`上下左右`可以控制蛇头运动
- 如果用电脑访问，可以直接用上下左右键控制
- 当蛇移动到边缘或者撞到自己的身体，游戏就结束了

## 贪吃蛇1

![](https://s2.loli.net/2025/06/19/RoSBnLgiJpE9hDV.png)

[https://www.565455.xyz/mapping.html?link=https://fancc666.gitee.io/test/snake/](https://www.565455.xyz/mapping.html?link=https://fancc666.gitee.io/test/snake/)

此处说明略。