贪吃蛇小游戏

代码模式怎么用？在通义官网点击代码模式，在对话框用大白话描述你的需求，通义会自动生成代码及应用预览。

你被要求创建一个简单的贪吃蛇游戏，使用HTML、CSS和JavaScript实现，所有代码集成在一个html文件中。以下是游戏的详细要求和描述：

1. HTML结构：

使用<div>元素作为游戏容器，类名为game-container，该容器应使用Flexbox居中对齐，垂直和水平都居中，填满浏览器视口。

在game-container内部有以下元素：

一个<div>元素，类名为title，显示游戏的标题“贪吃蛇”，该文本使用monospace字体，字体大小为32px，颜色为#3B3B3B，字体加粗，底部留有5px的间距。

一个<div>元素，类名为score，显示当前的得分，初始值为0，得分值通过<span>元素呈现，文本颜色为#3B3B3B，字体大小为16px，行高为1.5，底部间距为30px。

一个<canvas>元素，ID为gameCanvas，宽度和高度都为400px，使用2px的虚线边框，背景颜色为#B6C79C，启用像素化渲染。

一个<div>元素，类名为controls，提供游戏的控制说明，文字内容为“使用方向键控制移动”和“按空格键开始/暂停游戏”，字体大小为14px，行高为1.5。

2. CSS样式：

body元素使用Flexbox布局，justify-content和align-items都设置为center，使得game-container在页面中居中。背景色为#B6C79C，字体使用monospace，高度设置为100vh以填满视口，边距为0，并禁用滚动条。

所有页面元素的z-index设置为2，position为relative，确保它们位于页面的前景层。

canvas元素的最大宽度为100%，并且启用image-rendering: pixelated来实现像素化效果。每个网格的边框使用#555555颜色的虚线来绘制，背景颜色与页面一致，即#B6C79C。

3. 游戏逻辑与交互：

游戏开始与暂停： 游戏开始时，通过监听空格键（Space键）来启动或暂停游戏。若游戏未开始，按下空格键将启动游戏，若游戏已启动，再按空格键则会暂停游戏。暂停时会显示“游戏暂停”提示，游戏继续时会恢复正常。需要确保空格键的事件处理在按下时立即生效。

键盘控制： 游戏通过监听键盘事件（keydown）来控制贪吃蛇的移动，支持使用箭头键（ArrowUp、ArrowDown、ArrowLeft、ArrowRight）改变蛇的方向。移动时，蛇的头部会向相应方向延伸，蛇体部分将跟随前进。

碰撞检测： 如果蛇头碰到边界（超出画布边缘）或撞到自己的身体，游戏会重置并显示开始画面。

得分与食物生成： 每当蛇吃到食物时，分数增加10，食物会随机重新生成，且不会生成在蛇体上。随着得分的增加，游戏速度逐渐加快，但不会超过最小速度50ms。

4. 画布与网格：

画布的大小为400x400像素，网格大小为16px，因此一共将画出25x25的网格。

食物： 食物随机生成在画布内的某个网格上，蛇吃到食物后，食物重新生成。

蛇体： 蛇体由多个16x16像素的小方块组成，每个方块的颜色为深灰色（#202020），在画布上呈现出蛇的形状。蛇移动时，新的蛇头会插入到蛇体的前端，原蛇尾会被移除，保持蛇的长度。

边框与网格线： 画布上每个网格之间绘制细线，线宽为0.25px，颜色为#DCE7D4，显示出清晰的网格布局。

5. 游戏开始与暂停画面：

游戏未开始时，画布中央显示提示“按空格键开始游戏”。游戏暂停时，画布中央显示提示“游戏暂停”。这些提示文字的颜色为#3B3B3B，使用Arial字体，字体大小为20px，并且文本居中显示。

6. JavaScript实现：

游戏通过requestAnimationFrame函数实现动画循环，保证游戏逻辑与画面刷新同步。

使用setInterval或自定义的时间逻辑控制游戏速度，随着游戏进行，速度逐渐加快，给玩家更大的挑战。

游戏状态（开始、暂停、结束）通过布尔值gameStarted和gamePaused来控制，并通过条件判断在不同的状态下执行不同的画面渲染和逻辑。

7. 其他功能：

游戏开始时，初始化一个蛇数组，蛇体由一个方块开始，食物生成在一个随机位置。

游戏结束时，调用resetGame()函数，清空画布并重置游戏状态，重新显示开始画面。

8. 颜色方案：

背景色：#B6C79C，淡绿色。

蛇体颜色：#202020，深灰色。

食物颜色：绿色（可调整）。

边框线条颜色：#DCE7D4，淡灰绿色。