用JS实现贪吃蛇游戏

来源：互联网发布：linux远程桌面软件编辑：程序博客网时间：2024/04/28 20:36

2012-11-17--2012-11-20 实现贪食蛇！

<!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:#CCC;
border-color:#00F;
border-style:ridge;
overflow:hidden;
position:absolute;

}
</style>
<script type="text/javascript" language="javascript">
//变量不使用var是因为变量的生存周期，如果出了函数体变量就会失效
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);//求x轴有多少空格
  this.y = Math.round(Math.random()*19);//求y轴有多少空格

  //利用坐标确定位置
  new_div.style.left=(this.w*this.x)+'px';//离左端的距离，也是x轴坐标
  new_div.style.top=(this.h*this.y)+'px';//离左端的距离，也是y轴坐标

  new_div.style.backgroundColor=this.color;
  new_div.style.position="absolute";
  document.getElementById('map').appendChild(new_div);
  //生成食物的时候就要给这个食物做个标记，以便一会儿我要删除它
  this.taiji = new_div;
  }
  this.reDisplay = function(){
   document.getElementById('map').removeChild(this.taiji);
   this.display();
  }

}

//显示蛇
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;
       // this.body[0].y=this.body[0].y;
        //alert(this.body[0].x);
         //alert(this.body[0].y);
        break;
      }

      //把旧的蛇节删除
          this.removeSnake();
      //按照新的位置属性重新显示一下
           this.display();
      //撞墙后死去
      if(this.body[0].x<0 || this.body[0].x>39 || this.body[0].y<0 || this.body[0].y>19){
       alert('Game Over');
       clearInterval(snake_id);
      }
      //判断是否撞到自己，判断头的坐标和身体的某一节重合，但是前四节肯定装不上
      for(var i = this.body.length-1; i>=4;i--){
       if(this.body[0].x == this.body[i].x && this.body[0].y == this.body[i].y){
         alert('Game Over');
         clearInterval(snake_id);
         break;
       }
      }
      //吃食物后长一节,判断头部坐标和食物的坐标重合
      if(this.body[0].x == food.x && this.body[0].y == food.y){
       //现在吃上食物了，蛇身长一节，通过给this.body增加一个元素即可
       this.body[this.body.length] = {x:0,y:0,color:'red',div:null};
       //吃一个食物之后，让旧的食物消失，新的食物出现
       food.reDisplay();
      }
     }

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


  }
       //改变方向
     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;
       }
      }
  }

function init(){
   food = new Food();
            food.display();

   snake = new Snake();
   snake.display();
}

function start(){
  //snake = new Snake();
  //snake.move();
  snake_id = setInterval('snake.move()',300);
  }
    function changeDirect(evtkey){

  snake.setDirect(evtkey.keyCode);
  }
</script>
</head>