<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>貪喫蛇</title>
<script>
var map; //地圖類對象
var snake; //蛇類對象
var food; //食物類對象
var timer; //定時器對象
var sum=0; //分數
//地圖類
function Map()
{
this.width=800; //地圖寬度
this.height=400; //地圖高度
this.position='absolute'; //定位方式
this.color='#FFDD00'; //地圖顏色
this._map=null; //保存地圖dom元素
this.show=function()
{
//用於顯示地圖
//創建地圖div元素
this._map = document.createElement('div');
//設置地圖樣式
this._map.style.width = this.width + 'px';
this._map.style.height = this.height + 'px';
this._map.style.position = this.position ;
this._map.style.backgroundColor = this.color ;
//將地圖div元素追加到body標籤之間
document.getElementsByTagName('body')[0].appendChild(this._map);
};
}
//食物類
function Food()
{
this.width=20; //寬度
this.height=20; //高度
this.position='absolute'; //定位方式
this.color='#FF0026'; //食物顏色
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.width + '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);
}
//如果之前創建過，只需要重新設置座標
this.x=Math.floor(Math.random()*40);
this.y=Math.floor(Math.random()*20);
this._food.style.left = this.x*this.width+'px';
this._food.style.top = this.y*this.height+'px';
};
}
//蛇類
function Snake()
{
this.width=20; //蛇節寬度
this.height=20; //蛇節高度
this.position='absolute'; //蛇節定位方式
this.direct=''; //蛇的移動方向
//所有蛇節全部信息
this.body=[[3,2,'red',null],[2,2,'blue',null],[1,2,'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 = this.position;
this.body[i][3].style.backgroundColor = this.body[i][2];
map._map.appendChild(this.body[i][3]);
}
//設置蛇節的橫縱座標
this.body[i][3].style.left=this.body[i][0]*this.width+'px';
this.body[i][3].style.top=this.body[i][1]*this.height+'px';
}
}
this.move = function()
{
//移動蛇身
var length = this.body.length-1;
for(var i=length;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 'right':
this.body[0][0]=this.body[0][0]+1;
break;
case 'down':
this.body[0][1]=this.body[0][1]+1;
break;
case 'left':
this.body[0][0]=this.body[0][0]-1;
break;
case 'up':
this.body[0][1]=this.body[0][1]-1;
break;
default:
return;
}
//判斷蛇喫到食物
if(this.body[0][0]==food.x&&this.body[0][1]==food.y)
{
var x=this.body[length][0];
var y=this.body[length][1];
sum++;
document.title='分數:'+sum+'分';
this.body.push([x,y,'#FF008C',null]);
food.show();
}
//判斷撞牆死
if(this.body[0][0]<0 || this.body[0][0]>39 ||this.body[0][1]<0 ||this.body[0][1]>19)
{
alert('撞牆死');
clearTimeout(timer);
return;
}
//喫到自己死
for(var i=1;i<this.body.length;i++)
{
if(this.body[0][0]==this.body[i][0]&&this.body[0][1]==this.body[i][1])
{
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()',200);
document.onkeydown = function()
{
var code;
if(window.event)
{
code=window.event.keyCode;
}else
{
code = event.keyCode;
}
snake.setDirect(code);
};
}
</script>
</head>
<body>
</body>
</html>
來個效果圖：
