教你用的原生js开发一款较完美贪吃蛇游戏
我们做贪吃蛇游戏的时候先讲下基本思路：
1、贪吃蛇的运动坐标需要存入一个数组，这个数组不仅是蛇的行走路线，还是判断蛇蛋生成地点是否合理、设是否吃到蛇蛋和游戏结束的判断条件
2、蛇的运动需要定时器来不间断的执行
3、蛇头方向的控制
4、蛇蛋要随机生成在游戏框内，并且不能和蛇身重叠
5、利用数组地址判断蛇是否吃到蛇蛋，并添加蛇身长度，同时消除旧蛇蛋生成新蛇蛋
接下来直接上代码，可能有点多，但是比较的全面游戏机制都详细讲解，希望各位看官能耐心观看：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
position: relative;
}
#box {
width: 300px;
height: 300px;
border: 10px solid #999;
margin: 0 auto;
position: relative;
background: #000;
}
#box>div {
width: 10px;
height: 10px;
border-radius: 50%;
position: absolute;
background: #fff;
}
#box>div.head {
background: red;
left: 50%;
top: 50%;
z-index: 1;
}
p {
display: block;
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
}
button {
position: relative;
top: 10px;
left: 50%;
}
#stop {
display: none;
width: 200px;
height: 200px;
position: fixed;
margin: 0 auto;
top: 30px;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
background: #fff;
border: 1px solid #333;
opacity: .5;
}
#stop .title {
margin: 0;
width: 200px;
height: 100px;
text-align: center;
line-height: 100px;
color: #000;
margin: 0 auto;
font-weight: 700;
}
#stop a {
text-decoration: none;
display: block;
width: 100px;
height: 40px;
text-align: center;
line-height: 40px;
color: #fff;
margin: 0 auto;
background: #f50;
}
#asd {
display: none;
width: 200px;
height: 200px;
position: relative;
top: 20px;
left: 50%;
margin-left: -100px;
}
#asd .left {
position: absolute;
width: 50px;
height: 50px;
color: #fff;
background: #f50;
border-radius: 50%;
text-align: center;
line-height: 50px;
cursor: pointer;
top: 50px;
}
#asd .right {
position: absolute;
width: 50px;
height: 50px;
color: #fff;
background: #f50;
border-radius: 50%;
text-align: center;
line-height: 50px;
cursor: pointer;
top: 50px;
right: 0;
}
#asd .top {
position: absolute;
width: 50px;
height: 50px;
color: #fff;
background: #f50;
border-radius: 50%;
text-align: center;
line-height: 50px;
cursor: pointer;
top: 0px;
left: 75px;
}
#asd .bottom {
position: absolute;
width: 50px;
height: 50px;
color: #fff;
background: #f50;
border-radius: 50%;
text-align: center;
line-height: 50px;
cursor: pointer;
top: 100px;
left: 75px;
}
</style>
</head>
<body>
<!-- 游戏框 -->
<div id="box">
<!-- 蛇头 -->
<div class="head"> </div>
</div>
<!-- 游戏开始按钮 -->
<button id="btn">开始</button>
<!-- 结束游戏界面 -->
<div id="stop">
<div class="title">
你触碰了自己！
</div>
<a id="a_href" href="javascript:void(0)">再来一次</a>
</div>
<!-- 方向控制按钮 -->
<div id="asd">
<div class="left">左</div>
<div class="right">右</div>
<div class="top">上</div>
<div class="bottom">下</div>
</div>
<script>
var box_ele = document.getElementById("box");
var head_ele = document.querySelector(".head");
var divs_ele = box_ele.getElementsByTagName("div");//子元素
var stop = document.getElementById("stop");
var btn = document.getElementById("btn");
var asd = document.getElementById("asd");
var aHref = document.getElementById("a_href");
var left_botton = document.getElementsByClassName("left")[0];
var right_botton = document.getElementsByClassName("right")[0];
var top_botton = document.getElementsByClassName("top")[0];
var bottom_botton = document.getElementsByClassName("bottom")[0];
var box_heih = parseInt(getComputedStyle(box_ele).height);// 游戏框高
var box_wide = parseInt(getComputedStyle(box_ele).width);;//游戏框宽
var head_ele_left = head_ele.offsetLeft; //蛇头初始位置left
var head_ele_top = head_ele.offsetTop; //蛇头初始位置top
var arr = [{ x: head_ele_left, y: head_ele_top }, { x: head_ele_left - 10, y: head_ele_top }] //位置记录数组,预留一个位置给生成的孩子
var timer = null;//定时器开关
var keys = "right";//方向记录器
var snakeSpeed = 200; // 蛇 的速度
// 开始游戏
btn.onclick = function () {
//隐藏开始按钮
btn.style.display = "none";
//方向控制按钮出现
asd.style.display = "block";
//生成第一个子
randomChild();
//清除一次
clearInterval(timer);
//贪吃蛇运动函数持续执行
timer = setInterval(function () {
//贪吃蛇运动函数
snakeMotion();
}, snakeSpeed);//蛇头速度
}
//重新开始
aHref.onclick = function () {
window.location.reload();
}
//贪吃蛇运动函数
function snakeMotion() {
// 判断蛇头方向
switch (keys) {
case "left":
head_ele_left -= 10; break;
case "right":
head_ele_left += 10; break;
case "top":
head_ele_top -= 10; break;
case "bottom":
head_ele_top += 10; break;
}
// 根据蛇头位置判断贪食蛇是否出界 并让贪食蛇回归;
if (head_ele_left < 0) {
head_ele_left = box_wide - 10;
}
if (head_ele_left >= box_wide) {
head_ele_left = 0;
}
if (head_ele_top >= box_heih) {
head_ele_top = 0;
}
if (head_ele_top < 0) {
head_ele_top = box_heih - 10;
}
arr.unshift({ x: head_ele_left, y: head_ele_top });// 每次蛇头运动添加最新的蛇头位置
arr.splice(arr.length - 1, 1);//删除最后一个蛇尾位置
snakeCollision();//每次运动判断蛇头是否吃到蛇蛋
snakeOver();//每次运动判断蛇头是否吃到蛇身
//逐个将新位置赋予每个蛇元素
for (var i = 0; i < divs_ele.length; i++) {
divs_ele[i].style.top = arr[i].y + "px";
divs_ele[i].style.left = arr[i].x + "px";
}
}
//判断蛇头是否吃到蛇蛋
function snakeCollision() {
//如果蛇头位置和蛇蛋位置重合，那么蛇蛋消失，再随机生成一个蛇蛋，并且将蛇身长度加一
if (head_ele_left === box_ele.lastElementChild.offsetLeft && head_ele_top === box_ele.lastElementChild.offsetTop) {
box_ele.removeChild(box_ele.lastElementChild); //如果蛇头位置和蛇蛋位置重合，那么蛇蛋消失
var div_ele = document.createElement("div"); // 并且添加一个新的蛇身
box_ele.appendChild(div_ele);
arr.push(arr[arr.length - 1]);//蛇位置数组添加一个新的给新生成的蛇身
randomChild();// 再随机生成一个蛇蛋
}
}
//随机生成蛇蛋
function randomChild() {
var ele = document.createElement("p");//创建一个蛇蛋
var mark = true;//判断生成的蛇蛋位置是否合理的开关
var p_ele_top = parseInt(Math.random() * (box_heih / 10)) * 10;//设置点随机的位置
var p_ele_left = parseInt(Math.random() * (box_wide / 10)) * 10;//设置点随机的位置
//判断蛇蛋是否生成在蛇身子
for (var i = 0; i < arr.length; i++) {
if (arr[i].x === p_ele_left && arr[i].y === p_ele_top) {
mark = false;
}
}
// 蛇蛋位置如果不在蛇身，生成蛇蛋在游戏框
if (mark) {
ele.style.left = p_ele_left + "px";
ele.style.top = p_ele_top + "px";
ele.style.background = randomColor();
ele.className = "p";
box_ele.appendChild(ele);
} else {
//如果在，调用randomChild()重新生成 蛇蛋位置
return randomChild();
}
}
//游戏结束条件
function snakeOver() {
var mark = false; //游戏终止开关 为true 结束游戏
//循环遍历设位置数组
for (var i = 1; i < arr.length; i++) {
// 如果新蛇头位置和蛇身位置重合，那么游戏终止开关打开
if (arr[i].x === head_ele_left && arr[i].y === head_ele_top) {
mark = true;
break;
}
}
// 如果游戏终止开关打开，结束游戏
if (mark) {
clearInterval(timer);//关闭定时器，结束游戏
stop.style.display = "block";//结束界面出现
}
}
//屏幕操作方向
left_botton.addEventListener("click", function () {
if (keys === "right") return;
keys = "left";
});
right_botton.addEventListener("click", function () {
if (keys === "left") return;
keys = "right";
});
top_botton.addEventListener("click", function () {
if (keys === "bottom") return;
keys = "top";
});
bottom_botton.addEventListener("click", function () {
if (keys === "top") return;
keys = "bottom";
});
//键盘上下左右操作方向
document.addEventListener("keydown", function (evt) {
var e = evt || event;
switch (e.keyCode) {
case 40:
if (keys === "top") {
break;
}
keys = "bottom";
break;
case 39:
if (keys === "left") {
break;
}
keys = "right";
break;
case 38:
if (keys === "bottom") {
break;
}
keys = "top";
break;
case 37:
if (keys === "right") {
break;
}
keys = "left";
break;
}
});
//随机颜色 为了让蛇蛋好看点
function randomColor() {
var arr = ["#f50", "#d687ee", "rgb(4,131,255)", "rgb(93,26,235)", "#ddb651", "#008c8c", "#999", "#fff"]
return arr[parseInt(Math.random() * arr.length)];
}
</script>
</body>
</html>