编辑：秩名2020-08-05 09:25:43
兼容了IE，每得20分就加速一次!!!
效果如下：
图(1) 游戏初始
图(2) 游戏开始
代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><style>*{ 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: 700 60px '微软雅黑';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: 700 36px/50px '微软雅黑';text-align: center;}</style></head><body><div class="box"><!-- 布局 --><div id="cont"> <div id="go"><span>Game start</span> </div> <div id="main"></div></div> <div id="count"></div></div> </body><script>//得当前样式function getStyle(obj,arrt){//兼容IEreturn 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 = ['#1AAB8A','#E15650','#121B39','#80A84E'];//动态创建divfunction cDiv(classname){//创建divvar 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";}//移动divfunction 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 = 'Renew game';go.style.display = "block"; }} obj.removeChild(obj.children[obj.children.length - 1]);}//点击与计分obj.onclick = function(event){//点击的不是白盒子 // 兼容IEevent = 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;}else {//游戏结束obj.style.top = 0;count.innerHTML = '游戏结束,最高得分: ' + num;//关闭定时器clearInterval(obj.timer);//显示开始游戏go.children[0].innerHTML = 'Renew game';go.style.display = "block";}//盒子加速if(num%20 == 0){speed++;}} },20) } //开始游戏go.children[0].onclick = function(){//开始前判断main里面是否有盒子，有则全部删除if(main.children.length){//暴力清楚main里面所有盒子main.innerHTML = '';}//清空计分count.innerHTML = '游戏开始'; //隐藏开始盒子this.parentNode.style.display = "none";//调用定时器move(main);} </script></html>以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持iefans网！
