欢迎来到程序小院

不踩白小游戏

玩法：
鼠标点击彩色区域，消除为白色，彩色区域落下即为游戏结束，点击白色区域游戏结束，点击彩色块区域会有分数统计哦^^

开始游戏

html

<div class="box">
    <!-- 布局 -->
    <div id="cont">
        <div id="go">
            <span>开始游戏</span>
        </div>
        <div id="main"></div>
    </div>
    <div id="count">不要点击白色区域</div>
</div>

css

 .box {
        margin: 50px auto 0 auto;
        width: 400px;
        height: auto;
        border: 1px solid transparent;
        background-clip: padding-box, border-box;
        background-origin: padding-box, border-box;
        background-image: linear-gradient(to right, #fff, #fff),  
          linear-gradient(120deg, #f7716d, #60C4FD, #EDC951, #7ac630, #f7716d, 
            #60C4FD, #EDC951, #7ac630,#7ac630, #f7716d, #60C4FD, #EDC951, #7ac630);
    }
    #cont {
        width: 400px;
        height: 400px;
        position: relative;
        overflow: hidden;
    }
    #go {
        width: 100%;
        height: 400px;
        position: absolute;
        top: 0;
        text-align: center;
        z-index: 99;
    }
    #go span {
        cursor: pointer;
        background-color: #fff;
        font-size:18px;
        padding:10px 5px;
        background:#f7716d;
        color:#fff;
        width:100px;
        height:50px;
        line-height:30px;
        display:block;
        margin:0 auto;
        margin-top:180px;
    }
    #main {
        width: 400px;
        height: 400px;
        position: relative;
        top: -100px;
    }
    .row {
        width: 400px;
        height: 100px;
    }
    .row div {
        width: 79px;
        height: 99px;
        border: solid 1px #7ac630;
        float: left;
        border-top-width: 0;
        border-left-width: 0;
        cursor: pointer;
    }
    #count {
        color:#4a4a4a;
        width: 398px;
        height: 50px;
        font: 700 18px/50px '微软雅黑';
        text-align: center;
        border-top: 1px solid transparent;
        background-clip: padding-box, border-box;
        background-origin: padding-box, border-box;
        background-image: linear-gradient(to right, #fff, #fff),  
          linear-gradient(120deg, #f7716d, #60C4FD, #EDC951, #7ac630, #f7716d, 
            #60C4FD, #EDC951, #7ac630,#7ac630, #f7716d, #60C4FD, #EDC951, #7ac630);
    }

js

  //得当前样式
  function getStyle(obj,arrt){
      //兼容IE
      return obj.currentStyle ? obj.currentStyle[arrt] : getComputedStyle(obj,null)[arrt];
  }

  var main = document.getElementById('main');
  var go = document.getElementById('go');
  var count = document.getElementById('count');
  var cols = ['#f7716d','#60C4FD','#7ac630','#EDC951'];


  //动态创建div
  function cDiv(classname){
      //创建div
      var oDiv = document.createElement('div');
      //随机值
      var index = Math.floor(Math.random()*4);
      //行 添加相应的class类
      oDiv.className = classname;
      //创建行之后再动态创建4个小div并添加到行里面
      for(var j =0;j<5;j++){
          var iDiv = document.createElement('div');
          oDiv.appendChild(iDiv);
      }
      //然后把行添加到main里面
      //判断需要添加的位置
      if(main.children.length == 0){
          main.appendChild(oDiv);
      }else {
          main.insertBefore(oDiv, main.children[0]);
      }
      //随机给行里面的某一个div添加背景色
      oDiv.children[index].style.backgroundColor = cols[index];
      //标记颜色盒子
      oDiv.children[index].className = "i";
  }


  //移动div
  function move(obj){
      //关闭上一个定时器
      clearInterval(obj.timer);
      //默认速度与计分
      var speed = 5,num = 0;
      //定时器管理与开启定时器
      obj.timer = setInterval(function(){
          //速度
          var step = parseInt(getStyle(obj,'top')) + speed;
          //移动盒子
          obj.style.top = step + 'px';
          //判断并创建新的盒子
          if(parseInt(getStyle(obj,'top')) >= 0){
              cDiv('row');
              obj.style.top = -100 + 'px';
          }
          //删除边界外的盒子
          if(obj.children.length == 6){
              //删除前，如果有盒子没有点击则结束游戏
              for(var i = 0;i<5;i++){
                  if(obj.children[obj.children.length - 1].children[i].className == 'i'){
                      //游戏结束
                      obj.style.top = '-100px';
                      count.innerHTML = '游戏结束,得分: ' + num;
                      //关闭定时器
                      clearInterval(obj.timer);
                      //显示开始游戏
                      go.children[0].innerHTML = '重新开始';
                      go.style.display = "block";
                  }
              }
              obj.removeChild(obj.children[obj.children.length - 1]);
          }

          //点击与计分
          obj.onmousedown = function(event){
              //点击的不是白盒子
              // 兼容IE
              event = event || window.event;
              if((event.target? event.target : event.srcElement).className          == 'i'){
                  //点击后的盒子颜色
                  (event.target? event.target : event.srcElement).style.backgroundColor = "#fff";
                  //清除盒子标记
                  (event.target? event.target : event.srcElement).className             = '';
                  //计分
                  num++;
                  //显示得分
                  count.innerHTML = '得分: ' + num;
                  bgm.play();
              }
              else{
                  //游戏结束
                  obj.style.top = 0;
                  count.innerHTML = '游戏结束,得分: ' + num;
                  //关闭定时器
                  clearInterval(obj.timer);
                  //显示开始游戏
                  go.children[0].innerHTML = '重新开始';
                  go.style.display = "block";
              }
              //盒子加速
              if(num%10 == 0){
                  speed++;
              }
          }
          //松开触发停止
          obj.onmouseup=function(event){
              bgm.pause();
          }
      },20)
  }
}

源码

需要源码请关注添加好友哦^ ^

转载：欢迎来到本站，转载请注明文章出处https://ormcc.com/