一、准备工作

1.图片

1. 准备蛇头图片
2. 准备开始图片
3. 准备食物图片

2.html

创建一个index.html文件

3.css

创建一个css文件

*{/* 去除内外边距 */margin: 0;padding: 0;
}
/* 整体游戏容器样式 */
.container{display: flex;justify-content: center;align-items: center;width:600px;height: 600px;background: #225675;border: 20px solid #7dd9ff;margin: 20px auto;position: relative;
}/* 设置按钮公共样式 */
.container button{border:none;outline: none; /* 边框和轮廓 */
}
/* 开始按钮 */
.startBtn{display: none;width: 200px;height: 80px;background:url(./img/开始游戏.png) center/contain no-repeat
}
.pauseBtn{display: none;width: 70px;height: 70px;background:url(./img/开始.png) center/contain no-repeat
}

4.js文件

1. 创建index.js
2. 创建config.js文件

二、步骤

1. 主函数

1.index.js中写游戏的主方法

function main(){}
main()

2.初始化游戏

在主方法中执行初始化游戏方法

function main(){//1.初始化游戏initGame()
}function initGame(){}

1. 初始化地图

在initGame中执行初始化地图的方法

function initGame(){//1.初始化地图
drawMap()
}

在config.js中设置需要的属性

//存储地图对象  坐标x，y
var griData = []
//整个网格的行列
var tr = 30 //行 y
var td = 30 //列 x

在index.js中书写绘制地图方法

