目录
思路
蛇拥有的行为：
能移动、吃食物、变长(加尾巴)
1、蛇身：
编写蛇头、蛇身
通过计时间隔向某方向移动
检测有没有吃到食物，吃到则加尾巴
判断碰撞(蛇吃食物)
2、食物：
编写食物
随机出现
通过计时间隔某时间段出现一个
结果
代码
HTML部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="game.css">
<meta name="author" content="一只咸鱼">
<title>贪吃蛇</title>
</head>
<body>
<script src="game.js"></script>
</body>
</html>
CSS部分
* {
padding: 0;
border: 0;
margin: 0;
}
body {
/* background: url("/image/uuu.jpeg"); */
background-color: #31A6FF59;
}
.head {
position: absolute;
z-index: 2;
width: 30px;
height: 30px;
background: url("/images/dog.png") no-repeat 0;
}
.MainBody {
position: absolute;
}
.body {
clear: both;
position: relative;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
background-color: red;
border-radius: 15px;
}
JavaScript部分
var arr = []; //蛇身
var bo = document.body; //获取主体，用于添加元素
//头
var t0 = document.createElement('div');
t0.className = "head";
t0.style.top = '300px';
t0.style.left = '408px';
t0.style.width = '30px';
t0.style.height = '30px';
arr.push(t0);
bo.insertBefore(t0, bo.lastChild);
//身体1
var t1 = document.createElement('div');
t1.className = "MainBody";
t1.style.top = '288px';
t1.style.left = '408px';
t1.style.width = '30px';
t1.style.height = '30px';
var t11 = document.createElement('div');
t11.className = "body";
t1.appendChild(t11);
arr.push(t1);
bo.insertBefore(t1, bo.lastChild);
//身体2
var t2 = document.createElement('div');
t2.className = "MainBody";
t2.style.top = '276px';
t2.style.left = '408px';
t2.style.width = '30px';
t2.style.height = '30px';
var t22 = document.createElement('div');
t22.className = "body";
t2.appendChild(t22);
arr.push(t2);
bo.insertBefore(t2, bo.lastChild);
//身体3
var t3 = document.createElement('div');
t3.className = "MainBody";
t3.style.top = '264px';
t3.style.left = '408px';
t3.style.width = '30px';
t3.style.height = '30px';
var t33 = document.createElement('div');
t33.className = "body";
t3.appendChild(t33);
arr.push(t3);
bo.insertBefore(t3, bo.lastChild);
//身体4
var t4 = document.createElement('div');
t4.className = "MainBody";
t4.style.top = '252px';
t4.style.left = '408px';
t4.style.width = '30px';
t4.style.height = '30px';
var t44 = document.createElement('div');
t44.className = "body";
t4.appendChild(t44);
arr.push(t4);
bo.insertBefore(t4, bo.lastChild);
//身体5
var t5 = document.createElement('div');
t5.className = "MainBody";
t5.style.top = '240px';
t5.style.left = '408px';
t5.style.width = '30px';
t5.style.height = '30px';
var t55 = document.createElement('div');
t55.className = "body";
t5.appendChild(t55);
arr.push(t5);
bo.insertBefore(t5, bo.lastChild);
//身体6
var t6 = document.createElement('div');
t6.className = "MainBody";
t6.style.top = '240px';
t6.style.left = '408px';
t6.style.width = '30px';
t6.style.height = '30px';
var t66 = document.createElement('div');
t66.className = "body";
t6.appendChild(t66);
arr.push(t6);
bo.insertBefore(t6, bo.lastChild);
//存储前一个部分的位置
var pathX = []; //left
var pathY = []; //top
for (j = 0, len = arr.length; j < len; j++) {
pathX.push(null);
}
for (j = 0, len = arr.length; j < len; j++) {
pathY.push(null);
}
var direction; //当前前进的方向
window.document.onkeydown = disableRefresh;
function disableRefresh(evt){ //监听键盘方向键
var evt = window.event;
if (evt.keyCode == 37) { //左
direction = 'left';
} else if (evt.keyCode == 38) { //上
direction = 'up';
} else if (evt.keyCode == 39) { //右
direction = 'right';
} else if (evt.keyCode == 40) { //下
direction = 'down';
}
}
volume = 30;
//移动
setInterval(function() { //持续移动，根据direction控制方向
if (direction) {
pathX[0] = arr[0].offsetLeft;
pathY[0] = arr[0].offsetTop; //存储当前位置
if (direction == 'left' && arr[0].offsetLeft > 0) { //当前方向为左，则向左移动
arr[0].style.left = arr[0].offsetLeft - 12 + 'px';
} else if (direction == 'up' && arr[0].offsetTop > 0) { //当前方向为上，则向上移动
arr[0].style.top = arr[0].offsetTop - 12 + 'px';
} else if (direction == 'right' && arr[0].offsetLeft <= 1495) { //当前方向为右，则向右移动
arr[0].style.left = arr[0].offsetLeft + 12 + 'px';
} else if (direction == 'down' && arr[0].offsetTop <= 700) { //当前方向为下，则向下移动
arr[0].style.top = arr[0].offsetTop + 12 + 'px';
}
k = 0;
len = foods.length;
k < len;
flag = false;
while (k < len) { //检测有没有吃到食物
if (! ((30 + foods[k].offsetTop) < arr[0].offsetTop ||
(30 + arr[0].offsetLeft) < foods[k].offsetLeft ||
(30 + arr[0].offsetTop) < foods[k].offsetTop ||
(30 + foods[k].offsetLeft) < arr[0].offsetLeft)) {
child = document.getElementById(foods[k].id);
child.parentNode.removeChild(child);
foods.splice(k,1);
len--;
flag = true;
ttt = document.createElement('div'); //添加尾巴
ttt.className = "MainBody";
ttt.style.top = arr[arr.length-1].offsetTop + 'px';
ttt.style.left = arr[arr.length-1].offsetLeft + 'px';
ttt.style.width = volume + 'px';
ttt.style.height = volume + 'px';
tttt = document.createElement('div');
tttt.className = "body";
ttt.appendChild(tttt);
arr.push(ttt);
pathX.push(null);
pathY.push(null);
bo.insertBefore(ttt, bo.lastChild);
}
k++;
}
len = arr.length;
if (flag) {
len--;
}
for (j = 1; j < len; j++) { //根据前一个的位置移动
pathX[j] = arr[j].offsetLeft;
pathY[j] = arr[j].offsetTop;
arr[j].style.left = pathX[j-1] + 'px';
arr[j].style.top = pathY[j-1] + 'px';
}
}
},
20 //蛇移动的速度，单位为毫秒
)
// 食物
var foods = [];
var num = 0;
setInterval(function() {
var imgName = Math.floor((Math.random()*4)+1); //随机取四个食物的中其中一个
var x1 = Math.floor((Math.random()*1495)+1);
var y1 = Math.floor((Math.random()*700)+1);
var food = document.createElement('div');
food.id = "food" + num;
food.style = "position: absolute;width: 30px;height: 30px;background: url('/images/" + "food" + imgName + ".png');";
food.style.left = x1 + 'px';
food.style.top = y1 + 'px';
foods.push(food);
bo.insertBefore(food, bo.lastChild);
num++;
},
1000 //食物出现的速度，单位为毫秒
)
说明
其中的图片
文件存放
学习是让人愉快的事情！