贪食蛇程序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ceshi</title>
<style>
</style>
</head>
<body>
<script>
var food;
var map;
var snake;
var timer;
var num=0;
function Snake(){
this.width=20;
this.height=20;
this.positon='absolute';
this.direct='right';
this.body=[ //蛇节
[3,3,'red',null],
[2,3,'blue',null],
[1,3,'blue',null]]
this.setDirect=function(code){
switch(code){
case 37:
this.direct='left';
break;
case 38:
this.direct='up';
break;
case 39:
this.direct='right';
break;
case 40:
this.direct='down';
break;
}
}
this.show=function(){
for(var i=0;i<this.body.length;i++){
if(this.body[i][3]==null){
this.body[i][3]=document.createElement('div');
this.body[i][3].style.width=this.width+'px';
this.body[i][3].style.height=this.height+'px';
this.body[i][3].style.position='absolute';
this.body[i][3].style.backgroundColor=this.body[i][2];
map._map.appendChild(this.body[i][3]);
}
//如果不是第一次执行，只执行下面这2句
this.body[i][3].style.left=(this.body[i][0]*20)+'px';
this.body[i][3].style.top=(this.body[i][1]*20)+'px';
}
};
this.move=function(){
var length=this.body.length;
for(var i=length- 1;i>0;i--){
this.body[i][0]=this.body[i-1][0];
this.body[i][1]=this.body[i-1][1];
}
//蛇头向右移动
// 判断方向，便于设置蛇头的新坐标
switch(this.direct){
case 'left':
this.body[0][0]-=1;
break;
case 'right':
this.body[0][0]+=1;
break;
case 'up':
this.body[0][1]-=1;
break;
case 'down':
this.body[0][1]+=1;
break;
}
if(this.body[0][0]==food.x && this.body[0][1]==food.y){
var length=this.body.length-1;
var x=this.body[length][0];
var y=this.body[length][1];
this.body.push([x,y,'blue',null]);
num++;
document.title="共"+num+"分";
food.show();
}
if(this.body[0][0]==40||this.body[0][0]==-1||this.body[0][1]==-1||this.body[0][1]==20){
alert("over");
clearTimeout(timer);
return;
}
for(i=this.body.length-1;i>0;i--){
if(this.body[0][0]==this.body[i][0]&&this.body[0][1]==this.body[i][1]){
alert("over");
clearTimeout(timer);
return;
}
}
//this.body[0][0]+=1;
this.show();
}
}
function Map(){
this.width=800;
this.height=400;
this.color='#dddddd';
this.position='absolute';
this._map = null;
this.show=function(){
this._map=document.createElement('div');
this._map.style.width=this.width+'px';
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);
};
}
function Food(){
this.width=20;
this.height=20;
this.color='green';
this.position='absolute';
this.x=0;
this.y=0;
this._food=null;
this.show=function(){
if(this._food==null){
this._food=document.createElement('div');
this._food.style.width=this.width+'px';
this._food.style.height=this.height+'px';
this._food.style.backgroundColor=this.color;
this._food.style.position=this.position;
map._map.appendChild(this._food);
//document.getElementsByTagName('div')[0].appendChild(div);
}
this.x=Math.floor(Math.random()*40);
this.y=Math.floor(Math.random()*20);
this._food.style.left=(this.x*20)+'px';
this._food.style.top=(this.y*20)+'px';
};
this.show();
}
window.onload=function(){
map=new Map();
map.show();
food=new Food();
food.show();
snake=new Snake();
snake.show();
timer= setInterval('snake.move()',300);
document.onkeyup=function(event){
var code;
if(window.event){
code=window.event.keyCode;
//alert('guge');
}else {
code=event.keyCode;
// alert('ie');
}
snake.setDirect(code);
}
}
</script>
</body>
</html>