7block by David Pan | JavaScriptSource

7block by David Pan

David Pan Apr 8, 2012

Abstract

7block is a simple but deceptively hard game in which the goal is to stack moving blocks to the top.

Description

7block is a simple but deceptively hard game in which the goal is to stack moving blocks to the top. The higher the stack, the faster the blocks move. If you miss the stack, you lose. If you complete the stack, you win. You can set a record if you complete the stack fast enough.

Code Snippet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en">  <head>  <title>7block | Stack the blocks to the top.</title>  <style type="text/css"> body { 	font-family: calibri, sans-serif; 	text-align: center; }  #game { 	margin-left: auto; 	margin-right: auto;  	border-collapse: collapse; 	border-spacing: 0px; 	border: 1px solid black;  	empty-cells: show; }  #game tr td { 	border: 1px solid black; 	background-color: transparent; }   .button { 	cursor: pointer; 	color: rgb(0, 0, 255); }  td.button:hover { 	background-color: rgb(216, 216, 255); }  #bar { 	margin-left: auto; 	margin-right: auto; 	border-collapse: collapse; 	border-spacing: 0px; 	text-align: center; }  #stats { 	position: absolute; 	z-index: 1; 	top: 0px; 	left: 0px; 	width: 100%; 	background-color: rgb(216, 216, 255); 	opacity: 0.7; 	display: none; }  #help { 	position: absolute; 	z-index: 1; 	top: 0px; 	left: 0px; 	width: 100%; 	background-color: rgb(216, 216, 255); 	opacity: 0.7; 	display: none; }  #welcome { 	position: absolute; 	z-index: 2; 	top: 0px; 	left: 0px; 	width: 100%; 	background-color: rgb(216, 216, 255); 	opacity: 0.8; 	display: none; } </style>  <script type="text/javascript"> var rowNumber = 1; var colNumber = 0; var baseBlock = 0; var direction = 1;  var colTemp = 5;  var clockTime; var clockString; var clockStart; var clockEnd;  var times = [500, 350, 200, 100, 75, 50, 1]; var timer; var currentTime;  var gamesPlayed; var gamesWon;  var recordTime; var recordString; var recordHolder;  var isPlayed = 0; var isWon = 0; var isRecord = 0;  var blockArray = new Array(8);  function start() { 	for (var i = 1; i <= 7; i++) 	{ 		blockArray[i] = new Array(6); 		 		for (var j = 1; j <= 5; j++) 		{ 			blockArray[i][j] = document.getElementById('S' + i + j); 		} 	} 	 	resize(); 	document.getElementById("stats").onclick = toggleStats; 	document.getElementById("help").onclick = toggleHelp; 	update(); 	welcome(); 	clockStart = new Date().getTime(); 	currentTime = times[0]; 	shift(); }  function restart() { 	clearTimeout(timer);  	document.getElementById("game").style.backgroundColor = "transparent";  	for (var i = 1; i <= 7; i++) 	{ 		for (var j = 1; j <= 5; j++) 		{ 			clearBlock(i, j); 		} 	}  	document.getElementById("time").innerHTML = "0";  	rowNumber = 1; 	colNumber = 0; 	baseBlock = 0; 	direction = 1;  	colTemp = 5;  	clockStart = 0; 	clockEnd = 0;  	isPlayed = 0; 	isWon = 0; 	isRecord = 0;  	clockStart = new Date().getTime(); 	currentTime = times[0]; 	shift(); }  function stack() { 	clearTimeout(timer);  	if (rowNumber == 1) 	{ 		currentTime = times[rowNumber]; 		rowNumber++; 		baseBlock = colNumber; 		shift(); 	} 	else if (colNumber != baseBlock) 	{ 		lose(); 	} 	else if (rowNumber == 7) 	{ 		win(); 	} 	else 	{ 		currentTime = times[rowNumber]; 		rowNumber++; 		shift(); 	} }  function displayTime() { 	clockEnd = new Date().getTime();  	clockTime = (clockEnd - clockStart) / 1000;  	var clockTemp = (clockEnd - clockStart).toString(); 	clockString = "";  	if (clockTemp.length == 3) 	{ 		clockString += "0"; 	}  	clockString += clockTemp.substring(0, clockTemp.length - 3) + "." + clockTemp.substring(clockTemp.length - 3);  	document.getElementById("time").innerHTML = clockString; }  function win() { 	isPlayed = 1; 	isWon = 1; 	displayTime();  	if (clockTime >= recordTime) 	{ 		document.getElementById("game").style.backgroundColor = "rgb(0, 255, 0)"; 	} 	else 	{ 		record(); 	}  	update(); }  function lose() { 	isPlayed = 1; 	displayTime(); 	document.getElementById("game").style.backgroundColor = "rgb(255, 0, 0)"; 	update(); }  function record() { 	isRecord = 1;  	document.getElementById("game").style.backgroundColor = "rgb(255, 255, 0)";  	recordString = clockString; 	recordTime = clockTime;  	var nameTemp = prompt("Congratulations! You set a new record of " + recordString + " seconds.\n\nPlease enter your name:", "");  	if (nameTemp == null || nameTemp == "") 	{ 		recordHolder = "Anonymous"; 	} 	else 	{ 		recordHolder = nameTemp.substr(0, 30); 	} }  function colorBlock(row, col) { 	blockArray[row][col].style.backgroundColor = 'rgb(0, 0, 255)'; }  function clearBlock(row, col) { 	blockArray[row][col].style.backgroundColor = 'transparent'; }  function shift() { 	colNumber += direction;  	if (colNumber == 5) 	{ 		direction = -1; 	} 	else if (colNumber == 1) 	{ 		direction = 1; 	}  	colorBlock(rowNumber, colNumber); 	clearBlock(rowNumber, colTemp);  	colTemp = colNumber;  	timer = setTimeout(shift, times[rowNumber - 1]); }  function keyAction(event) { 	if ((event.keyCode == 32) && (isPlayed == 0)) 	{ 		stack(); 	}  	if (event.keyCode == 78) 	{ 		restart(); 	} }  function clickAction() { 	if (isPlayed == 0) 	{ 		stack(); 	} }  function update() { 	// ************************************************************** 	// NOTE: You need separate php files for this to work. 	// ************************************************************** 	try 	{ 		var cacheBuster = new Date().getTime();  		var req1 = new XMLHttpRequest();  		req1.onreadystatechange = function (event) 		{ 			if (req1.readyState == 4) 			{ 				 if (req1.status == 200) 				 { 					 var stats = req1.responseXML;  					 gamesPlayed = Number(stats.getElementsByTagName("games")[0].getElementsByTagName("played")[0].childNodes[0].nodeValue); 					 gamesWon = Number(stats.getElementsByTagName("games")[0].getElementsByTagName("won")[0].childNodes[0].nodeValue); 					  					 document.getElementById("gamesWon").innerHTML = gamesWon + isWon; 					 document.getElementById("gamesPlayed").innerHTML = gamesPlayed + isPlayed;  					 document.getElementById("success").innerHTML = Math.round(100 * gamesWon / gamesPlayed);  					 if (isRecord == 0) 					 { 						 recordString = stats.getElementsByTagName("record")[0].getElementsByTagName("time")[0].childNodes[0].nodeValue; 						 recordTime = Number(recordString); 						 recordHolder = stats.getElementsByTagName("record")[0].getElementsByTagName("holder")[0].childNodes[0].nodeValue; 					 }  					 document.getElementById("recordTime").innerHTML = recordString; 					 document.getElementById("recordHolder").innerHTML = recordHolder; 				 } 				 else 				 { 					 alert("Error with XMLHttpRequest"); 				 } 			} 		};  		req1.open("GET", "stats.xml?" + cacheBuster, true); 		req1.send(null);  		var req2 = new XMLHttpRequest();  		req2.open("POST", "update.php", true); 		req2.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  		var postString = "p=" + isPlayed + "\&w=" + isWon + "\&c=" + cacheBuster;  		if (isRecord == 1) 		{ 			postString += "\&t=" + recordString + "\&h=" + recordHolder; 		}  		req2.send(postString); 	} 	catch (error) 	{ 	} }  function toggleStats() { 	document.getElementById("help").style.display = "none";  	if (document.getElementById("stats").style.display == "block") 	{ 		document.getElementById("stats").style.display = "none"; 	} 	else 	{ 		document.getElementById("stats").style.display = "block"; 	} }  function toggleHelp() { 	document.getElementById("stats").style.display = "none";  	if (document.getElementById("help").style.display == "block") 	{ 		document.getElementById("help").style.display = "none"; 	} 	else 	{ 		document.getElementById("help").style.display = "block"; 	} }  function generateTable() { 	html = '<table id="game">\n'; 	 	for (var i = 7; i >= 1; i--) 	{ 		html += '\t<tr>\n'; 		 		for (var j = 1; j <= 5; j++) 		{ 			html += '\t\t<td id="S' + i + '' + j + '"></td>\n'; 		} 		 		html += '\t</tr>\n'; 	} 	 	html += '</table>'; 	 	document.write(html); }  function resize() { 	var window_width = parseInt(window.innerWidth || document.documentElement.clientWidth) - 30; // parseInt just in case 	var window_height = parseInt(window.innerHeight || document.documentElement.clientHeight) - 30; // support for IE 	 	window_width = (window_width < 0) ? 0 : window_width; 	window_height = (window_height < 0) ? 0: window_height; 	 	//alert('window ' + window_width + ' ' + window_height); 	 	var ratio = 5.0 / 9.0 // width : height 	 	//alert('ratio ' + ratio); 	 	var game_width; 	var game_height; 	 	if (window_width * 1.0 / window_height > ratio) 	{ 		game_height = parseInt(window_height * 7.0 / 9.0); 		game_width = parseInt(game_height * 5.0 / 7.0); 	} 	else 	{ 		game_width = parseInt(window_width); 		game_height = parseInt(game_width * 7.0 / 5.0); 	} 	 	//alert(game_width + ' ' + game_height); 	 	var game = document.getElementById('game'); 	 	game.style.width = game_width + 'px'; 	game.style.height = game_height + 'px'; 	 	var bar = document.getElementById('bar'); 	bar.style.width = game_width + 'px'; 	 	var header = document.getElementById('header'); 	header.style.height = parseInt(game_height / 7) + 'px'; 	header.style.fontSize = parseInt(game_height / 15) + 'px'; 	 	var title = document.getElementById('title'); 	title.style.width = parseInt(game_width * 3.0 / 5) + 'px'; 	title.style.fontSize = parseInt(game_height / 11) + 'px'; 	 	var subtitle = document.getElementById('subtitle'); 	subtitle.style.fontSize = parseInt(game_height / 25) + 'px'; 	 	var time = document.getElementById('time'); 	time.style.fontSize = parseInt(game_height / 20) + 'px'; 	time.style.padding = parseInt(game_height / 55) + 'px'; 	 	var stats = document.getElementById('stats'); 	stats.style.fontSize = title.style.fontSize; 	 	var stats = document.getElementById('help'); 	stats.style.fontSize = title.style.fontSize; }  /* Start copy from http://www.quirksmode.org/js/cookies.html */ function readCookie(name) { 	var nameEQ = name + "="; 	var ca = document.cookie.split(';'); 	for(var i=0;i < ca.length;i++) { 		var c = ca[i]; 		while (c.charAt(0)==' ') c = c.substring(1,c.length); 		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); 	} 	return null; } /* End copy */   function welcome() { 	var title = document.getElementById('title'); 	 	var welcome = document.getElementById('welcome'); 	welcome.style.fontSize = title.style.fontSize; 	welcome.style.display = 'block'; 	 	var welcome_time = 1000; 	 	var cook = readCookie('sevenblockie'); 	 	if (cook == null) 	{ 		welcome_time = 3000; 		document.cookie = 'sevenblockie=basketball';   	} 	 	setTimeout(unwelcome, welcome_time); }  var welcome_opacity = 0.8;  function unwelcome() { 	welcome_opacity -= 0.03; 	 	var welcome = document.getElementById('welcome'); 	 	if (welcome_opacity > 0) 	{ 		welcome.style.opacity = '' + welcome_opacity.toFixed(2); 		setTimeout(unwelcome, 60); 	} 	else 	{ 		welcome.style.display = 'none'; 	} } </script>  </head>  <body onload="start();" onkeydown="keyAction(event);" onclick="clickAction();" onresize="resize();">  <script type="text/javascript"> generateTable(); </script>   <table id="bar"> 	<tr id="header"> 		<td class="button" onclick="toggleStats();">+</td> 		<td id="title">7block</td> 		<td class="button" onclick="toggleHelp();">?</td> 	</tr> 	<tr> 		<td id="subtitle" colspan="3">Stack the blocks to the top.</td> 	</tr> 	<tr> 		<td id="time" colspan="3">0</td> 	</tr> </table>  <div id="welcome"> 	<span style="font-weight: bold; color: blue;">Welcome to 7block!</span> 	<br/> 	Click the '<b>?</b>' for help and '<b>+</b>' for real-time statistics. </div>  <div id="stats"> 	<span style="font-weight: bold; color: blue;">Stats</span> 	<br/> 	Record: <b><span id="recordTime"></span></b> seconds set by <b><span id="recordHolder"></span></b> 		<br/> 	<b><span id="gamesWon"></span></b> wins out of <b><span id="gamesPlayed"></span></b> games played 		<br/> 	<b><span id="success"></span>%</b> chance of success </div>  <div id="help"> 	<span style="font-weight: bold; color: blue;">Help</span> 	<br/> 	<b>Click</b> or press <b>[SPACE BAR]</b> to stack 		<br/> 	Press <b>[N]</b> for a new game 		<br/> 	<span style="background-color: rgb(255, 0, 0)">Red</span> = You lost 		<br/> 	<span style="background-color: rgb(0, 255, 0)">Green</span> = You won 		<br/> 	<span style="background-color: rgb(255, 255, 0)">Yellow</span>	= You set a record 		<br/><br/> 	<span style="font-size: 0.8em;"><a href="about.html">About 7block</a> | &copy; <a href="http://dalpi.co.cc">David Pan</a></span> </div>  </body>  </html>

Leave a Response

(2 comments)

I created page and there is text on it but nothing works.

phil kay Jul 14, 2013

Do Your remember that arcade game were u have 3 block that stack up to the top eventualy droping to 2 and then to 1. If you get the blocks off-centre they fall off the 3 or 2 block bar so you have one less the next turn? This could make you a master.

Hayden May 3, 2012