功能:
- 可以计分,初始分数为0
- 等级机制,初始等级为0,等级越高,贪吃蛇移动的速度越快,最高等级为10, 这里设置每吃到5次食物就升一级
- 达到最高等级10时弹出获胜提示,但不终止游戏
- 设置禁止直接掉头
- 有碰撞检测,碰到边界或蛇自身游戏结束
效果展示
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
/* 设置盒子大小包含边框和内边距大小 */
box-sizing: border-box;
}
#main {
/* 由于设置了box-sizing: border-box;以下的宽高就包含了边框和内边距 */
width: 360px;
height: 420px;
border: 10px solid #000;
border-radius: 20px;
background-color: #b7d4a8;
/* 居中显示 */
margin: 50px auto;
}
#stage {
position: relative;
/* stage界面宽高应是小方块10px的倍数, */
width: 304px;
height: 304px;
border: 2px solid #000;
margin: 20px auto;
}
#food {
position: absolute;
width: 10px;
height: 10px;
background-color: orange;
border-radius: 50%;
}
#snake>div {
position: absolute;
width: 10px;
height: 10px;
background-color: #000;
border: 1px solid #b7d4a8;
}
#info {
display: flex;
justify-content: space-between;
width: 304px;
font: bold 20px Courier;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="main">
<div id="stage">
<div id="food"></div>
<div id="snake">
<div></div>
</div>
</div>
<div id="info">
<div>SCORE:<span id="score">0</span></div>
<div>LEVEL:<span id="level">0</span></div>
</div>
</div>
<script>
// 获取蛇的容器
const snake = document.getElementById("snake")
// 获取蛇身
const snakes = snake.getElementsByTagName("div")
const food = document.getElementById("food")
const scoreSpan = document.getElementById("score")
const levelSpan = document.getElementById("level")
let score = 0
let level = 0
function changeFood() {
// 生成0-290的随机数,限定0-290的原因是食物要在stage的范围内
// Math.random()生成0-1的随机数(不包含0,1),Math.floor()向下取整
// 加一的目的是避免食物一开始就生成在蛇头位置,从而导致一开始蛇就吃到食物然后增长撞到墙的情况
// 犯了一个错误,导致找了很久的错误,错误写法:Math.floor(Math.random() * 30) * 10+1, 这样导致食物坐标永远不是10的倍数,即蛇头坐标永远不会等于食物坐标,导致蛇永远吃不到食物
let x = Math.floor(Math.random() * 29 + 1) * 10
let y = Math.floor(Math.random() * 29 + 1) * 10
// 别忘了加单位
food.style.left = x + "px"
food.style.top = y + "px"
}
changeFood()
const keyArr = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]
// 设置键值方向相反的对象,以减少设置禁止直接掉头时判断语句的多次书写
const reObj = {
ArrowUp: "ArrowDown",
ArrowDown: "ArrowUp",
ArrowLeft: "ArrowRight",
ArrowRight: "ArrowLeft"
}
// dir用于接收keyArr范围内的按键名
let dir
document.addEventListener("keydown", (event) => {
// 判断按下的按键是否是数组里的4个方向键,只有方向键会赋值给dir。这样能避免按下其他按键时中断蛇的运动
if (keyArr.includes(event.key)) {
// 设置禁止掉头
// snakes.length < 2表示蛇身只有一节时是可以直接掉头的
if (snakes.length < 2 || reObj[dir] !== event.key)
dir = event.key
}
})
// 为了避免多个结点同时移动带来的开销,由贪吃蛇移动规律知,我们可以只移动蛇尾到目标位置,然后将蛇尾设置为新的蛇头,这样可以实现移动整个蛇身的视觉效果
setTimeout(function move() {
let head = snakes[0] // 这行代码应该写到定时器里面,这样才能每次更新head元素节点
// 获取蛇头坐标
let x = head.offsetLeft
let y = head.offsetTop
// 根据按下的方向键计算将要移动的位置
switch (dir) {
case "ArrowUp":
y -= 10
break;
case "ArrowDown":
y += 10
break;
case "ArrowLeft":
x -= 10
break;
case "ArrowRight":
x += 10
break;
}
// 判断是否吃到食物
if (head.offsetTop === food.offsetTop &&
head.offsetLeft === food.offsetLeft) {
// 每次吃到食物都要改变食物的位置
changeFood()
// 吃到食物后蛇身增加一个节点
snake.insertAdjacentHTML("beforeend", "<div></div>")
// 修改分数
score++
scoreSpan.textContent = score
// 判断是否升级
if (score % 5 === 0 && level < 10) {
level++
levelSpan.textContent = level
}
// 升到10级弹出通关信息
if (level === 10) {
alert("Congratulations, you win!!!")
}
}
// 检测蛇是否超出stage边界
if (x < 0 || x > 290 || y < 0 || y > 290) {
alert("Oops,蛇撞到墙了,GAME OVER!")
return
}
// 检测蛇是否撞到自己,即检测尾部将要移动的位置是否和除尾部以外的结点重合,所以这里不用检测蛇尾的坐标是否等于(x,y),故循环条件是i<snakes.length-1而不是i<snakes.length
for (let i = 0; i < snakes.length - 1; i++) {
if (snakes[i].offsetLeft === x && snakes[i].offsetTop === y) {
alert("Oops,蛇撞到自己了,GAME OVER!")
return
}
}
// 因为每次都是尾巴在移动,这样看起来就像蛇整体在移动
// 获取蛇尾
let tail = snakes[snakes.length - 1]
// 移动蛇尾
tail.style.left = x + "px"
tail.style.top = y + "px"
// 蛇尾节点移动位置后还是蛇尾,所以应该修改html结构,将蛇尾节点插入到蛇容器的第一个结点位置前,使之成为新的蛇头
snake.insertAdjacentElement("afterbegin", tail)
// 注意后面的定时器时间由level决定
setTimeout(move, 180 - level * 10)
}, 180)
</script>
</body>
</html>