完整的贪吃蛇小应用

最新推荐文章于 2023-04-28 15:40:57 发布

梧桐林雨

最新推荐文章于 2023-04-28 15:40:57 发布

阅读量251

点赞数

分类专栏： javascript/jquery

本文链接：https://blog.csdn.net/lt15032237182/article/details/8218901

版权

javascript/jquery 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

}
//显示蛇
function Snake(){
  //var w=20;
  this.w=20;
  this.h=20;
  this.direct='right';
  this.body=[
     {x:6,y:3,color:'#000'},
     {x:5,y:3,color:'#FF6699'},
     {x:4,y:3,color:'#FF6699'}
    ]
this.display=function(){
  //通过数组来保存舍身，一个元素代表一个蛇节
  for(var i=0;i<this.body.length;i++){
   var new_snake=document.createElement('div');
    new_snake.style.width=this.w+'px';
    new_snake.style.height=this.h+'px';
    new_snake.style.left=(this.w*this.body[i].x)+'px';
                new_snake.style.top = (this.h*this.body[i].y)+'px';

    new_snake.style.position = 'absolute';
    new_snake.style.backgroundColor = this.body[i].color;
    document.getElementById('map').appendChild(new_snake);
    this.body[i].she=new_snake;

  }
  }
  //移动蛇
  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;
  }
      //是否撞墙
  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:'#FF6699',she:null};
  //吃一个食物之后让旧的食物消失新的food出现
  food.redisplay();
  }
  //删除旧的蛇节,删除旧蛇
  this.remove();
  //按照新的蛇节显示出来，显示移动之后的新蛇
  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.remove=function(){
  //需要找到父元素
  var map=document.getElementById('map');
  for(var i=0;i<this.body.length;i++){
  if(this.body[i].she != null){
  map.removeChild(this.body[i].she);
  }
  }
  }

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

  snake = new Snake();
  snake.display();
}
function start(){
snake_id=setInterval("snake.move()",300);
}
function changedirect(evt){
snake.setDirect(evt.keyCode);
}
</script>
</head>

梧桐林雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
完整的贪吃蛇小应用

#container{ width:800px; margin:auto; margin_top:50px;}#map{ width:800px; height:400px; background-color:#CCC; overflow:hidden; position:absolute;} function Food(
复制链接

扫一扫