原生js 实现别踩白块

*{

			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 ++;
		 }
		}
		 
	})
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值