My little project of game 一、简介 为了丰富我们的课余生活以及提升我们的编程技术，我们设计了一个有些难度的贪吃蛇游戏，鼓励同学们在失败的同时不要气馁，勇于不断挑战自己的极限，磨砺永不放弃的精神。
二、功能介绍 我们设计了普通、困难和地狱三个模块待同学们来挑战，更增添了排行版来让同学们查看自己的水平。同时与传统的食物相比，我们增添了普通食物、零食和药品三种食物，还更新了小蛇的喂养长大规则，撞墙规则。使游戏更具趣味性，上手难度更大。
1、界面设计： 首先我们这个游戏具有五个界面，分别为首页，普通模式，困难模式，地狱模式以及排行榜。在首页中我们添加了一张全局背景图，用以让玩家明白这个游戏的主题，接着我们在页面首行做一个小盒子占据页面并在其中加上我们的背景音乐，然后在页面中间设置一个div盒子，在盒子里面增加上四个小盒子，分别存放其余的四个界面的超链接，并设置css样式使得大盒子虚化一点，主要突出四个小盒子的，方便玩家们明白主题。接下来便是进入到我们的游戏界面。四个游戏界面的css样式设置的基本相同，跟主界面一样我们需要找一张背景图片首先铺在整个界面上，使背景图片占满整个屏幕，然后设置一个盒子将其变成flex布局，在其内部设置四个小盒子分是start,pause,restart,goback,我们将其设置为flex-direction:column，容器内部子元素的排列方向为垂直方向（从上到下）子元素将以垂直列的形式排列。justify-content:space-evenly，在容器的主轴方向上（垂直方向），将子元素均匀分布，空白空间位于子元素之间和周围。align-items:center在容器的交叉轴方向上（水平方向），将子元素居中对齐。同时我们对这个大盒子进行固定定位。接下来我们就修改小盒子的样式，在盒子添加上盒子的背景颜色，以及文字颜色字体大小，再将这个小盒子设置成圆角的小盒子。接下来我们设置一个高为600px和1000px的map,并且利用固定定位将地图放在电脑屏幕的中间。然后我们对所有在map这个盒子里面的div盒子做一个css样式的盒子设置，将所有的在map里面的东西都设置成一个内径为20px的一个小圆点，蛇头与蛇身使用了径向渐变作为背景图像，并指定了背景颜色作为备用。背景图像将呈现为重复的径向渐变，从#ffc000过渡到#ff4e00，创造出一种独特的背景效果。接下来我们便为食物设置css样式background-image:repeating-radial-gradient(#54b604, #058518);设置背景图像为重复径向渐变。渐变的颜色范围从#54b604（深绿色）到#058518（浅绿色）。background-color: #058518; 设置背景颜色为#058518（浅绿色）。animation:foodAnimate 1s linear infinite; 指定应用名为foodAnimate的动画效果，持续时间为1秒，使用线性速度曲线，并且无限循环播放动画。@keyframes foodAnimate定义了名为foodAnimate的动画效果，其中包含了三个关键帧（keyframes）：0%：在动画开始时（0%进度），设置一个白色（white）的阴影效果，模糊半径为10像素。50%：在动画进行到一半时（50%进度），设置一个更大的白色阴影效果，模糊半径为100像素。100%：在动画结束时（100%进度），恢复为初始状态，设置一个白色阴影效果，模糊半径为10像素。
2、后端设计 构造函数接受三个参数：选择器字符串（用于选择游戏地图）、计分板元素选择器字符串和游戏结束背景选择器字符串。 构造函数初始化游戏相关的各种属性和元素，如地图、计分板、食物、零食、药品和蛇等。 start方法用于开始游戏，包含游戏的主要逻辑。在start方法中，通过定时器来控制蛇的移动、食物和零食的刷新以及计时器的重置。 通过一系列的判断和计数器来处理蛇吃到食物、零食和药品的情况，并根据吃到的数量来增加蛇的长度和得分。 根据不同的条件和计数器，调整游戏的速度和状态，如减慢蛇的速度、增加蛇的速度、恢复正常状态等。 在游戏中，通过监听按键事件来改变蛇的运动方向。 游戏中还有一些辅助判断变量和函数，用于控制游戏的状态和流程。 我们会给按钮绑定事件，通过监听事件，例如点击按钮我们会执行相关的逻辑，例如暂停重新开始，开始，回到主界面的按钮。对键盘的监听，拿到键盘的编码，通过几个按钮的编码设置我们就可以监听键盘，然后应用我们写好的change()方法从而达到控制游戏的目的。