<!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;
caret-color: transparent;
}
#main {
height: 460px;
width: 360px;
border: 10px solid #000;
background-color: #ca05b0;
border-radius: 20px;
margin: 50px auto;
}
#stage {
width: 304px;
height: 304px;
border: 2px solid rgb(0, 0, 0);
position: relative;
margin: 20px auto;
}
#snake div {
width: 10px;
height: 10px;
background-color: rgb(255, 255, 255);
position: absolute;
border: 2px solid black;
}
#food {
width: 10px;
height: 10px;
position: absolute;
top: 100px;
left: 120px;
display: flex;
flex-flow: wrap;
}
#food div {
width: 5px;
height: 5px;
background-color: rgb(13, 180, 41);
transform: rotate(45deg);
}
#info {
width: 304px;
margin: 0 auto;
display: flex;
justify-content: space-between;
font-weight: bold;
font-size: 20px;
font-family: courier;
}
.text{
height: 30px;
display: flex;
width: 304px;
margin:20px 40px 20px 20px;
font-weight: bold;
font-size: 30px;
font-family: courier;
color: white;
justify-content:flex-end;
}
</style>
</head>
<body>
<div id="main">
<div id="stage">
<div id="snake">
<div></div>
</div>
<div id="food">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div id="info">
<div>SCORE:<span id="score">0</span></div>
<div>LEVEL:<span id="level">1</span></div>
</div>
<div class="text"><span class="name"></span>的奇妙历险</div>
</div>
<script>
/*
绑定按键事件keydown keyup
-按键事件只能绑定可以获取焦点的元素或者是document
*/
//姓名
const name = document.querySelector(".name")
name.textContent = prompt("请输入玩家姓名!")
//获取分数、等级
const scoreSpan = document.getElementById("score")
const levelSpan = document.getElementById("level")
//获取蛇的容器
const snake = document.getElementById("snake")
const snakes = snake.getElementsByTagName("div")
//获取食物
const food = document.getElementById("food")
/*
食物的坐标在0-290之间，要是10的倍数
*/
function changeFood() {
//生成0-29的随机数
const x = Math.trunc(Math.random() * 29) * 10
const y = Math.trunc(Math.random() * 29) * 10
//设置食物坐标
food.style.left = x + "px"
food.style.top = y + "px"
}
//定义分数、等级变量
let score = 0
let level = 0
//定义按键状态
let keyActive = true
//定义禁止掉头对象
const dirObj = {
ArrowUp: "ArrowDown",
ArrowDown: "ArrowUp",
ArrowLeft: "ArrowRight",
ArrowRight: "ArrowLeft",
}
//定义有效方向数组
const keyArr = ["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp"]
//定义一个变量储存贪吃蛇行动方向
let dir
document.addEventListener("keydown", (event) => {
/* 通过事件对象可以读取到用户按的是那个按键 */
//判断按键是否有效
if (keyActive && keyArr.includes(event.key)) {
//禁止掉头
if (snakes.length < 2 || dirObj[dir] !== event.key) {
dir = event.key
keyActive = false
}
/*
禁止掉头
else if (dir === "ArrowUp" && event.key !== "ArrowDown") {
dir = event.key
} else if (dir === "ArrowDown" && event.key !== "ArrowUp") {
dir = event.key
} else if (dir === "ArrowLeft" && event.key !== "ArrowRight") {
dir = event.key
} else if (dir === "ArrowRight" && event.key !== "ArrowLeft") {
dir = event.key
} */
}
})
setTimeout(function move() {
//获取蛇头
const snakeHead = snakes[0]
//获取蛇头坐标
let x = snakeHead.offsetLeft
let y = snakeHead.offsetTop
switch (dir) {
case "ArrowUp":
y -= 10
break
case "ArrowDown":
y += 10
break
case "ArrowLeft":
x -= 10
break
case "ArrowRight":
x += 10
break
}
//判断是否吃到食物
if (
snakeHead.offsetTop === food.offsetTop &&
snakeHead.offsetLeft === food.offsetLeft
) {
//随机生成食物
changeFood()
//添加身体
snake.insertAdjacentHTML("beforeend", "<div></div>")
//加分
score++
scoreSpan.textContent = score
//等级提升
if (level < 13) {
level++
levelSpan.textContent = level
}
}
//判断是否碰墙
if (x < 0 || x > 290 || y < 0 || y > 290) {
alert("游戏结束~")
return
}
//判断是否撞到自己
for (i = 0; i < snakes.length - 1; i++) {
if (
snakes[i].offsetLeft === x && snakes[i].offsetTop === y
) {
alert("游戏结束~")
return
}
}
//获取尾巴
const tail = snakes[snakes.length - 1]
//移动蛇的位置
tail.style.top = y + "px"
tail.style.left = x + "px"
//尾巴替代蛇头
snake.insertAdjacentElement("afterbegin", tail)
keyActive = true
setTimeout(move, 220 - level ** 2)
}, 220 - level ** 2);
</script>
</body>
</html>
