其他分享
首页 > 其他分享> > 别踩白块

别踩白块

作者:互联网

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>益智类游戏别踩白块小游戏</title>
		<style type="text/css">
			* {
				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;
			}
		
			h3 {
				text-align: center
			}
		</style>
	</head>

	<body>
		<h3>千万别踩小白块哦</h3>
		<div class="box">
			
			<div id="cont">
				<div id="go">
					<span>开始游戏</span>
				</div>
				<div id="main"></div>
			</div>
			<div id="count"></div>
		</div>
	</body>
	<script>
		//得当前样式
		function getStyle(obj, arrt) {
			//兼容IE
			return 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'];
		

		//动态创建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++;
						}
					}
					
			}, 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>

  

标签:白块,obj,top,event,var,main,children
来源: https://www.cnblogs.com/ccyq/p/11333159.html