<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>贪吃蛇</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#main{
box-sizing: border-box;
height: 420px;
width: 360px;
margin: 50px auto;
border: 10px solid black ;
background-color: seagreen;
border-radius: 20px;
}
#stage{
width: 304px;
height: 304px;
border: 2px solid black;
margin: 20px auto;
position: relative;
}
#snake>div{
width: 10px;
height: 10px;
background-color: black;
position:absolute;
border: 1px solid #b7d4a8;
}
#food{
width: 10px;
height: 10px;
background-color: black;
position: absolute;
top: 100px;
left: 120px;
display: flex;
flex-flow:wrap ;
}
#food>div{
width: 5px;
height: 5px;
background-color: black;
transform:rotate(45deg) ;
}
#info{
width: 304px;
margin: 0px auto;
display: flex;
justify-content: space-between;
font: bold 20px courier;
}
</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>分数:<span id="score">0</span></div>
<div>等级:<span id="level">1</span></div>
</div>
</div>
<script type="text/javascript">
/*
1.禁止掉头
2.
*/
// 获取蛇的容器
const snake=document.getElementById("snake");
// 获取蛇的各个部分
const snakes = snake.getElementsByTagName("div");
const head=snakes[0];
// 获取食物
const food=document.getElementById("food");
/*
键盘事件只能给可以获取焦点的元素或者是document
*/
let dir;
const keyArr=["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"]
/*
游戏禁止调头:
1.身体超过2
2.不能是相反的方向
*/
// 创建一个对象
const reObj={
ArrowUp:"ArrowDown",
ArrowDown:"ArrowUp",
ArrowLeft:"ArrowRight",
ArrowRight:"ArrowLeft",
}
// 创建一个变量来记录按键的状态
let keyActive = true
// 获取分数和level的span
const scoreSpan = document.getElementById("score");
const levelSpan = document.getElementById("level");
let score=0;
let level=0;
// 食物的坐标应该在0-290之间
function changeFood(){
const x= Math.floor(Math.random()*30)*10
const y= Math.floor(Math.random()*30)*10
food.style.left=x+"px";
food.style.top=y+"px";
}
document.addEventListener("keydown",(event)=>{
// 通过事件对象可以读取用户按的是哪个
// console.log(event.key)
if(keyActive && keyArr.includes(event.key)){
if(snakes.length>2||reObj[dir]!==event.key){
dir=event.key;
keyActive=false;
}
}
})
setTimeout(function move(){
const head=snakes[0];
//获取蛇头的坐标
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){
// console.log("吃到食物了");
// 改变食物的位置
changeFood();
//增加蛇的身体
snake.insertAdjacentHTML("beforeend","<div/>")
score++;
scoreSpan.textContent=score;
//检查等级
if(score%3===0 &&level<14){
level++;
levelSpan.textContent=level+1;
}
}
/*
判断游戏是否结束:
1.撞墙
2.撞自己
*/
if(x<0 || x>290 || y<0 || y>290){
//游戏结束
alert("撞墙了,游戏结束")
return
}
if(dir){
//判断是否撞到自己
for(let 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.left=x+"px";
tail.style.top=y+"px";
//将尾巴的位置移到蛇头的位置
snake.insertAdjacentElement("afterbegin",tail);
keyActive = true;
setTimeout(move,300-level*20);
},30)
</script>
</body>
</html>
总结:学习js过程中,最大感悟就是先构思,由小见大,从局部到整体实现功能,在功能实现的基础上,再一步一步优化代码,实现代码的简洁,有效性的提升。