这是本菜鸡大二时写的，代码很辣鸡，但是是一份懵懂的回忆...
提前声明，我做的这个游戏有个BUG，目前我无法解决。BUG为，同一个方向连续按两次以上，会使得贪吃蛇或者一种“神功”。
代码如下（阁下如果需要复制粘贴过去试一下效果的话，务必把代码中所有的路径都修改一下，别问为什么。）
思路为：
- 建立一个大大的div，然后这个div里面有20x30=600个小div。
- 蛇的走动，是靠一个数组来实现。这个数组储存着蛇身子每个部分所在的div的ID，每走一步，就把前面的传递给后面的。比如把第3号的数据传给第2号，第2号的数据传给第1号，第一号是指蛇头的头部，数组的第一个怎么变？这得看是蛇是向哪个方向动啦！
<!DOCTYPE html>
<html>
<head>
<title>贪吃蛇消除无聊时光！</title>
<meta charset="utf-8">
<style>
div {
height: 1.9rem;
width: 1.9rem;
padding: 0;
margin: 0;
border: 0.05rem solid purple;
box-sizing: content-box;
float: left;
border-radius: 2%;
/* 所有的小div的样式在这里*/
}
p, h2 {
text-align: center;
font-size: 1.2rem;
}
div#map {
position: absolute;
left: 15%;
box-sizing: content-box;
border: 12px double purple;
background-origin: content-box;
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url(image/snakebackground.jpg);
/*大div的样式在这里，采用绝对定位*/
padding: 0;
margin: 0;
width: 60rem;
height: 40rem;
}
#begin {
display: block;
height: 3rem;
width: 7rem;
font-size: 1.5rem;
border: 2px solid black;
background-color: yellow;
/*这是一个button的样式这个button是用来开始游戏的，它的样式没什么卵用，丢掉也不影响游戏*/
border-radius: 30%;
}
</style>
</head>
<body bgcolor="#AAA">
<h2>欢迎来玩消磨时光的贪吃蛇！</h2>
<p>W:控制方向上，A：控制方向左，S：控制方向下，D：：控制方向右</p>
<p>按左边的开始游戏按键可以开始游戏</p>
<div id="map">
</div>
<script>
var x = document.getElementById("map");
for (var i = 0; i < 600; i++) {
var onecell = document.createElement("div");
x.appendChild(onecell);
}//创建600个div子元素
var y = document.getElementsByTagName("div");
for (var i = 1; i < 601; i++) {
var temp = "";
if ((i - 1) % 30 + 1 < 10) {
temp = "0" + ((i - 1) % 30 + 1);
y[i].id = Math.ceil(i / 30) + "." + temp;
} else {
y[i].id = Math.ceil(i / 30) + "." + ((i - 1) % 30 + 1);
}
y[i].style.color = "gray";
y[i].style.textAlign = "center";
y[i].style.lineHeight = "2rem";//给这600个子元素添加ID名，这个ID名的格式是xx.xx，前面的xx是第×行的意思，后面的xx是第几列的意思，以及一些样式
}
for (var i = 1; i < 31; i++) {
if (i < 10) {
var z = document.getElementById(1 + ".0" + i);
z.style.backgroundImage = "url(image/boom.jpg)";
} else {
z = document.getElementById(1 + "." + i);
z.style.backgroundImage = "url(image/boom.jpg)";
}
}
for (var i = 1; i < 31; i++) {
if (i < 10) {
var z = document.getElementById(20 + ".0" + i);
z.style.backgroundImage = "url(image/boom.jpg)";
} else {
var z = document.getElementById(20 + "." + i);
z.style.backgroundImage = "url(image/boom.jpg)";
}
}
for (var i = 2; i < 20; i++) {
var z = document.getElementById(i + ".01");
z.style.backgroundImage = "url(image/boom.jpg)";
}
for (var i = 2; i < 20; i++) {
var z = document.getElementById(i + "." + 30);
z.style.backgroundImage = "url(image/boom.jpg)";
} //这4个for循环，目的是给四边放上炸弹，变得好看，表示边界。
var mySnake = new Array();
mySnake[0] = "11.07";
mySnake[1] = "11.06";
mySnake[2] = "11.05";
var snakeHead = document.getElementById(mySnake[0]);
snakeHead.style.backgroundImage = "url(image/huaji.jpg)";
var snakeBody1 = document.getElementById(mySnake[1]);
snakeBody1.style.backgroundColor = "red";
var snakeBody2 = document.getElementById(mySnake[2]);
snakeBody2.style.backgroundColor = "red";//初始化蛇的位置
function startright() {
document.getElementById(mySnake[0]).style.backgroundImage = "";
for (var i = 1; i < mySnake.length; i++) {
document.getElementById(mySnake[i]).style.backgroundColor = "";
}
for (var i = mySnake.length; i >= 2; i--) {
mySnake[i - 1] = mySnake[i - 2];
}
mySnake[0] = ((mySnake[0] * 100 + 1) / 100).toFixed(2) + '';
//一定要保留两位数字，比如11.20变成11.2，找不到ID
if (mySnake[0] * 100 % 100 > 29) {
clearInterval(right);
alert("Game Over!" + " " + " " + '你的战绩为:' + mySnake.length);
document.write("<a href='../贪吃蛇/index.html'>重新开始</a>");
}
document.getElementById(mySnake[0]).style.backgroundImage = "url(image/huaji.jpg)";
for (i = 1; i < mySnake.length; i++) {
document.getElementById(mySnake[i]).style.backgroundColor = "red";
// 这是控制蛇向右走的函数，并且触碰边界，会死..
}
}
function startleft() {
document.getElementById(mySnake[0]).style.backgroundImage = "";
for (var i = 1; i < mySnake.length; i++) {
document.getElementById(mySnake[i]).style.backgroundColor = "";
}
for (var i = mySnake.length; i >= 2; i--) {
mySnake[i - 1] = mySnake[i - 2];
}
mySnake[0] = ((mySnake[0] * 100 - 1) / 100).toFixed(2) + '';
//一定要保留两位数字，不然11.20会变成11.2，找不到ID
if (mySnake[0] * 100 % 100 < 2) {
clearInterval(left);
alert("Game Over!" + " " + " " + '你的战绩为:' + mySnake.length);
document.write("<a href='../贪吃蛇/index.html'>重新开始</a>");
}
document.getElementById(mySnake[0]).style.backgroundImage = "url(image/huaji.jpg)";
// 这是控制蛇向左走的函数，并且触碰边界，会死..
for (i = 1; i < mySnake.length; i++) {
document.getElementById(mySnake[i]).style.backgroundColor = "red";
}
}
function startup() {
document.getElementById(mySnake[0]).style.backgroundImage = "";
for (var i = 1; i < mySnake.length; i++) {
document.getElementById(mySnake[i]).style.backgroundColor = "";
}
for (var i = mySnake.length; i >= 2; i--) {
mySnake[i - 1] = mySnake[i - 2];
}
mySnake[0] = (parseFloat(mySnake[0]) - 1).toFixed(2) + ''; //一定要保留两位数字，不然11.20会变成11.2，找不到ID
if (mySnake[0] < 2) {
clearInterval(up);
alert("Game Over!" + " " + " " + '你的战绩为:' + mySnake.length);
document.write("<a href='../贪吃蛇/index.html'>重新开始</a>");
}
document.getElementById(mySnake[0]).style.backgroundImage = "url(image/huaji.jpg)";
for (i = 1; i < mySnake.length; i++) {
document.getElementById(mySnake[i]).style.backgroundColor = "red";
// 这是控制蛇向上走的函数，并且触碰边界，会死..
}
}
function startdown() {
document.getElementById(mySnake[0]).style.backgroundImage = "";
for (var i = 1; i < mySnake.length; i++) {
document.getElementById(mySnake[i]).style.backgroundColor = "";
}
for (var i = mySnake.length; i >= 2; i--) {
mySnake[i - 1] = mySnake[i - 2];
}
mySnake[0] = (parseFloat(mySnake[0]) + 1).toFixed(2) + ''; //一定要保留两位数字，不然11.20会变成11.2，找不到ID
if (mySnake[0] > 20) {
clearInterval(down);
alert("Game Over!" + " " + " " + '你的战绩为:' + mySnake.length);
// 这是控制蛇向下走的函数，并且触碰边界，会死..
document.write("<a href='../贪吃蛇/index.html'>重新开始</a>");
}
document.getElementById(mySnake[0]).style.backgroundImage = "url(image/huaji.jpg)";
for (i = 1; i < mySnake.length; i++) {
document.getElementById(mySnake[i]).style.backgroundColor = "red";
}
}
right = setInterval("startright()", 300);
left = setInterval("startleft()", 300);
down = setInterval("startdown()", 300);
up = setInterval("startup()", 300);
clearInterval(up);
clearInterval(left);
clearInterval(down);
clearInterval(right);
function start() {
up = setInterval("startup()", 300);
var bb = document.getElementById("begin");
bb.style.backgroundColor = "red";
setInterval("createFood()", 3000);
document.onkeydown = function (event) {
var e = event || window.event || arguments.callee.caller.arguments[0];
if (e && e.keyCode == 68) {
// 按 D/d 那就往右走
right = setInterval("startright()", 300);
clearInterval(up);
clearInterval(left);
clearInterval(down);
} else if (e && e.keyCode == 65) {
// 按 A/a 那就往左走
left = setInterval("startleft()", 300);
clearInterval(right);
clearInterval(up);
clearInterval(down);
} else if (e && e.keyCode == 83) {
// 按 S/s 那就往下走
down = setInterval("startdown()", 300);
clearInterval(right);
clearInterval(left);
clearInterval(up);
} else if (e && e.keyCode == 87) {
// 按 W/w 那就往上走
up = setInterval("startup()", 300);
clearInterval(right);
clearInterval(left);
clearInterval(down);
}
};
}
function back() {
var bb = document.getElementById("begin");
bb.style.backgroundColor = "yellow";
//这个是控制button的样式的JS代码，没什么卵用，可以不看
}
var checking = new Array();
checking[0] = "useless";
function createFood() {
var idone = Math.floor(Math.random() * 18 + 2);
var idtwo = Math.floor(Math.random() * 28 + 2);
if (idtwo < 10) {
idtwo = "0" + idtwo;
}
// 随机生成食物的函数
var idAll = idone + "." + idtwo;
var food = document.getElementById(idAll);
food.style.backgroundImage = "url(image/food.jpg)";
checking[checking.length] = idAll;
}
function check() {
for (i = 1; i < checking.length; i++) {
if (mySnake[0] == checking[i]) {
mySnake[mySnake.length] = checking[i];
//检查头部有没有碰到生成的食物，碰到就是吃到的意思。
checking[i] = '';
}
}
setTimeout("check()", 50);
}
check();
</script>
<button onmousedown="start()" id="begin" onmouseup="back()">开始游戏</button>
</body>
</html>
京公网安备 11010502036488号