<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> #cont { margin-top:100px; 400px; height: 400px; border:1px solid blue; position: relative; } #main { 400px; height: 400px; position: relative; top:-100px; } .row { height: 100px; } .row div { 98px; height: 98px; border:1px solid gray; float: left; } .black { background: black; } </style> <body> <h1>别踩白块第7步:加速及加速时的bug处理</h1> <h2 id="sc">0</h2> <div id="cont"> <div id="main"></div> </div> </body> <script> var main = document.getElementById('main'); var clock = null; var state = true; var speed = 2; function getStyle(el , attr) { return el.currentStyle ? el.currentStyle[attr] : getComputedStyle(el,null)[attr]; } // 造div function cDiv(className) { var div = document.createElement('div'); if(className) { div.className = className; } return div; } // 造一行,即连造4个小div function cRow() { // 造一个0-3之间的随机数 var ind = Math.floor(Math.random()*4); // 造一个行div var row = cDiv('row'); for(var i=0; i<4; i++) { if(i == ind) { row.appendChild(cDiv('black')); } else { row.appendChild(cDiv()); } } // 把行row塞到main里 if(main.firstChild) { main.insertBefore(row , main.firstChild); }else { main.appendChild(row); } } function move() { var top = getStyle(main , 'top'); top = parseInt(top) + speed; main.style.top = top + 'px' if(top > 0){ cRow(); main.style.top = '-100px'; // 判断最后一行是否含有黑块 if(main.lastChild.pass == undefined) { fail(); } } if(main.children.length>=5) { main.removeChild(main.lastChild); } } function init() { for(var i=0; i<4; i++) { cRow(); } main.onclick = function(ev) { ev.target = ev.target || ev.srcElement; if(state == false) { alert('重开一局吧'); } else if(ev.target.className == '') { fail(); } else { ev.target.className = ''; ev.target.parentNode.pass = true; var score = document.getElementById('sc'); var sc = parseInt(score.innerHTML)+1; score.innerHTML = sc; if(sc%10==0) { speed +=2; } } } clock = window.setInterval('move();' , 40); } function fail() { clearInterval(clock); state = false; alert('输了'); } init(); </script> </html>