White blocks do not step

<!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">
				<div the above mentioned id = "main"> </ div>
				</ div>
					<span> Play </ span>
			</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 ()
			// random value
			// add the corresponding row class Class
			oDiv.className = classname; 
			then dynamically create four hours after // div created and added to the row lines inside 
			for (var J = 0; J <4; J ++) { 
				var iDiv = document.createElement ( 'div'); 
				oDiv .appendChild (iDiv); 
			} 
			@ then add to the main line inside 
			// need to add a position determination 
			IF (main.children.length == 0) { 
				main.appendChild (oDiv); 
			} the else { 
				main.insertBefore (oDiv , main.children [0]); 
			} 
			// random to a certain line inside div add a background color 
			oDiv.children [index] .style.backgroundColor cols = [index]; 
			// color marker boxes 
			oDiv.children [index] = .className "I"; 
		} 

		// move div 
		function move (obj) { 
			// Close a timer 
			clearInterval (obj.timer);
			// default speed and scoring 
			var Speed =. 5, 
				NUM = 0; 
			// start a timer with the timer management 
			obj.timer = the setInterval (function () { 
				// speed 
				var step = parseInt (getStyle (obj , 'top' )) + Speed; 
				// mobile box 
				obj.style.top + = STEP 'PX'; 
				// Create a new cassette Analyzing and 
				IF (the parseInt (the getStyle (obj, 'Top'))> = 0) { 
					CDIV ( ' Row '); 
					obj.style.top = -150 +' PX '; 
				} 
				// remove the box outside boundary 
				if (obj.children.length == 6) { 
					// before deleting, if there is no clicking the box end of the game 
					for (var I = 0; I <. 4; I ++) { 
						IF (obj.children [obj.children.length -. 1] .children [I] .className == 'I') { 
							// game ends 
							obj.style. top = '-150px';
							count.innerHTML = 'end of the game, the highest score:' + NUM;  
							/ / Off timer
							the clearInterval (obj.timer); 
							// start the game display 
							go.children [0] .innerHTML = 'restart'; 
							go.style.display = "Block" ; 
						} 
					} 
					obj.removeChild (obj.children [obj.children.length -. 1]); 
				} 

				// clicks and scoring 
				obj.onmousedown = function (Event) { 
						// not click white box 
						// compatibility IEs 
						Event = || the window.event Event; 
						IF ((event.target event.target:? event.srcElement) .className == 'I') { 
							case // color after clicking 
							? (event.target event.target: event.srcElement ) .style.backgroundColor = "#bbb"; 
							// Clear the box labeled
							(? event.target event.target: event.srcElement) .className = ''; 
							// score 
							NUM ++; 
							// score is displayed 
							count.innerHTML = 'Current Score:' + NUM; 
							bgm.play (); 
						} the else { 
							// end game 
							obj.style.top = 0; 
							count.innerHTML = 'end of the game, the highest score:' + NUM; 
							// timer off 
							the clearInterval (obj.timer); 
							// start the game display 
							go.children [0] .innerHTML = 'restart'; 
							go.style.display = "Block"; 
						} 
						// box acceleration 
						IF (NUM% 10 == 0) { 
							Speed ++; 
						} 
					} 
					
			}, 20 is) 
		} 

		// play
		go.children [0] .onclick = function () { 
			// start is determined whether the front inside main case, there are all delete 
			if (main.children.length) {
				// clear main force inside all boxes 
				main.innerHTML = ''; 
			} 
			// Empty scoring 
			count.innerHTML = 'Game Start'; 
			// hide the Start box 
			this.parentNode.style.display = "none"; 
			// call timer 
			Move (main); 
		} 
	</ Script> 

</ HTML>

  

Guess you like

Origin www.cnblogs.com/ccyq/p/11333159.html