javaScript贪吃蛇
admin
2024-01-17 15:47:14
0

一、准备工作

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.碰撞函数结果分析与处理

吃到食物碰到墙壁
10
11
00
01

初步书写:

//获取碰撞函数返回值之后在下面写上情况处理//这之间要左个碰撞检测 看计算出来的蛇头有没有碰上食物或者蛇身体或者墙壁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


Document

相关内容

热门资讯

酷开系统是安卓系统不,深度解析... 亲爱的读者,你是否曾好奇过,那些在我们手机、电视上运行得风生水起的操作系统,它们之间究竟有何不同?今...
小说系统类游戏安卓,安卓世界逆... 你有没有想过,在手机上玩一款能让你瞬间穿越到小说世界的游戏?想象你不再是旁观者,而是故事的主角,那种...
安卓系统网页上传文件,安卓系统... 你有没有遇到过这种情况:手机里存了好多文件,想要上传到网页上分享,却发现安卓系统的操作有点儿复杂?别...
xp系统能刷安卓系统吗,体验全... 你有没有想过,你的老XP系统是不是也能玩转安卓的乐趣呢?没错,今天就来聊聊这个话题,看看XP系统能不...
安卓系统图标修改方法,让你的手... 你有没有发现,手机里的安卓系统图标总是那么单调乏味?是不是也想给它们换上新鲜的衣服,让手机界面焕然一...
gta安卓系统怎么下载,轻松安... 你有没有想过,在手机上玩那些刺激的GTA游戏呢?想象你可以在繁忙的街头驾驶飞车,或者在虚拟世界中成为...
找不到安卓子系统,揭秘原因及解... 最近我在使用安卓手机的时候遇到了一个让人头疼的问题——找不到安卓子系统!这可真是让我抓耳挠腮,不知道...
安卓p系统如何使用,功能亮点与... 你升级到安卓P系统了吧?是不是有点小激动,想要立刻探索这个新系统的所有酷炫功能呢?别急,让我带你一步...
多多安卓系统app下载,一站式... 你有没有发现,最近手机上多了一个超级酷炫的系统——多多安卓系统!是不是已经跃跃欲试,想要下载体验一番...
r801 安卓系统,深度解析新... 你有没有听说过R801安卓系统?这可是最近在数码圈里炒得火热的一个话题呢!想象你的手机突然变得像一台...
安卓系统国外能用吗,探讨安卓系... 你有没有想过,当你拿着那部心仪的安卓手机,准备出国旅行或者工作的时候,会不会突然发现,哎呀妈呀,这安...
健康怀仁安卓系统下载,健康相伴 你有没有想过,在这个信息爆炸的时代,拥有一款健康、稳定的操作系统是多么重要的事情呢?今天,就让我带你...
手机系统模拟安卓5.0,系统革... 你有没有想过,如果手机系统可以像安卓5.0那样模拟出来,会是怎样的体验呢?想象你手中的设备瞬间变身成...
关闭安卓电池检测系统,解锁续航... 你有没有发现,手机用久了,电池续航能力好像越来越不给力了?是不是觉得安卓系统的电池检测系统太烦人了?...
安卓系统变ios永久,探索系统... 你知道吗?最近在科技圈里可是掀起了一股热潮呢!那就是安卓系统用户纷纷转向iOS系统的现象。这究竟是怎...
安卓系统虚拟按键失灵,原因排查... 手机里的安卓系统突然间出了点小状况,虚拟按键失灵了!这可真是让人头疼不已。想象你正沉浸在游戏的世界里...
安卓北京交警系统繁忙,揭秘安卓... 最近北京的小伙伴们有没有发现,打开手机上的安卓交警系统,那可真是忙得不亦乐乎啊!不信?那就跟着我一起...
苹果和安卓互用系统,共创未来 你有没有想过,为什么你的苹果手机上的应用,有时候也能在安卓手机上顺畅运行呢?这背后,其实有一个神奇的...
安卓系统强制内置相机,隐私与安... 你知道吗?最近在安卓系统上,有一个让人有点摸不着头脑的小变化引起了大家的关注。那就是安卓系统竟然开始...
安卓系统读书app推荐,安卓系... 你有没有发现,随着智能手机的普及,阅读变得越来越方便了呢?尤其是在安卓系统上,各种各样的读书app层...