JS原生---贪吃蛇（无功能版）

最新推荐文章于 2019-08-07 22:46:59 发布

oOo!!!!!----蔚楠

最新推荐文章于 2019-08-07 22:46:59 发布

阅读量133

点赞数 2

本文链接：https://blog.csdn.net/weixin_45105458/article/details/98517253

版权

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <script type="text/javascript">
   
   var _ditu=new DiTu();//实例化/创建地图对象
   _ditu.display();//调用地图属性
   
   var _shiwu=new ShiWu();//实例化/创建食物对象
   _shiwu.display();//调运食物属性
   
   var _she=new She();//实例化/创建蛇对象
   _she.display();//调运蛇属性
   _she.kongzhi();//调用蛇移动方法
   
   document.getElementsByTagName('body')[0].onkeydown=function(event){
    _she.jiandui(event.keyCode);
    //上38=>up    下40=>down     左37=>left     右39=>right    空格32
   }
   
   
   
   //创建地图
   function DiTu(){
    this.width=800;
    this.height=600;
    this.color='blue';
    this.ditu=null;//设置空值储存地图属性
    this.display=function(){
     this.ditu=document.createElement('div');//创建地图div
     this.ditu.style.width=this.width+'px';
     this.ditu.style.height=this.height+'px';
     this.ditu.style.background=this.color;
     this.ditu.style.position='relative';//相对定位
     this.ditu.style.margin='0 auto';
     document.getElementsByTagName('body')[0].appendChild(this.ditu)//把创建的地图div放在body中
    }
   }
   
   //创建食物
   function ShiWu(){
    this.width=20;
    this.height=20;
    this.background='red';
    this.x=0;
    this.y=0;
    this.shiwu=null;//创建空值来储存食物属性
    this.display=function(){
     if (this.shiwu==null) {
      this.shiwu=document.createElement('div');//创建食物div
      this.shiwu.style.width=this.width+'px';
      this.shiwu.style.height=this.height+'px';
      this.shiwu.style.background=this.background;
      this.shiwu.style.borderRadius='50%';
      this.shiwu.style.position='absolute';//绝对定位
      _ditu.ditu.appendChild(this.shiwu);//把食物放在地图中
     }
     this.x=Math.round(Math.random()*39);
     this.y=Math.round(Math.random()*29);
     this.shiwu.style.left=this.x*this.width+'px';//食物在地图的x轴内（宽）随机
     this.shiwu.style.top=this.y*this.height+'px';//食物在地图的y轴内（高）随机
    }
   }
   
   //创建蛇
   function She(){
    this.width=20;
    this.height=20;
    this.left=false;//蛇移动初始化，不能向左
    this.right=true;//蛇移动初始化，可以向右
    this.up=true;//蛇移动初始化，可以向上
    this.down=true;//蛇移动初始化，可以向下
    this.kong=null;//创建一个可以记录方向的空值
    this.shesheng=[[3,5,'red',null],[2,5,'pink',null],[1,5,'pink',null]];
    this.display=function(){
     for (var i=0;i<this.shesheng.length;i++) {//遍历蛇身
      if (this.shesheng[i][3]==null) {
       this.shesheng[i][3]=document.createElement('div');
       this.shesheng[i][3].style.width=this.width+'px';
       this.shesheng[i][3].style.height=this.height+'px';
       this.shesheng[i][3].style.background=this.shesheng[i][2];
       this.shesheng[i][3].style.position='absolute';//绝对定位
       _ditu.ditu.appendChild(this.shesheng[i][3])//把蛇放在地图里
      }
      this.shesheng[i][3].style.left=this.shesheng[i][0]*this.width+'px';//蛇身在地图中纵坐标位置
      this.shesheng[i][3].style.top=this.shesheng[i][1]*this.height+'px';//蛇身在地图中横坐标位置
     }
    }
    this.jiandui=function(keyCode){//创建一个的函数设置蛇的移动
     //console.log('=======')
     switch (keyCode){//通过键对值设置蛇的移动
      case 37:
      if (this.left) {//判断蛇向左，不能向右，可以上下
       this.kong='left';
       this.left=true;
       this.right=false;
       this.up=true;
       this.down=true;
      }
       break;
      case 38:
      if (this.up) {//判断蛇向上，不能向下，可以左右
       this.kong='up';
       this.left=true;
       this.right=true;
       this.up=true;
       this.down=false;
      }
          break;
      case 39:
      if (this.right) {//判断蛇向右，不能向左，可以上下
       this.kong='right';
       this.left=false;
       this.right=true;
       this.up=true;
       this.down=true;
      }
          break;
      case 40:
      if (this.down) {//判断蛇向下，不能向上，可以左右
       this.kong='down';
       this.left=true;
       this.right=true;
       this.up=false;
       this.down=true;
      }
          break;
      default:
       break;
     }
    }
    this.kongzhi=function(){//创建一个函数来控制蛇的移动
     if (this.kong!=null) {//设置蛇的身子移动
         for (var i=this.shesheng.length-1;i>0;i--) {
       this.shesheng[i][0]=this.shesheng[i-1][0];
       this.shesheng[i][1]=this.shesheng[i-1][1];
      }
     }
     switch (this.kong){//通过记录蛇移动的属性来控制蛇移动
      case 'left':
      this.shesheng[0][0]-=1;
       break;
      case 'up':
      this.shesheng[0][1]-=1;
       break;
      case 'right':
      this.shesheng[0][0]+=1;
       break;
      case 'down':
      this.shesheng[0][1]+=1;
       break;
      default:
       break;
     }
     
     //蛇吃食物样式
     //判断蛇头坐标与食物坐标相撞
     if (this.shesheng[0][0]==_shiwu.x && this.shesheng[0][1]==_shiwu.y) {
      _shiwu.display();//调用食物样式
      var x=this.shesheng[this.shesheng.length-1][0];
      var y=this.shesheng[this.shesheng.length-1][1];
      this.shesheng.push([x,y,'pink',null]);//给蛇尾加一节
     }
     //撞墙死亡
     //判断上下撞墙，左右撞墙
     if (this.shesheng[0][0]>39||this.shesheng[0][1]>29||this.shesheng[0][0]<0||this.shesheng[0][1]<0) {
      if (confirm('是否重新开始游戏')) {
       window.location.reload();//刷新游戏
      }else{
       return false;//阻止默认行为（蛇移动）
      }
     }
     //蛇身与自己相撞
     for (var i=1;i<this.shesheng.length;i++) {
      //判断蛇头与蛇身相撞
      if (this.shesheng[0][0]==this.shesheng[i][0]&&this.shesheng[0][1]==this.shesheng[i][1]) {
       if (confirm('是否重新开始游戏')) {
        window.location.reload();
       }else{
        return false;
       }
      }
     }
     _she.display();//调用蛇属性
     setTimeout('_she.kongzhi()',100);
    }
   }
  </script>
 </body>
</html>

oOo!!!!!----蔚楠

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JS原生---贪吃蛇（无功能版）

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> var _ditu=new ...
复制链接

扫一扫