<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>★贪吃蛇游戏★</title>
</head>
<body>
<script>
var map = {}; //地图对象
var food = {}; //食物对象
var snake = {}; //蛇对象
var score = 0; //分数
var timer = {}; //定时器对象
/*地图类*/
function Map()
{
this.weight = 1200;
this.height = 500;
this.color = "#008B8B";
this.position = "absolute";
this._map = null; //获取dom元素
this.show = function ()
{
this._map = document.createElement("div"); //创建div元素
this._map.style.width = this.weight + "px"; //设置div元素
this._map.style.height = this.height + "px";
this._map.style.backgroundColor = this.color;
this._map.style.position = this.position;
document.getElementsByTagName("body")[0].appendChild(this._map); //将创建的元素加到body标签
};
}
/*食物类*/
function Food()
{
this.weight = 20;
this.height = 20;
this.color = "#FFD700";
this.position = "absolute";
this._food = null; //dom元素
this.x = 0;
this.y = 0;
this.show = function ()
{
if(this._food == null)
{
this._food = document.createElement("div");
this._food.style.width = this.weight + "px";
this._food.style.height = this.height + "px";
this._food.style.position = this.position;
this._food.style.backgroundColor = this.color;
map._map.appendChild(this._food);
}
//为了防止随机的食物越界,加入floor这个方法
this.x = Math.floor(Math.random() * 60);
this.y = Math.floor(Math.random() * 25);
this._food.style.left = this.x * this.weight + "px";
this._food.style.top = this.y * this.height + "px";
};
}
/*蛇类*/
function Snake()
{
this.weight = 20;
this.height = 20;
this.position = "absolute";
this.direction = "";
this._bodySnake = [[10, 5, "red", null], [9, 5, "blue", null], [8, 5, "blue", null]]; //蛇的节数
this.setDirect = function (code)
{
switch(code)
{
case 37:
this.direction = "left";
break;
case 38:
this.direction = "up";
break;
case 39:
this.direction = "right";
break;
case 40:
this.direction = "down";
break;
default:
break;
}
};
this.show = function ()
{
for(var i = 0; i < this._bodySnake.length; i++)
{
if(this._bodySnake[i][3] == null)
{
this._bodySnake[i][3] = document.createElement("div");
this._bodySnake[i][3].style.width = this.weight + "px";
this._bodySnake[i][3].style.height = this.height + "px";
this._bodySnake[i][3].style.position = this.position;
this._bodySnake[i][3].style.backgroundColor = this._bodySnake[i][2];
map._map.appendChild(this._bodySnake[i][3]);
}
//固定
this._bodySnake[i][3].style.left = this._bodySnake[i][0] * this.weight + "px";
this._bodySnake[i][3].style.top = this._bodySnake[i][1] * this.height + "px";
}
};
//接受到用户输入后,坐标的变化和蛇的移动逻辑
this.move = function ()
{
var length = this._bodySnake.length - 1;
for(var i = length; i > 0; i--)
{
//让后面蛇身等于前面身
this._bodySnake[i][0] = this._bodySnake[i - 1][0];
this._bodySnake[i][1] = this._bodySnake[i - 1][1];
}
switch(this.direction)
{
case "left":
this._bodySnake[0][0] = this._bodySnake[0][0] - 1;
break;
case "right":
this._bodySnake[0][0] = this._bodySnake[0][0] + 1;
break;
case "up":
this._bodySnake[0][1] = this._bodySnake[0][1] - 1;
break;
case "down":
this._bodySnake[0][1] = this._bodySnake[0][1] + 1;
break;
default:
return;
}
//如果蛇吃到食物后
if(this._bodySnake[0][0] == food.x && this._bodySnake[0][1] == food.y)
{
var row = this._bodySnake[length][0];
var low = this._bodySnake[length][1];
score++; //分数加1
document.title = "分数:" + score + "分";
this._bodySnake.push([row, low, "red", null]);
food.show(); //显示食物
}
//蛇吃到自己后
for(var i = 1; i < this._bodySnake.length; i++)
{
if(this._bodySnake[0][0] == this._bodySnake[i][0] &&
this._bodySnake[0][1] == this._bodySnake[i][1])
{
alert("蛇吃到自己");
clearTimeout(timer);
return;
}
}
//蛇碰到墙壁
if(this._bodySnake[0][0] < 0 || this._bodySnake[0][0] > 59 ||
this._bodySnake[0][1] < 0 || this._bodySnake[0][1] > 24)
{
alert("蛇碰到墙壁死了");
clearTimeout(timer);
return;
}
this.show();
};
}
window.onload = function ()
{
map = new Map();
map.show();
food = new Food();
food.show();
snake = new Snake();
snake.show();
timer = setInterval("snake.move()", 100);
document.onkeydown = function ()
{
var code = 0;
if(window.event)
{
code = window.event.keyCode;
}
else
{
code = event.keyCode;
}
snake.setDirect(code);
};
}
</script>
</body>
</html>
运行：在谷歌浏览器下,
有什么问题欢迎留言！~~~~