益智类游戏别踩白块小游戏

一款益智类游戏别踩白块小游戏，通过点击屏幕快速下落的色彩方块操作游戏，如果误点了白色小方块则游戏结束，可以一边玩游戏一般听上面的音乐，音乐链接可以自由替换的，喜欢的童鞋请收下吧。

分类：游戏 > 益智难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，需设置好页面元素的样式，代码如下：

*{
  margin: 0; 
  padding: 0; 
} 
.box {
  margin: 50px auto 0 auto;
  width: 400px;
  height: auto;
  border: solid 1px #222;
} 
#cont { 
  width: 400px;
  height: 600px; 
  position: relative;
  overflow: hidden;
  }
#go {
  width: 100%;
  height: 600px;
  position: absolute;
  top: 0;
  font: 500 30px 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
  text-align: center; 
  z-index: 99;
}
#go span {
  cursor: pointer;
  background-color: #fff;
  border-bottom: solid 1px #222;
}
#main {
  width: 400px;
  height: 600px;
  position: relative;
  top: -150px;
}
.row {
  width: 400px;
  height: 150px;
}
.row div {
  width: 99px;
  height: 149px;
  border: solid 1px #222;
  float: left;
  border-top-width: 0;
  border-left-width: 0;
  cursor: pointer;
}
#count {
  border-top: solid 1px #222;
  width: 400px;
  height: 50px;
  font: 500 30px/40px 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
  text-align: center;
}
#bgm{
  width: 400px;
  height: 50px;
  margin-top: -50px;
  position: absolute;
}
h3{text-align:center}

页面的body部分，一个audio标签放置自己喜欢的音乐，下面的div容器来放对应的游戏内容，代码如下：

<div class="box">
  <!-- 布局 -->
  <audio src="http://so1.111ttt.com:8282/2014/1/12m/24/5242317486.m4a?tflag=1497348780&pin=d7f4921c7c7a686404d86969d84cb475&ip=117.94.187.7#.mp3" id="bgm" controls loop></audio>
  <div id="cont"> 
    <div id="go">
      <span>开始游戏</span> 
    </div> 
      <div id="main"></div>
  </div> 
  <div id="count"></div>
</div>

页面的底部，通过javascript写出各类游戏事件等内容，部分代码如下：

var main = document.getElementById('main');
var go = document.getElementById('go');
var count = document.getElementById('count');
var cols = ['#1AAB8A','#E15650','#121B39','#80A84E'];


//动态创建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<4;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 = -150 + 'px';
      }
//删除边界外的盒子
      if(obj.children.length == 6){
//删除前，如果有盒子没有点击则结束游戏
        for(var i = 0;i<4;i++){
          if(obj.children[obj.children.length - 1].children[i].className == 'i'){
//游戏结束
            obj.style.top = '-150px';
            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 = "#bbb";
//清除盒子标记
      (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) 
}