JavaScript原生------贪吃蛇

oOo!!!!!----蔚楠
于 2019-08-07 22:46:59 发布
阅读量103
点赞数
本文链接：https://blog.csdn.net/weixin_45105458/article/details/98792288
版权
拓展需求：
1,添加游戏的背景音乐,并且控制暂停和播放;
2,给蛇添加眼睛(两个眼睛);
3,设计项目的界面(开始游戏,暂停游戏,记录分数,选择关卡（控制速度）);
4.控键设置（向前不向后，向左不向右）
5.添加吃食物音乐
6.添加大食物（蛇身加俩节，积分器加俩分）
7.添加毒食物（蛇身减一节，积分器减一分）
8.暂停/继续键（俩键合一）
9.更换背景图
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   #id{
    width: 600px;
    height: 600px;
    background: url(../img/31da5632e70db9c453965ffb71c2b18b.jpg);
    background-size: 600px 600px;
    margin: 0 auto;
    text-align: center;
   }
   #butu0{
    width: 400px;
    height: 50px;
    margin:50px auto;
    font-size: 40px;
    color: aqua;
    background: url(..//imga/1.jpg);
    font-family: "宋体";
    border-radius: 20%;
    text-align: center;
    position: relative;
   }
   #butu{
    width: 300px;
    height: 50px;
    margin:100px auto;
    border-radius: 50%;
    font-size: 30px;
    background: url(../img/e4d8ab93f8a4303c12505013c86ebe58.jpg);
    background-size: 300px 50px;
    text-align: center;
    position: relative;
   }
   #butu1{
    width: 250px;
    height: 50px;
    border-radius: 50%;
    margin: 0;
    font-size: 30px;
    color: #FF0000;
    background: url(../img/f8ab12e67b89a995b1cce307e5967f72.jpg);
    background-size: 250px 100px;
    position: relative;
   }
   #butu12{
    width: 250px;
    height: 100px;
    border-radius: 50%;
    margin: 0;
    font-size: 40px;
    color: #FF0000;
    background: url(../img/f8ab12e67b89a995b1cce307e5967f72.jpg);
    background-size: 250px 100px;
    position: relative;
   }
  </style>
 </head>
 <body>
 <div id="id">
  <button id="butu0">贪吃蛇</button>
  <button id="butu">开始游戏</button><br />
  <button id="butu1">加速</button><br />
  <button id="butu12">极速</button>
 </div>
  <script type="text/javascript">
   var _Map;//声明地图
   var _shiwu;//声明食物
   var _she;//声明蛇
   var _yanjing;//声明眼睛
   var time;//定时器
   var feng;//分数键
   var sum=0;//得分
   var mus;
   //开始游戏
   var chushi=document.getElementById('butu')
   chushi.onclick=function(){//给按钮绑定事件
    document.getElementById('id').style.display='none';//隐藏初始界面
    shili('url(../imge/夏.jpg) ',200)
   }
   //加速
   var chushi1=document.getElementById('butu1')
   chushi1.onclick=function(){//给按钮绑定事件
    document.getElementById('id').style.display='none';//隐藏初始界面
    shili('url(../imge/冬.jpg)',100)
   }
   //极速
   var chushi2=document.getElementById('butu12')
   chushi2.onclick=function(){//给按钮绑定事件
    document.getElementById('id').style.display='none';//隐藏初始界面
    shili('url(../imge/秋.jpg)',50)
   }
   function shili(m,n){
    _Map=new Map();//实例化/创建一个地图对象
    _Map.backgroundImage=m;
    _Map.display();//调用显示地图方法
    _shiwu=new Shiwu();//实例化/创建食物
    _shiwu.width=20;
    _shiwu.height=20;
    _shiwu.background='red';
    _shiwu.display(39,29);//调用显示食物方法
    _shiwu0=new Shiwu();//实例化/创建毒食物
    _shiwu0.width=20;
    _shiwu0.height=20;
    _shiwu0.background='indianred';
    _shiwu0.display(39,29);//调用显示食物方法
    _shiwu1=new Shiwu();//实例化/创建大食物
    _shiwu1.width=40;
    _shiwu1.height=40;
    _shiwu1.background='#919';
    _shiwu1.display(19,14);//调用显示食物方法
    _she=new She();//实例化/创建?
    _she.display();//调用显示?的方法
    _she.fangXiang();//调用蛇移动的方法
    _she.shijian=n;//蛇的速度
    _yanjing=new YanJian()//实例化/创建眼睛
    _yanjing.display();//调用显示眼睛方法
    //添加音乐
    mus=document.createElement('audio');//创造audio标签
    mus.src='../img';//放入音乐
    mus.autoplay='autoplay';//自动播放
    document.getElementsByTagName('body')[0].appendChild(mus);//添加到body中
    //添加暂停键
    var annv=document.createElement('button');//创造暂停键
    annv.innerHTML='（单击）暂停/继续（双击）';
    annv.position='absolute';//绝对定位
    annv.style.marginLeft='650px';
    document.getElementsByTagName('body')[0].appendChild(annv);//添加到body中
    annv.onclick=function(){//添加事件
      clearTimeout(time)//关闭定时器
      mus.pause();//关闭音乐
      annv.ondblclick=function(){//添加事件 
        _she.fangXiang();//开启定时器
           mus.play(); //开启音乐   
      }
    }
    //计算分数
    feng=document.createElement('button');//创造得分键
    feng.innerHTML='得分'+sum+'分';//将分数添加到键内
    feng.position='absolute';//绝对定位
    document.getElementsByTagName('body')[0].appendChild(feng);//添加到body中
   }
   //点击键盘事件获取键码
   document.getElementsByTagName('body')[0].onkeydown=function(event){
    //console.log(event.keyCode)//上38=>up    下40=>down     左37=>left     右39=>right    空格32
    _she.kongJian(event.keyCode);//给蛇移动方法中传递键码值
   }
   //创建地图
   function Map(){
    this.width=800;
    this.height=600;
    this.backgroundImage=null;
    this.map=null;                             //创建一个空值存放地图属性
    this.display=function(){                  //封装显示地图的方法
     this.map=document.createElement('div')//创建地图的div
     this.map.style.width=this.width+'px';
     this.map.style.height=this.height+'px';
     this.map.style.background=this.backgroundImage;
     this.map.style.backgroundSize='800px 630px';//图片样式
     this.map.style.margin='0 auto';
     this.map.style.position='relative';    //相对定位
     document.getElementsByTagName('body')[0].appendChild(this.map);//把地图放在body中
    }
   }
   //创建食物
   function Shiwu(){
    this.width=null;
    this.height=null;
    this.background=null;
    this.x=0;
    this.y=0;
    this.shiwu=null;                             //创建一个空值存放食物属性
    this.display=function(o,p){                     //封装显示食物的方法
     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';     //绝对定位
      _Map.map.appendChild(this.shiwu);        //把食物放在地图中
     }
     this.x=Math.round(Math.random()*o);      //食物的x坐标随机
     this.y=Math.round(Math.random()*p);      //食物的y坐标随机
     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.shijian=null;
    this.left=false;//蛇移动初始状态，不能向右
    this.right=true;//蛇移动初始状态，可以向右
    this.up=true;//蛇移动初始状态，可以向上
    this.down=true;//蛇移动初始状态，可以向下
    this.kong=null;//创建一个存储?移动方向的属性
    this.shuzu=[[3,5,'red',null],[2,5,'blue',null],[1,5,'blue',null]];//创建蛇身（数组）
    this.display=function(){
     for (var i=0;i<this.shuzu.length;i++) {          //遍历蛇身（数组）
      if (this.shuzu[i][3]==null) {
       this.shuzu[i][3]=document.createElement('div');
       this.shuzu[i][3].style.width=this.width+'px';
       this.shuzu[i][3].style.height=this.height+'px';
       this.shuzu[i][3].style.background=this.shuzu[i][2];
       this.shuzu[i][3].style.position='absolute';    //绝对定位
       this.shuzu[i][3].style.borderRadius='45%';
       _Map.map.appendChild(this.shuzu[i][3]);                       //将蛇身放在地图中
      }
      this.shuzu[i][3].style.left=this.shuzu[i][0]*this.width+'px';//纵坐标*宽=在地图中纵坐标位置
      this.shuzu[i][3].style.top=this.shuzu[i][1]*this.height+'px';//横坐标*高=在地图中横坐标位置
     }
    }
    this.kongJian=function(keyCode){//创建一个函数来设置设移动的方向
     switch (keyCode){
      case 38:
      if(this.up){//控键上设置：可以左右，不能向下
       this.kong='up';
       this.shuzu[0][3].style.transform = "rotate(-90deg)"
       this.left = true;
       this.right = true;
       this.up = true;
       this.down = false;
      }
       break;
      case 40:
      if(this.down){//控键下设置：可以左右，不能向上
       this.kong='down';
       this.shuzu[0][3].style.transform = "rotate(90deg)"
       this.left = true;
       this.right = true;
       this.up = false;
       this.down = true;
      }
          break;
      case 37:
      
      if(this.left){//控键左设置：可以上下，不能向右
       this.kong='left';
       this.shuzu[0][3].style.transform = "rotate(180deg)"
       this.left = true;
       this.right = false;
       this.up = true;
       this.down = true;
      }
          break;
      case 39:
      if(this.right){//控键右设置：可以上下，不能向左
       this.kong='right';
       this.shuzu[0][3].style.transform = "rotate(0deg)"
       this.left = false;
       this.right = true;
       this.up = true;
       this.down = true;
      }
          break;
      default:
      alert('请按方向键')
       break;
     }
    }
    this.fangXiang=function(){//创建一个函数来控制蛇移动方向
     if (this.kong!=null) {//设置?的身体移动
      for (var i=this.shuzu.length-1;i>0;i--) {
       this.shuzu[i][0]=this.shuzu[i-1][0];
       this.shuzu[i][1]=this.shuzu[i-1][1];
      }
     }
     switch (this.kong){//在储存方向的属性中提取方向值控制蛇移动
      case 'up':
      this.shuzu[0][1]-=1;
          break;
      case 'down':
      this.shuzu[0][1]+=1;
       break;
      case 'left':
      this.shuzu[0][0]-=1;
          break;
      case 'right':
      this.shuzu[0][0]+=1;
          break;
      default:
       break;
     }
     //蛇与食物相撞样式
     if (this.shuzu[0][0]==_shiwu.x && this.shuzu[0][1]==_shiwu.y) {//判断蛇头与食物相撞
      sum++;//吃到食物加一分
      feng.innerHTML='得分'+sum+'分';//将接收到的分数添加到分数按钮中
      var mus1=document.createElement('audio');
      mus1.src='../img/(1).mp3';
      mus1.play()
      _shiwu.display(39,29);//重新刷新食物
      var x=this.shuzu[this.shuzu.length-1][0];//在横坐标的蛇身尾部
      var y=this.shuzu[this.shuzu.length-1][1];//在纵坐标的蛇身尾部
      this.shuzu.push([x,y,'pink',null]);//蛇身加一节
     }
     //蛇与食物0相撞样式
     if (this.shuzu[0][0]==_shiwu0.x && this.shuzu[0][1]==_shiwu0.y) {//判断蛇头与食物相撞
      sum--;//吃到食物减1分
      feng.innerHTML='得分'+sum+'分';//将接收到的分数添加到分数按钮中
      var mus1=document.createElement('audio');
      mus1.src='../img/(1).mp3';
      mus1.play()
      var x=this.shuzu[this.shuzu.length-1][0];//在横坐标的蛇身尾部
      var y=this.shuzu[this.shuzu.length-1][1];//在纵坐标的蛇身尾部
      _Map.map.removeChild(this.shuzu[this.shuzu.length-1][3]);//删除最后一节数组div
      this.shuzu.pop([x,y,'pink',null]);//删除蛇身最后一节数组
      _shiwu0.display(39,29);//重新刷新食物
     }
     //蛇与食物2相撞样式
     if (Math.pow(Math.abs(_shiwu1.x*_shiwu1.width-(this.shuzu[0][0])*this.width),2)+Math.pow(Math.abs(_shiwu1.y*_shiwu1.height-(this.shuzu[0][1])*this.height),2)<625) {//判断蛇头与食物相撞
      sum+=2;//吃到食物加2分
      feng.innerHTML='得分'+sum+'分';//将接收到的分数添加到分数按钮中
      var mus1=document.createElement('audio');
      mus1.src='../img/(1).mp3';
      mus1.play()
      _shiwu1.display(19,14);//重新刷新食物
      var x=this.shuzu[this.shuzu.length-1][0];//在横坐标的蛇身尾部
      var y=this.shuzu[this.shuzu.length-1][1];//在纵坐标的蛇身尾部
      this.shuzu.push([x,y,'pink',null]);//蛇身加2节
      this.shuzu.push([x,y,'pink',null]);
     }
     //蛇与边界相撞样式
     //判断蛇头位置是否超出上下边界，左右边界
     if (this.shuzu[0][0]>39||this.shuzu[0][1]>29||this.shuzu[0][0]<0||this.shuzu[0][1]<0) {
      alert('总计得分'+sum);//弹出总成绩
      if (confirm('是否确定要重新开始')) {
       window.location.reload();//重新刷新页面
      }else{
       return false;//阻止默认行为（蛇移动）
      }
     }
     //蛇撞到自己样式
     for (var i=1;i<this.shuzu.length;i++) {//遍历蛇身
      //判断蛇头坐标与蛇身坐标相撞
      if (this.shuzu[0][0]==this.shuzu[i][0] && this.shuzu[0][1]==this.shuzu[i][1]) {
       alert('总计得分'+sum);//弹出总成绩
       if (confirm('是否确定要重新开始')) {
        window.location.reload();//刷新页面
       }else{
        return false;//阻止默认行为（蛇移动）
          }
      }
     }
     _she.display();//调用蛇方法
     time=setTimeout('_she.fangXiang()',this.shijian);//计时器
    }
   }
   //蛇眼睛
   function YanJian(){
    this.width=9;
    this.height=9;
    this.yan=[[1,0,'gold',null],[1,0,'gold',null]];
    this.display=function(){
     for (var i=0;i<this.yan.length;i++) {//遍历眼睛
      this.yan[i][3]=document.createElement('div');//创造一个div存放眼睛
      this.yan[i][3].style.width=this.width+'px';
      this.yan[i][3].style.height=this.height+'px';
      this.yan[i][3].style.background=this.yan[i][2];
      this.yan[i][3].style.borderRadius='50%';
      this.yan[i][3].style.position='relative';//相对于蛇头定位
      this.yan[i][3].style.left=this.yan[0][0]*this.width+'px';//在眼睛中纵坐标位置
      this.yan[i][3].style.top=this.yan[0][1]*this.height+'px';//在眼睛中横坐标位置
      _she.shuzu[0][3].appendChild(this.yan[i][3]);//把眼睛放在蛇头中
     }
    }
   }
  </script>
 </body>
</html>
oOo!!!!!----蔚楠
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript原生------贪吃蛇

拓展需求：1,添加游戏的背景音乐,并且控制暂停和播放;2,给蛇添加眼睛(两个眼睛);3,设计项目的界面(开始游戏,暂停游戏,记录分数,选择关卡（控制速度）);4.控键设置（向前不向后，向左不向右）5.添加吃食物音乐6.添加大食物（蛇身加俩节，积分器加俩分）7.添加毒食物（蛇身减一节，积分器减一分）8.暂停/继续键（俩键合一）<!DOCTYPE html><ht...
复制链接

扫一扫