使用js实现贪吃蛇的部分功能

来源：互联网发布：dos 网络映射命令例子编辑：程序博客网时间：2024/06/06 03:31

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#container{
width:800px;
margin:auto;
margin-top:60px;
}
#map{
width:800px;
height:400px;
background-color:#F9C;
overflow:hidden;
position:absolute;}
</style>
<script type="text/javascript">
function Food()
{
this.w=20;
this.h=20;
this.color="red";
//显示食物
this.display=function()
{
  //我们显示一个食物，首先要知道，大小，位置，属性。
  var new_div=document.createElement('div');
  new_div.style.width=this.w+'px';
  new_div.style.height=this.h+'px';
  //位置我们采用0,1,2...
  //我们还要求出有多少个空格
  this.x=Math.round(Math.random()*39);
  this.y=Math.round(Math.random()*19);
  new_div.style.left=this.w*this.x+'px';

  new_div.style.top=this.h*this.y+'px';
  new_div.style.backgroundColor=this.color;
  new_div.style.position='absolute';
  document.getElementById('map').appendChild(new_div);
  }

}

//显示蛇
var t=0;
function Snake()

{
this.w=20;
this.h=20;
this.direct='right';
this.body=[
{x:5,y:3,color:"blue"},
{x:4,y:3,color:"red"},
{x:3,y:3,color:"red"}
];
this.display=function(){
//通过数组来保存蛇的身体。一个元素代表一个一个蛇节。

for(var i=0;i<this.body.length;i++)
{

var snake_div=document.createElement('div');

snake_div.style.width=this.w+"px";
snake_div.style.height=this.h+"px";
snake_div.style.left=(this.w*this.body[i].x)+'px';
snake_div.style.top=(this.h*this.body[i].y)+'px';
snake_div.style.position='absolute';
snake_div.style.backgroundColor=this.body[i].color;
document.getElementById('map').appendChild(snake_div);
this.body[i].div=snake_div;
}

}

   this.move=function(){
//先移动蛇身
for(var i=this.body.length-1;i>0;i--)
{
    this.body[i].x=this.body[i-1].x;
    this.body[i].y=this.body[i-1].y;

}
  //移动蛇头
  switch(this.direct)
  {
   case 'up':this.body[0].y-=1;break;
   case 'down':this.body[0].y+=1;break;
   case 'left':this.body[0].x-=1;break;
   case 'right':this.body[0].x+=1;break;
   }
  //把旧的蛇节删除
     this.removeSnake();
  //按照新的位置属性重新显示一下
  this.display();
  //判断方向
  this.setDirect=function(keycode)
  {
   switch(keycode)
   {
   case 37:if(this.direct!='right'){this.direct='left';}break;
   case 38:if(this.direct!='down'){this.direct='up';}break;
   case 39:if(this.direct!='left'){this.direct='right';}break;
   case 40:if(this.direct!='up'){this.direct='down';}break;

    }
   }
    }
    this.removeSnake=function(){
     //先找到他的父元素
     var map=document.getElementById('map');
     for(var i=0;i<this.body.length;i++)
     {
      map.removeChild(this.body[i].div);
      }
     }

}

</script>
</head>

</body>
</html>