//绘制地图的方法
function drawMap() {for (var i = 0; i < td; i++) {for (var j = 0; j < td; j++) {griData.push({ x: j, y: i }) //将所有的格子坐标存储到数组中}}
}

2.绘制蛇

在initGame中执行初始化蛇的方法

function nintGame(){//1.初始化地图drawMap()//2.初始化蛇drawSnake(snake)
}

在config.js中

//蛇的身体大小   一个格子的大小width/tr
// 1.先获取container元素
// 2.在通过container元素获取width 但是此时带有px单位
// 3.通过split方法去掉px
// 4.在通过parseInt转化为数字 就获取了width大小
var snakeBody = parseInt(window.getComputedStyle(document.getElementsByClassName('container')[0], null).width.split('px')) / tr
//蛇相关的配置
var snake = {//蛇的初始位置snakePos: [{ x: 0, y: 0, domContent: '', flag: 'body' },{ x: 1, y: 0, domContent: '', flag: 'body' },{ x: 2, y: 0, domContent: '', flag: 'body' },{ x: 3, y: 0, domContent: '', flag: 'head' },],
}

在index.js中

//绘制蛇的方法
function drawSnake(snake) {for (var i = 0; i < snake.snakePos.length; i++) {if (!snake.snakePos[i].domContent) {//如果进入此if说明是第一次创建蛇snake.snakePos[i].domContent = document.createElement('div')snake.snakePos[i].domContent.style.position = 'absolute'snake.snakePos[i].domContent.style.width = snakeBody + 'px'snake.snakePos[i].domContent.style.height = snakeBody + 'px'snake.snakePos[i].domContent.style.left = snake.snakePos[i].x * snakeBody + 'px'snake.snakePos[i].domContent.style.top = snake.snakePos[i].y * snakeBody + 'px'if (snake.snakePos[i].flag == 'head') {//说明当前是蛇头snake.snakePos[i].domContent.style.background = `url("../img/蛇头.png") center/contain no-repeat`;} else {//说明是蛇身snake.snakePos[i].domContent.style.background = '#9ddbb1'snake.snakePos[i].domContent.style.borderRadius = '50%'}}//需要将创建dom元素添加到container容器上面var container = document.getElementsByClassName('container')[0]container.appendChild(snake.snakePos[i].domContent)}
}

3.绘制食物

在initGame中执行绘制食物的方法

function initGame() {//1.初始化地图drawMap()//2.初始化蛇drawSnake(snake)//3.初始化食物drawFood()
}

在config.js中

//食物相关的配置
var food = {//食物的初始位置x: 0,y: 0,domContent: '',
}

在index.js中

//绘制食物的方法
function drawFood() {
//思考：//1.食物的坐标是随机的//2.食物不能生成在container的边界上及以外//3.食物不能生成在蛇的身体上蛇的头上
//TODO：while (true) {//构成一个死循环 直到生成符合要求的食物坐标 才能退出循环var isRepeat = falsefood.x = Math.floor(Math.random() * tr) //最大值为tr-1 因为是从0开始的food.y = Math.floor(Math.random() * td) //最大值为td-1 因为是从0开始的//floor:总是返回小于等于一个给定数字的最大整数。//random:返回0到1之间的一个随机数for (var i = 0; i < snake.snakePos.length; i++) {if (food.x == snake.snakePos[i].x && food.y == snake.snakePos[i].y) {//进入此if说明食物生成在蛇的身体上isRepeat = truebreak}}if (!isRepeat) {//跳出while循环break}}//跳出while循环说明已经生成了符合要求的食物坐标if (!food.domContent) {food.domContent = document.createElement('div')food.domContent.style.position = 'absolute'food.domContent.style.height = snakeBody + 'px'food.domContent.style.width = snakeBody + 'px'food.domContent.style.background = `url("../img/西瓜.png") center/contain no-repeat`document.querySelector('.container').append(food.domContent)}food.domContent.style.left = food.x * snakeBody + 'px'food.domContent.style.top = food.y * snakeBody + 'px'
}

3.让蛇移动

1.给document绑定监听事件

在main函数中执行bindEvent()事件

//游戏的主方法
function main() {//1.初始化游戏initGame()//2.绑定事件bindEvent()
}

在config.js中

//明确新的蛇头和旧的蛇头之间的位置关系
//我们在确定新的蛇头坐标的时候，会拿下面的对象和旧蛇头做一个计算
var directionNum={left:{x:-1,y:0,flag:'left'},top:{x:0,y:-1,flag:'top'},right:{x:1,y:0,flag:'right'},bottom:{x:0,y:1,flag:'bottom'}
}

在snake对象中加入蛇的初始方向属性

var snake = {//蛇的初始位置snakePos: [{ x: 0, y: 0, domContent: '', flag: 'body' },{ x: 1, y: 0, domContent: '', flag: 'body' },{ x: 2, y: 0, domContent: '', flag: 'body' },{ x: 3, y: 0, domContent: '', flag: 'head' },],//蛇一开始移动的方法direction:directionNum.right
}

在index.js中

//绑定事件
function bindEvent() {//1.监听用户的键盘事件 上下左右document.onkeydown = function (e) {//37 左 38上 39右 40下 ↑↓←→//65 a 87 w 68d 83s//上if (e.keyCode == '38' || e.keyCode == '87') {snake.direction = directionNum.top}//下if (e.keyCode == '40' || e.keyCode == '83') {snake.direction = directionNum.bottom}//左if (e.keyCode == '37' || e.keyCode == '65') {snake.direction = directionNum.left}//右if (e.keyCode == '39' || e.keyCode == '68') {snake.direction = directionNum.right}snakeMove() //蛇的移动方法}
}

2. 在书写一个蛇移动的方法

1. 根据方向计算出新的蛇头的坐标作为
2. 将旧的头修改为身体
3. 将新的头添加到蛇的数组中
4. 重新绘制蛇

//蛇的移动方法
function snakeMove() {var oldHead = snake.snakePos[snake.snakePos.length - 1]//1.根据方向计算出新的蛇头的坐标作为var newHead = {domContent: '',x: oldHead.x + snake.direction.x,y: oldHead.y + snake.direction.y,flag: 'head',}//2.将旧的头修改为身体oldHead.flag = 'body'oldHead.domContent.style.background = '#9ddbb1'oldHead.domContent.style.borderRadius = '50%'//3.将新的头添加到蛇的数组中snake.snakePos.push(newHead)//4.重新绘制蛇drawSnake(snake)
}

3.解决移动完成之后蛇头不正确问题

蛇头可移动之后会有个问题 就是蛇的头位置不对，修改绘制蛇方法的代码中添加根据方向进行一个旋转的代码

//绘制蛇的方法
function drawSnake(snake) {for (var i = 0; i < snake.snakePos.length; i++) {if (!snake.snakePos[i].domContent) {//如果进入此if说明是第一次创建蛇snake.snakePos[i].domContent = document.createElement('div')snake.snakePos[i].domContent.style.position = 'absolute'snake.snakePos[i].domContent.style.width = snakeBody + 'px'snake.snakePos[i].domContent.style.height = snakeBody + 'px'snake.snakePos[i].domContent.style.left = snake.snakePos[i].x * snakeBody + 'px'snake.snakePos[i].domContent.style.top = snake.snakePos[i].y * snakeBody + 'px'if (snake.snakePos[i].flag == 'head') {//说明当前是蛇头snake.snakePos[i].domContent.style.background = `url("../img/蛇头.png") center/contain no-repeat`;//根据方向进行一个旋转switch (snake.direction.flag) {case 'left': {snake.snakePos[i].domContent.style.transform = `rotate(180deg)`break};case 'right': {snake.snakePos[i].domContent.style.transform = `rotate(0deg)`break};case 'top': {snake.snakePos[i].domContent.style.transform = `rotate(270deg)`break};case 'bottom': {snake.snakePos[i].domContent.style.transform = `rotate(90deg)`break};}} else {//说明是蛇身snake.snakePos[i].domContent.style.background = '#9ddbb1'snake.snakePos[i].domContent.style.borderRadius = '50%'}}//需要将创建dom元素添加到container容器上面var container = document.getElementsByClassName('container')[0]container.appendChild(snake.snakePos[i].domContent)}
}

4.写一个碰撞检测函数

1. 判断是否碰撞墙壁
2. 判断是否吃到食物
3. 检测是否碰到自己的身体

在蛇移动的方法1和2之间加入碰撞检测函数执行

//蛇的移动方法
function snakeMove() {var oldHead = snake.snakePos[snake.snakePos.length - 1]//1.根据方向计算出新的蛇头的坐标作为var newHead = {domContent: '',x: oldHead.x + snake.direction.x,y: oldHead.y + snake.direction.y,flag: 'head',}//这之间要左个碰撞检测 看计算出来的蛇头有没有碰上食物或者蛇身体或者墙壁var collideCheckResult = isCollide(newHead)//2.将旧的头修改为身体oldHead.flag = 'body'oldHead.domContent.style.background = '#9ddbb1'oldHead.domContent.style.borderRadius = '50%'//3.将新的头添加到蛇的数组中snake.snakePos.push(newHead)//4.重新绘制蛇drawSnake(snake)
}

书写碰撞检测函数

//碰撞检测
function isCollide(newHead){var collideCheckInfo={isCollide:false,//是否碰撞墙壁isEat:false//是否吃到食物}///1.判断是否碰撞墙壁if(newHead.x<0||newHead.x>td-1||newHead.y<0||newHead.y>tr-1){collideCheckInfo.isCollide=truereturn collideCheckInfo}//2.判断是否吃到食物if(newHead.x==food.x&&newHead.y==food.y){collideCheckInfo.isEat=truereturn collideCheckInfo}//3.检测是否碰到自己的身体for(var i=0;iif(newHead.x==snake.snakePos[i].x&&newHead.y==snake.snakePos[i].y){collideCheckInfo.isCollide=truereturn collideCheckInfo}}
}

5.碰撞函数结果分析与处理

初步书写：

//获取碰撞函数返回值之后在下面写上情况处理//这之间要左个碰撞检测 看计算出来的蛇头有没有碰上食物或者蛇身体或者墙壁var collideCheckInfo = isCollide(newHead)//1.判断是否撞到东西if (collideCheckInfo.isCollide) {//如果进入此if表示碰到东西了alert('游戏结束')}//2.判断是否吃到东西if (collideCheckInfo.isEat) {//如果进入此if表示吃到食物了//重新生成食物drawFood()} else {//说明没有吃到食物document.getElementsByClassName('container')[0].removeChild(snake.snakePos[0].domContent)snake.snakePos.shift()}

6.精化

config.js中创建一个计分变量

//游戏分数
var score = 0

在碰撞函数处理中的判断是否吃到食物添加分数++

  //3.判断是否吃到食物if (newHead.x == food.x && newHead.y == food.y) {collideCheckInfo.isEat = truescore ++;//分数加一}

修改碰到东西之后的处理

  //判断是否撞到东西if (collideCheckInfo.isCollide) {//如果进入此if表示碰到东西了var result = window.confirm(`游戏结束，你的得分为${score}分,是否重新开始？`)if (result) {//如果进来则说明重新开始// window.location.reload() //刷新页面//方法二：document.getElementsByClassName('container')[0].innerHTML = ''score = 0snake = {//蛇的初始位置snakePos: [{ x: 0, y: 0, domContent: '', flag: 'body' },{ x: 1, y: 0, domContent: '', flag: 'body' },{ x: 2, y: 0, domContent: '', flag: 'body' },{ x: 3, y: 0, domContent: '', flag: 'head' },],//蛇一开始移动的方法direction: directionNum.right,}food = {//食物的初始位置x: 0,y: 0,domContent: '',}initGame()} else {//结束游戏document.onkeydown=falseclearInterval(timerStop)}return}

优化移动：
往左的时候不能往右
往上的时候不能往下
以此类推
修改绑定事件函数

//绑定事件
function bindEvent() {//1.监听用户的键盘事件 上下左右document.onkeydown = function (e) {//37 左 38上 39右 40下 ↑↓←→//65 a 87 w 68d 83s//上if ((e.keyCode == '38' || e.keyCode == '87')&&snake.direction.flag!='bottom') {snake.direction = directionNum.top}//下if( (e.keyCode == '40' || e.keyCode == '83') && snake.direction.flag!='top'){snake.direction = directionNum.bottom}//左if( (e.keyCode == '37' || e.keyCode == '65') && snake.direction.flag!='right') {snake.direction = directionNum.left}//右if ((e.keyCode == '39' || e.keyCode == '68') && snake.direction.flag!='left') {snake.direction = directionNum.right}snakeMove() //蛇的移动方法}
}

写一个定时器让蛇自己移动
将绑定事件中的snakeMove()修改为startGame()
在config.js中创建三个变量

//停止计时器
var timerStop = null
//计时器事件
var speed =500
//防止重复执行setInterval
var flag=true

书写startGame函数

//定时器
function startGame() {if (flag) {timerStop = setInterval(function () {snakeMove()flag = false}, speed)}
}

7.暂停

在bindEvent函数中添加

    //当点击container的时候暂停游戏document.getElementsByClassName('container')[0].onclick=function(){document.getElementsByClassName('pauseBtn')[0].style.display='block'clearInterval(timerStop)flag=true}//点击暂停按钮继续游戏document.getElementsByClassName('pauseBtn')[0].onclick=function(e){//阻止冒泡事件e.stopPropagation()document.getElementsByClassName('pauseBtn')[0].style.display='none'startGame()}

8.开始游戏

在main函数中修改代码

function main() {//用户点击了开始游戏之后在左后续的工作var startBtn = document.getElementsByClassName('startBtn')[0]startBtn.onclick = function (e) {//阻止冒泡e.stopPropagation()//1.初始化游戏initGame()//2.绑定事件bindEvent()//3.将按钮隐藏startBtn.style.display='none'}
}

但是有个bug 点击开始按钮之后无法暂停

为什么会出现这样子的事情？
因为在重新开始的时候我们将container的innerHTML置空了
本身是有开始和暂停两个按钮的
修复：

      document.getElementsByClassName('container')[0].innerHTML = `    `

这么写还是有bug 就是开始和暂停按钮会同时出现
将container的暂停事件重新写

    //当点击container的时候暂停游戏document.getElementsByClassName('container')[0].onclick = function (e) {var pauseBtn = document.getElementsByClassName('pauseBtn')[0]if(e.target.className=='container'){pauseBtn.style.display = 'block'clearInterval(timerStop)flag = true}else{//恢复游戏操作pauseBtn.style.display = 'none'startGame()}}

三、全代码

index.js

//游戏的主方法
function main() {//用户点击了开始游戏之后在左后续的工作var startBtn = document.getElementsByClassName('startBtn')[0]startBtn.onclick = function (e) {//阻止冒泡e.stopPropagation()//1.初始化游戏initGame()//2.绑定事件bindEvent()//3.将按钮隐藏startBtn.style.display='none'}
}//初始化游戏
function initGame() {//1.初始化地图drawMap()//2.初始化蛇drawSnake(snake)//3.初始化食物drawFood()
}//绘制地图的方法
function drawMap() {for (var i = 0; i < td; i++) {for (var j = 0; j < td; j++) {griData.push({ x: j, y: i }) //将所有的格子坐标存储到数组中}}
}//绘制蛇的方法
function drawSnake(snake) {for (var i = 0; i < snake.snakePos.length; i++) {if (!snake.snakePos[i].domContent) {//如果进入此if说明是第一次创建蛇snake.snakePos[i].domContent = document.createElement('div')snake.snakePos[i].domContent.style.position = 'absolute'snake.snakePos[i].domContent.style.width = snakeBody + 'px'snake.snakePos[i].domContent.style.height = snakeBody + 'px'snake.snakePos[i].domContent.style.left = snake.snakePos[i].x * snakeBody + 'px'snake.snakePos[i].domContent.style.top = snake.snakePos[i].y * snakeBody + 'px'if (snake.snakePos[i].flag == 'head') {//说明当前是蛇头snake.snakePos[i].domContent.style.background = `url("../img/蛇头.png") center/contain no-repeat`//根据方向进行一个旋转switch (snake.direction.flag) {case 'left': {snake.snakePos[i].domContent.style.transform = `rotate(180deg)`break}case 'right': {snake.snakePos[i].domContent.style.transform = `rotate(0deg)`break}case 'top': {snake.snakePos[i].domContent.style.transform = `rotate(270deg)`break}case 'bottom': {snake.snakePos[i].domContent.style.transform = `rotate(90deg)`break}}} else {//说明是蛇身snake.snakePos[i].domContent.style.background = '#9ddbb1'snake.snakePos[i].domContent.style.borderRadius = '50%'}}//需要将创建dom元素添加到container容器上面var container = document.getElementsByClassName('container')[0]container.appendChild(snake.snakePos[i].domContent)}
}
//绘制食物的方法
function drawFood() {//思考：//1.食物的坐标是随机的//2.食物不能生成在container的边界上及以外//3.食物不能生成在蛇的身体上蛇的头上//TODO：while (true) {//构成一个死循环 直到生成符合要求的食物坐标 才能退出循环var isRepeat = falsefood.x = Math.floor(Math.random() * tr) //最大值为tr-1 因为是从0开始的food.y = Math.floor(Math.random() * td) //最大值为td-1 因为是从0开始的//floor:总是返回小于等于一个给定数字的最大整数。//random:返回0到1之间的一个随机数for (var i = 0; i < snake.snakePos.length; i++) {if (food.x == snake.snakePos[i].x && food.y == snake.snakePos[i].y) {//进入此if说明食物生成在蛇的身体上isRepeat = truebreak}}if (!isRepeat) {//跳出while循环break}}//跳出while循环说明已经生成了符合要求的食物坐标if (!food.domContent) {food.domContent = document.createElement('div')food.domContent.style.position = 'absolute'food.domContent.style.height = snakeBody + 'px'food.domContent.style.width = snakeBody + 'px'food.domContent.style.background = `url("../img/西瓜.png") center/contain no-repeat`document.querySelector('.container').append(food.domContent)}food.domContent.style.left = food.x * snakeBody + 'px'food.domContent.style.top = food.y * snakeBody + 'px'
}//蛇的移动方法
function snakeMove() {var oldHead = snake.snakePos[snake.snakePos.length - 1]//1.根据方向计算出新的蛇头的坐标作为var newHead = {domContent: '',x: oldHead.x + snake.direction.x,y: oldHead.y + snake.direction.y,flag: 'head',}//这之间要左个碰撞检测 看计算出来的蛇头有没有碰上食物或者蛇身体或者墙壁var collideCheckInfo = isCollide(newHead)//判断是否撞到东西if (collideCheckInfo.isCollide) {//如果进入此if表示碰到东西了var result = window.confirm(`游戏结束，你的得分为${score}分,是否重新开始？`)if (result) {//如果进来则说明重新开始// window.location.reload() //刷新页面//方法二：document.getElementsByClassName('container')[0].innerHTML = `    `score = 0snake = {//蛇的初始位置snakePos: [{ x: 0, y: 0, domContent: '', flag: 'body' },{ x: 1, y: 0, domContent: '', flag: 'body' },{ x: 2, y: 0, domContent: '', flag: 'body' },{ x: 3, y: 0, domContent: '', flag: 'head' },],//蛇一开始移动的方法direction: directionNum.right,}food = {//食物的初始位置x: 0,y: 0,domContent: '',}initGame()} else {//结束游戏document.onkeydown = false}clearInterval(timerStop)return}//2.将旧的头修改为身体oldHead.flag = 'body'oldHead.domContent.style.background = '#9ddbb1'oldHead.domContent.style.borderRadius = '50%'//判断是否吃到东西if (collideCheckInfo.isEat) {//如果进入此if表示吃到食物了//重新生成食物drawFood()} else {//说明没有吃到食物document.getElementsByClassName('container')[0].removeChild(snake.snakePos[0].domContent)snake.snakePos.shift()}//3.将新的头添加到蛇的数组中snake.snakePos.push(newHead)//4.重新绘制蛇drawSnake(snake)
}//定时器
function startGame() {if (flag) {timerStop = setInterval(function () {snakeMove()flag = false}, speed)}
}//绑定事件
function bindEvent() {//1.监听用户的键盘事件 上下左右document.onkeydown = function (e) {//37 左 38上 39右 40下 ↑↓←→//65 a 87 w 68d 83s//上if ((e.keyCode == '38' || e.keyCode == '87') && snake.direction.flag != 'bottom') {snake.direction = directionNum.top}//下if ((e.keyCode == '40' || e.keyCode == '83') && snake.direction.flag != 'top') {snake.direction = directionNum.bottom}//左if ((e.keyCode == '37' || e.keyCode == '65') && snake.direction.flag != 'right') {snake.direction = directionNum.left}//右if ((e.keyCode == '39' || e.keyCode == '68') && snake.direction.flag != 'left') {snake.direction = directionNum.right}//计时器自动移动蛇startGame()//当点击container的时候暂停游戏document.getElementsByClassName('container')[0].onclick = function (e) {var pauseBtn = document.getElementsByClassName('pauseBtn')[0]if(e.target.className=='container'){pauseBtn.style.display = 'block'clearInterval(timerStop)flag = true}else{//恢复游戏操作pauseBtn.style.display = 'none'startGame()}}// //点击暂停按钮继续游戏// document.getElementsByClassName('pauseBtn')[0].onclick = function (e) {//   //阻止冒泡事件//   e.stopPropagation()//   document.getElementsByClassName('pauseBtn')[0].style.display = 'none'//   startGame()// }}
}
//碰撞检测
function isCollide(newHead) {var collideCheckInfo = {isCollide: false, //是否碰撞墙壁isEat: false, //是否吃到食物}///1.判断是否碰撞墙壁if (newHead.x < 0 || newHead.x > td - 1 || newHead.y < 0 || newHead.y > tr - 1) {collideCheckInfo.isCollide = truereturn collideCheckInfo}//2.检测是否碰到自己的身体for (var i = 0; i < snake.snakePos.length; i++) {if (newHead.x == snake.snakePos[i].x && newHead.y == snake.snakePos[i].y) {collideCheckInfo.isCollide = truereturn collideCheckInfo}}//3.判断是否吃到食物if (newHead.x == food.x && newHead.y == food.y) {collideCheckInfo.isEat = truescore++ //分数加一}return collideCheckInfo
}//调用主方法
main()

config.js

//存储地图对象  坐标x，y
var griData = []
//整个网格的行列
var tr = 30 //行 y 
var td = 30 //列 x 
//蛇的身体大小   一个格子的大小width/tr
// 1.先获取container元素
// 2.在通过container元素获取width 但是此时带有px单位
// 3.通过split方法去掉px
// 4.在通过parseInt转化为数字 就获取了width大小
var snakeBody = parseInt(window.getComputedStyle(document.getElementsByClassName('container')[0], null).width.split('px')) / tr
//明确新的蛇头和旧的蛇头之间的位置关系
//我们在确定新的蛇头坐标的时候，会拿下面的对象和旧蛇头做一个计算
var directionNum={left:{x:-1,y:0,flag:'left'},top:{x:0,y:-1,flag:'top'},right:{x:1,y:0,flag:'right'},bottom:{x:0,y:1,flag:'bottom'}
}
//蛇相关的配置
var snake = {//蛇的初始位置snakePos: [{ x: 0, y: 0, domContent: '', flag: 'body' },{ x: 1, y: 0, domContent: '', flag: 'body' },{ x: 2, y: 0, domContent: '', flag: 'body' },{ x: 3, y: 0, domContent: '', flag: 'head' },],//蛇一开始移动的方法direction:directionNum.right
}//食物相关的配置
var food = {//食物的初始位置x: 0,y: 0,domContent: '',
}//游戏分数
var score = 0//停止计时器
var timerStop = null
//计时器事件
var speed =200
//防止重复执行setInterval
var flag=true

index.css

*{/* 去除内外边距 */margin: 0;padding: 0;
}
/* 整体游戏容器样式 */
.container{display: flex;justify-content: center;align-items: center;width:600px;height: 600px;background: #225675;border: 20px solid #7dd9ff;margin: 20px auto;position: relative;
}/* 设置按钮公共样式 */
.container button{border:none;outline: none; /* 边框和轮廓 */
}
/* 开始按钮 */
.startBtn{display: block;width: 200px;height: 80px;background:url(./img/开始游戏.png) center/contain no-repeat
}
.pauseBtn{display: none;width: 70px;height: 70px;background:url(./img/开始.png) center/contain no-repeat
}

html