贪吃蛇-javascript

demo介绍

这是一次js实战项目 来回顾一下学到的js知识 同时也复习了一下盒子模型 页面布局相关内容

实现效果:

通过键盘即可控制贪吃蛇移动 撞击身体或者围墙 游戏结束

页面布局

其中 食物 通过自身增加几个子元素 让子元素旋转 达成花筒效果

<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

#main {
height: 420px;
width: 360px;
border: 10px #000 solid;
background-color: #b7d4a8;
border-radius: 20px;
margin: 50px auto;
}

#stage {
width: 304px;
height: 304px;
border: 2px solid #000;
margin: 20px auto;
position: relative;
}

#snake > div {
width: 10px;
height: 10px;
background-color: #000;
position: absolute;
border: 1px solid #b7d4a8;
}

#food {
width: 10px;
height: 10px;
position: absolute;
top: 100px;
left: 120px;
display: flex;
flex-flow: wrap;
}

#food > div {
width: 5px;
height: 5px;
background-color: #000;
transform: rotate(45deg);
}

#info {
width: 304px;
margin: 0px auto;
display: flex;
justify-content: space-between;
font: bold 20px courier;
}
</style>

<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">100</span></div>
<div>LEVEL:<span id="level">1</span></div>
</div>
</div>

食物

创建一个函数 来随机食物出现位置

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";
}
changeFood()

身体移动

给页面增加一个监听期, 通过监听键盘变化 来控制蛇的移动
这里通过 移动蛇尾 来达成移动效果

const snake =document.getElementById("snake");
const snakes=snake.getElementsByTagName("div");

// 键盘事件 控制社的移动
let keyActive = true
let dir
const keyArr = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]
// 创建一个对象
const reObj = {
ArrowUp: "ArrowDown",
ArrowDown: "ArrowUp",
ArrowLeft: "ArrowRight",
ArrowRight: "ArrowLeft",
}

/* 
绑定按键事件keydown keyup 
- 键盘事件只能绑定给可以获取焦点的元素或者是document    
*/
document.addEventListener("keydown", (event) => {
// 设置方向
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
}

// 获取尾巴 
const tail = snakes[snakes.length - 1]
// 移动蛇的位置
tail.style.left = x + "px"
tail.style.top = y + "px"
// 将尾巴移动到蛇头的位置
snake.insertAdjacentElement("afterbegin", tail)
keyActive = true;

吃食物长身体

判断是否吃到事务

// 检查蛇是否吃到食物
if (
    head.offsetTop === food.offsetTop &&
    head.offsetLeft === food.offsetLeft
) {
    //1.改变食物的位置
    changeFood()
    //2.增加蛇的身体
    snake.insertAdjacentHTML("beforeend", "<div/>")
    }

碰撞检测

  if (x < 0 || x > 290 || y < 0 || y > 290) {
    alert("撞墙了！游戏结束！")
    // 游戏结束
    return
}

// 判断是否撞到自己
for (let i = 0; i < snakes.length - 1; i++) {
    if (
        snakes[i].offsetLeft === x &&
        snakes[i].offsetTop === y
    ) {
        alert("撞到自己了，游戏结束！")
        return
    }
}

等级与速度

 score++
    scoreSpan.textContent = score

    // 检查等级
    if(score % 1 === 0 && level < 14){
        level++
        levelSpan.textContent = level+1
    }

通过定时器 来控制速度

setTimeout(function move(){
...
setTimeout(move, 300 - level * 20);
}, 300)

---