日期:2014-05-16  浏览次数:20343 次

js版俄罗斯方块(二)

之前曾发过一个js版的俄罗斯方块,界面比较简单,Bug也不少。抽空重构了一下,加入了javaScript面向对象的知识,修复了一些明显的BUG。

斌斌 (给我写信) 原创博文(http://blog.csdn.net/binbinxyz),转载请注明出处!

源码(下载:http://download.csdn.net/detail/binbinxyz/5186774)公开如下:

<!DOCTYPE html>
<html>
  <head>
    <title>俄罗斯方块_经典游戏</title>
	
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="keywords" content="游戏, 经典游戏, 俄罗斯方块, tetris">
	<meta http-equiv="description" content="斌斌的小游戏:俄罗斯方块">

	<link rel="icon" href="http://www.ifeng.com/favicon.ico" type="image/x-icon" />
	<link rel="shortcut icon" href="http://www.ifeng.com/favicon.ico" type="image/x-icon" />
	<link rel="bookmark" href="http://www.ifeng.com/favicon.ico" type="image/x-icon" />

	<!-- 
		游戏名称:俄罗斯方块(Tetris)<br/>
		游戏版本:1.1<br/>
		作者:斌斌<br/>
		邮箱:cn.binbin@qq.com<br/>
		网站:http://blog.csdn.net/binbinxyz<br/>
	-->

	<style type="text/css">
	<!--  
	.thinBorderTable{border-collapse:collapse;}
	.thinBorderTable th{background:#ffffff;border:solid 1px #000000;}
	.thinBorderTable td{background:#ffffff;border:solid 1px #000000;}
	
	.outerBorderTable{border-collapse:collapse;}
	.outerBorderTable th{background:#ffffff;}
	.outerBorderTable td{background:#ffffff;}
	-->
	</style>

  </head>
  <body>
  <div id="game" align="center">
  	<h2>俄罗斯方块  <span style="font-size: 14px">V1.1</span></h2>
  	<table>
  		<tr>
  			<td>
  				<fieldset>
					<legend>俄罗斯方块的<b>基本规则</b></legend>
	  				<table id="info">
						<tr valign="top"><td>1、</td><td width='400px'>一个用于摆放小型正方形的平面虚拟矩形,标准大小:宽为10,高为20,以小正方形为单位。</td></tr>
						<tr valign="top"><td>2、</td><td width='400px'>一组由4个小型正方形组成的规则图形即方块(Tetromino ),共有7种,分别以S、Z、L、J、I、O、T这7个字母的形状来命名。</td></tr>
						<tr valign="top"><td>3、</td><td width='400px'>部分游戏有单格方块,可以穿透固定的方块到达最下层空位。</td></tr>
						<tr valign="top"><td>4、</td><td width='400px'>玩家的操作有:以90度为单位旋转方块,以格子为单位左右移动方块,让方块加速落下。</td></tr>
						<tr valign="top"><td>5、</td><td width='400px'>方块移到区域最下方或是落到其他方块上会固定在该处,而新的方块从区域上方开始落下。</td></tr>
						<tr valign="top"><td>6、</td><td width='400px'>当区域中某一行横向格子全部由方块填满,则该行会消失。</td></tr>
						<tr valign="top"><td>7、</td><td width='400px'>当固定的方块堆到区域最上方而无法消除层数时,则游戏结束。</td></tr>
						<tr valign="top"><td>8、</td><td width='400px'>游戏会提示下一个要落下的方块。</td></tr>
						<tr valign="top"><td>9、</td><td width='400px'>计分标准:下落一个方块1分,一次消一行10分、2行30分、3行60分、4行100分。</td></tr>
					</table>
				</fieldset>
				
				<fieldset>
					<legend>游戏按键提示</legend>
					<table style="width: 430px;margin: 0px;padding: 0px">
						<tr>
							<td><b>↑</b>:旋转方块</td>
							<td><b>↓</b>:方块下移</td>
							<td><b>←</b>:方块左移</td>
							<td><b>→</b>:方块右移</td>
						</tr>
						<tr>
							<td colspan="4">空格键(<b>Spacebar</b>):方块降落(直接下移到位)</td>
						</tr>
					</table>
				</fieldset>
  			</td>
  			<td>
  				<fieldset>
					<lege