<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script>
var t=null;
//地图系统
function Map(){
this.width="800px";
this.height="600px";
this.background="#ccc";
this.position="relative";
this._map=null;
}
Map.prototype.init=function(){
this._map=document.createElement("div");
document.body.appendChild(this._map);
this._map.style.width=this.width;
this._map.style.height=this.height;
this._map.style.background=this.background;
this._map.style.position=this.position;
}
var map=new Map;
map.init()
//食物系统
function Food(){
this.width="20px";
this.height="20px";
this.background="green";
this._food=null;
this.position="absolute"
}
Food.prototype.init=function(){
this._food=document.createElement("div");
map._map.appendChild(this._food);
this._food.style.width=this.width;
this._food.style.height=this.height;
this._food.style.background=this.background;
this._food.style.position=this.position;
this.x=Math.floor(Math.random()*40);
this.y=Math.floor(Math.random()*30);
this._food.style.left=this.x*20+"px";
this._food.style.top=this.y*20+"px";
}
var food=new Food;
food.init()
制造小蛇；
function Snake(){
this.width="20px";
this.height="20px";
this.position="absolute"
this.body=[
{x:1,y:2,color:"red",son:null},
{x:2,y:2,color:"red",son:null},
{x:3,y:2,color:"blue",son:null}
]
this.fangxiang="right";
this.setsnake=function(code){
switch(code){
case 37:
if(this.fangxiang==="right"){
return;
}
this.fangxiang="left";
break;
case 38:
if(this.fangxiang==="down"){
return;
}
this.fangxiang="up";
break;
case 39:
if(this.fangxiang==="left"){
return;
}
this.fangxiang="right";
break;
case 40:
if(this.fangxiang==="up"){
return;
}
this.fangxiang="down";
break;
}
}
}
Snake.prototype.init=function(){
for(var i=0;i<this.body.length;i++){
if(this.body[i].son==null){
this.body[i].son=document.createElement("div");
map._map.appendChild(this.body[i].son)
this.body[i].son.style.width=this.width;
this.body[i].son.style.height=this.height;
this.body[i].son.style.position=this.position;
this.body[i].son.style.background=this.body[i].color
}
this.body[i].son.style.left=this.body[i].x*20+"px"
this.body[i].son.style.top=this.body[i].y*20+"px"
}
}
Snake.prototype.move=function(){
var length=this.body.length-1;
for(var i=0;i<length;i++){
this.body[i].x=this.body[i+1].x;
this.body[i].y=this.body[i+1].y;
}
switch(this.fangxiang){
case "right":
this.body[length].x=this.body[length].x+1;
break;
case "left":
this.body[length].x=this.body[length].x-1;
break;
case "up":
this.body[length].y=this.body[length].y-1;
break;
case "down":
this.body[length].y=this.body[length].y+1;
}
this.init()
//实现小蛇的一些功能
if(this.body[length].x<0||this.body[length].x>39||this.body[length].y<0||this.body[length].y>29){
clearInterval(t)
alert("瞎子吗？越界了")
for(var j=0;j<this.body.length;j++){
if(this.body[j].son!=null){
map._map.removeChild(this.body[j].son)
}
}
}
if(this.body[length].x==food.x&&this.body[length].y==food.y){
map._map.removeChild(food._food);
food.init()
this.body.unshift({x:null,y:null,color:"red",son:null});
}
//由于出现了bug，现阶段没办法解决，所以舍弃贪吃蛇自己吃自己的功能
// for(var u=0;u<this.body.length;u++){
// if(this.body[u]==this.body[length]){
// return false;
// }
// else if(this.body[length].x==this.body[u].x&&this.body[length].y==this.body[u].y){
// clearInterval(t)
// alert("你是猪吗")
// }
// }
}
var snake=new Snake;
snake.init()
t=setInterval(function(){
snake.move()
},100)
document.onkeydown=function(ev){
var ev=ev||window.event;
setTimeout(function(){
snake.setsnake(ev.keyCode)
},100)
}
</script>