代码保存为html直接运行即
<html>
<head>
<style>
*{
margin:0px;
padding:0px;
}
.box{
width:20px;
height:20px;
background-color:blue;
border:1px gray solid;
position:absolute;
}
.sweet{
width:20px;
height:20px;
background-color:green;
position:absolute;
}
#win{
width:400px;
height:400px;
background-color:gray;
border:1px solid;
margin:0 auto;
margin-top:50px;
position:relative;
}
#win #text {
margin:0 auto;
width:100%;
font-size:3.5em;
color:white;
font-family:"微软雅黑";
line-height:400px;
text-align:center;
}
</style>
</head>
<body>
<div id="win">
<div id="text">1</div>
</div>
</body>
<script>
//贪食蛇
var Snake = function(win) {
this.win = win;
this.nodes = Array();
this.direction = 2;
//增加一个node
this.addBox = function(x,y) {
var item = document.createElement("div");
item.className = "box";
item.style.left = x;
item.style.top = y;
var len = this.nodes.length;
this.nodes[len] = item;
win.appendChild(item);
};
//初始化
this.init = function() {
var x = 200;
var y = 200;
this.addBox(x,y);
//this.addBox(x+20,y);
};
//移动
this.move = function() {
for (i=0;i<this.nodes.length - 1;i++){
var node = this.nodes[i];
var nextNode = this.nodes[i+1];
node.style.left = nextNode.style.left;
node.style.top = nextNode.style.top;
}
var node = this.nodes[this.nodes.length-1];
var left = parseInt(node.style.left);
var top = parseInt(node.style.top);
if (this.direction == 1) {
top -= 20;
}
if (this.direction == 2) {
left += 20;
}
if (this.direction == 3) {
top += 20;
}
if (this.direction == 4) {
left -= 20;
}
if (this.isOver(left,top)) {
document.getElementById('text').innerHTML = "GAME OVER";
clearInterval(interval);
return;
}
if (!sweet.tryEat(left,top)) {
node.style.left = left;
node.style.top = top;
}
};
this.isOver = function(x,y) {
for (i=0;i<this.nodes.length - 1;i++){
var node = snake.nodes[i];
var nx = parseInt(node.style.left);
var ny = parseInt(node.style.top);
if (x == nx && y == ny){
return true;
}
}
if (x>=400 || x<0 || y<0 || y>=400) {
return true;
} else {
return false;
}
}
//反转
this.reverse = function() {
snake.nodes.reverse();
}
}
//糖果
var Sweet = function() {
this.item = null;
this.create = function() {
this.x = parseInt (Math.random() * 20) * 20;
this.y = parseInt (Math.random() * 20) * 20;
this.item = document.createElement("div");
this.item.className = "sweet";
this.item.style.left = this.x;
this.item.style.top = this.y;
for (var index in snake.nodes ) {
var node = snake.nodes[index];
var nx = parseInt(node.style.left);
var ny = parseInt(node.style.top);
if (this.x == nx && this.y == ny){
return this.create();
}
}
win.appendChild(this.item);
}
this.tryEat = function(x,y) {
var sx = parseInt(this.item.style.left);
var sy = parseInt(this.item.style.top);
if (x == sx && y == sy) {
win.removeChild(this.item);
snake.addBox(x,y);
this.create();
score++;
document.getElementById('text').innerHTML = score;
return true;
}
return false;
}
}
//up
function up() {
if (snake.direction == 3) {snake.reverse();}
snake.direction = 1;
snake.move();
}
//right
function right() {
if (snake.direction == 4) {snake.reverse();}
snake.direction = 2;
snake.move();
}
//down
function down() {
if (snake.direction == 1) {snake.reverse();}
snake.direction = 3;
snake.move();
}
//left
function left() {
if (snake.direction == 2) {snake.reverse();}
snake.direction = 4;
snake.move();
}
//移动
function move() {
switch (nextDirection)
{
case 1:up();break;
case 2:right();break;
case 3:down();break;
case 4:left();break;
}
}
//捕获按键
document.onkeydown = function(e) {
switch(e.keyCode) {
case 37:nextDirection =4;break;
case 38:nextDirection =1;break;
case 39:nextDirection =2;break;
case 40:nextDirection =3;break;
}
}
var win = document.getElementById("win");
var snake = new Snake(win);
var nextDirection = 2;
var sweet = new Sweet();
var score = 1;
snake.init();
sweet.create();
var interval = setInterval("move()",100);
</script>
</html>