*{
margin: 0;
padding: 0;
text-decoration: none;
}
h3{
text-align: center;
margin-top: 80px;
position: relative;
}
.wrapper{
width: 400px;
height: 600px;
position:relative;
margin: 15px auto;
border: 1px solid #000;
overflow:hidden;
/*background-color: #A9A9A9;*/
}
.wrapper #go{
width: 100%;
position: absolute;
top: 0;
text-align: center;
z-index: 99;
}
.wrapper #go a{
font-size: 60px;
color: red;
/* text-align: center;*/
}
.wrapper #main{
width: 100%;
height: 100%;
position: relative;
/*border: 1px solid red;*/
top: -150px;
}
.row{
width: 100%;
height: 150px;
}
.row div{
float: left;
width: 99px;
border-left: 1px solid #000;
height: 149px;
border-bottom: 1px solid #000;
}
别踩白块
var go = document.getElementById(‘go’);
var main = document.getElementById(‘main’);
var colorsArr = [‘yellow’,‘green’,‘blue’,‘pink’];
var speed = 10,num = 0,timer,flag = true;
function clickStart(){
go.addEventListener(‘click’,function(){
go.style.display = 'none';
move();
})
}
clickStart();
function move(){
clearInterval('timer');
timer = setInterval(function(){
var step = parseInt(main.offsetTop) + speed;
main.style.top = step + 'px';
if (parseInt(main.offsetTop) >= 0) {
main.style.top = "-150px";
cDiv();
}
var len = main.childNodes.length;
if (len == 6) {
for (var i = 0; i < 4; i++) {
if (main.childNodes[len - 1].childNodes[i].classList.contains('i')) {
alert('游戏结束,得分:' + num);
clearInterval('timer');
flag = false;
}
}
main.removeChild(main,childNodes[len -1]);
}
},80);
bindEvent();
}
function cDiv(){
var oDiv = document.createElement('div');
var index = Math.floor(Math.random()*4);
oDiv.setAttribute('class','row');
for (var j = 0; j < 4 ; j++) {
var iDiv = document.createElement('div');
oDiv.appendChild(iDiv);
}
if (main.childNodes.length == 0) {
main.appendChild(oDiv);
}else{
main.insertBefore(oDiv,main.childNodes[0]);
}
var clickDiv = main.childNodes[0].childNodes[index];
clickDiv.setAttribute('class','i');
clickDiv.style.backgroundColor = colorsArr[index];
}
function bindEvent(){
main.addEventListener('click',function(e){
if (flag) {
var tar = e.target;
if (tar.className == 'i') {
tar.style.backgroundColor = '#bbb';
tar.classList.remove('i');
num++;
}else{
alert('游戏结束,得分:' + num);
clearInterval(timer);
flag = false;
}
if (num % 10 == 0) {
speed ++;
}
}
})
}