JS俄羅斯方塊，包含完整的設(shè)計(jì)理念

更新時(shí)間：2010年12月11日 22:23:31 作者：
由于該游戲?qū)儆诙S游戲，所以布置好網(wǎng)格是寫(xiě)好該游戲的關(guān)鍵，無(wú)論是游戲窗口還是預(yù)覽窗口
下面是俄羅斯方塊的截圖：
請(qǐng)到這里下載源碼：

俄羅斯方塊在線演示下載地址
下面是代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title></title> 
<script type="text/javascript"> 
/********************************************js俄羅斯方塊源碼***********************************************/ 
//作者：高山流水 QQ：21243468 
//創(chuàng)建日期:2009-08-06 
//版權(quán)聲明:該作品由高山流水創(chuàng)作，轉(zhuǎn)載請(qǐng)注明出處，謝謝合作！ 
//游戲設(shè)計(jì)說(shuō)明： 
//1.由于該游戲?qū)儆诙S游戲，所以布置好網(wǎng)格是寫(xiě)好該游戲的關(guān)鍵，無(wú)論是游戲窗口還是預(yù)覽窗口、 
//方塊集虛擬map等都用到了網(wǎng)格的概念，這樣做的好處可以避免頻繁的獲取元素的位置，另外還可以對(duì)方塊集的移動(dòng) 
//進(jìn)行精確的定位和變形。這里比較重要的一點(diǎn)就是提前定義好方塊集的map，比如對(duì)于L方塊集，應(yīng)定義一個(gè)三乘三的正方形 
//網(wǎng)格,然后根據(jù)L的每一個(gè)形狀，確定方塊集中的每個(gè)方塊在正方形網(wǎng)格中的位置，另外還需要保存方塊集在map 
//（游戲窗口或者預(yù)覽窗）中的位置，這樣任意時(shí)刻，通過(guò)方塊集的位置，和方塊在正方形網(wǎng)格中的位置，就可以確定 
//方塊集中的每一個(gè)方塊在map中的位置。 
//2.該游戲主要用到了一些OOP的思想。比如定義一個(gè)基類base，方塊集類繼承自base類,其中還有對(duì)象的封裝，屬性， 
//枚舉的定義等,當(dāng)然還有事件，委托，attribute，垃圾收集器等，因?yàn)闀r(shí)間關(guān)系，就不做代碼演示了，各位有興趣可以自己 
//擴(kuò)展一下，加深對(duì)js OOP的理解。 
//3.js內(nèi)置對(duì)象的擴(kuò)展：比如Array.prototype.removeAt等 
/********************************************js俄羅斯方塊源碼**********************************************/ 
var Sys = null; 
function sys() { } 
sys.prototype = { 
GameMap: [], 
PreviewMap: [], 
BlocksObj: [], 
Timer: null, 
HorizontalNum: 10, //游戲map的水平格數(shù) 
VerticalNum: 18, //游戲map的豎直格數(shù) 
IsGameOver: false, //判斷游戲是否結(jié)束 
ScoreStrategy: [100, 300, 500, 800], //得分策略 
LevelScores: [100, 20000, 40000, 60000, 80000, 100000, 120000, 140000, 160000, 200000], //分?jǐn)?shù)等級(jí) 
IsPlay: false, //游戲進(jìn)行中 
IsFirstPlay: true, //是否第一次玩 
SmallGridNum: 6, //預(yù)覽map的格子數(shù)，為正方形 
DirectionEnum: { left: 0, right: 1, up: 2, down: 3 }, //方向的枚舉 
Speeds: [1000, 900, 800, 700, 600, 500, 400, 300, 200, 100], //速度，或者說(shuō)級(jí)別 
CurrentSpeed: 1000, //當(dāng)前級(jí)別或者說(shuō)速度 
TypeEnum: { none: 0, block: 1, blocks: 2 }, //類型 
BlocksEnum: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], //0為L(zhǎng)L，1為L(zhǎng)R，2為T，3為ZL，4為ZR，5為I，6為F,7為長(zhǎng)T 
BlocksStateNum: [4, 4, 4, 2, 2, 2, 1, 4, 4, 2], //對(duì)應(yīng)BlocksEnum中每個(gè)方塊集的變形個(gè)數(shù)，即有多少種變形 
BlocksShapeMaps: [ //方塊形狀集的集合 
[ //方塊集的虛擬map集合，對(duì)應(yīng)BlocksEnum，比如該map是L的map 
[[[2, 1]], [[0, 2], [1, 2], [2, 2]]], //L中的其中一個(gè)變形 
[[[1, 0]], [[1, 1]], [[1, 2], [2, 2]]], 
[[[0, 1], [1, 1], [2, 1]], [[0, 2]]], 
[[[1, 0], [2, 0]], [[2, 1]], [[2, 2]]] 
], 
[ 
[[[2, 0]], [[2, 1]], [[1, 2], [2, 2]]], 
[[[0, 1]], [[0, 2], [1, 2]], [[2, 2]]], 
[[[0, 0], [1, 0]], [[0, 1]], [[0, 2]]], 
[[[0, 1], [1, 1], [2, 1]], [[2, 2]]] 
], 
[ 
[[[0, 0], [1, 0], [2, 0]], [[1, 1]]], 
[[[1, 0]], [[0, 1], [1, 1]], [[1, 2]]], 
[[[1, 1]], [[0, 2], [1, 2], [2, 2]]], 
[[[0, 0]], [[0, 1], [1, 1]], [[0, 2]]] 
], 
[ 
[[[0, 0]], [[0, 1], [1, 1]], [[1, 2]]], 
[[[1, 1], [2, 1]], [[0, 2], [1, 2]]] 
], 
[ 
[[[1, 0]], [[0, 1], [1, 1]], [[0, 2]]], 
[[[0, 1], [1, 1]], [[1, 2], [2, 2]]] 
], 
[ 
[[[0, 0]], [[0, 1]], [[0, 2]], [[0, 3]]], 
[[[0, 3]], [[1, 3]], [[2, 3]], [[3, 3]]] 
], 
[ 
[[[0, 0], [0, 1]], [[1, 0], [1, 1]]] 
], 
[ 
[[[0, 0], [1, 0], [2, 0]], [[1, 1]], [[1, 2]]], 
[[[2, 0]], [[0, 1], [1, 1], [2, 1]], [[2, 2]]], 
[[[1, 0]], [[1, 1]], [[0, 2], [1, 2], [2, 2]]], 
[[[0, 0]], [[0, 1], [1, 1], [2, 1]], [[0, 2]]] 
], 
[ 
[[[0, 1], [1, 1], [2, 1]], [[0, 2]], [[2, 2]]], 
[[[1, 0], [2, 0]], [[2, 1]], [[1, 2], [2, 2]]], 
[[[0, 1], [2, 1]], [[0, 2], [1, 2], [2, 2]]], 
[[[1, 0], [2, 0]], [[1, 1]], [[1, 2], [2, 2]]] 
], 
[ 
[[[0, 0], [1, 0]], [[1, 1]], [[1, 2], [2, 2]]], 
[[[2, 0]], [[0, 1], [1, 1], [2, 1]], [[0, 2]]] 
], 
], 
ColorEnum: [[0, 0], [-28, 0], [-56, 0], [-84, 0], [-112, 0], [-140, 0], [-168, 0], [0, 0], [-28, 0], [-56, 0]], //顏色的枚舉，對(duì)應(yīng)BlocksEnum 
CreateGameMap: function() { //創(chuàng)建游戲map 
for (var i = 0; i < this.VerticalNum; i++) { 
this.GameMap.push([]); 
for (var j = 0; j < this.HorizontalNum; j++) { 
this.GameMap[i][j] = {}; 
this.GameMap[i][j][Sys.TypeEnum.blocks] = null; 
} 
} 
}, 
GetBlocks: function() { //獲取GameMap里的方塊集 
for (var i = 0; i < this.BlocksObj.length; i++) { 
if (this.BlocksObj[i].isInGameMap) { 
return this.BlocksObj[i]; 
} 
} 
return null; 
}, 
AllowBlocksMove: function() { //是否允許方塊集移動(dòng) 
var blocksItem = this.GetBlocks(); 
var itemPosArray = this._getBlocksItemPosArray(blocksItem, false); 
return this.NoBlocksInthePlace(itemPosArray, blocksItem) && this.CheckBoundary(itemPosArray, blocksItem); 
}, 
GetMaxAndMinItemPosArray: function(itemPosArray) { //獲取最大最小方塊位置集合 
itemPosArray.ItemPosXArray.sorts(); 
itemPosArray.ItemPosYArray.sorts(); 
return { maxItemPosX: itemPosArray.ItemPosXArray[itemPosArray.ItemPosXArray.length - 1], maxItemPosY: itemPosArray.ItemPosYArray[itemPosArray.ItemPosYArray.length - 1], minItemPosX: itemPosArray.ItemPosXArray[0], minItemPosY: itemPosArray.ItemPosYArray[0] }; 
}, 
NoBlocksInthePlace: function(itemPosArray, blocksItem) { //檢測(cè)游戲方格中是否已經(jīng)有方塊 
return this._isOverMapChild(itemPosArray, blocksItem) ? false : true; 
}, 
CheckBoundary: function(itemPosArray, blocksItem) { //是否到達(dá)邊界了 
var maxAndMinItemPosArray = this.GetMaxAndMinItemPosArray(itemPosArray); 
var isNotToBoundary = false; 
switch (blocksItem.currentDirectionEnum) { 
case this.DirectionEnum.left: 
isNotToBoundary = (maxAndMinItemPosArray.minItemPosX > 0) 
break; 
case this.DirectionEnum.right: 
isNotToBoundary = (maxAndMinItemPosArray.maxItemPosX < this.HorizontalNum - 1) 
break; 
case this.DirectionEnum.down: 
isNotToBoundary = (maxAndMinItemPosArray.maxItemPosY < this.VerticalNum - 1); 
break; 
} 
return isNotToBoundary; 
}, 
_isOverMapChild: function(itemPosArray, blocksItem) { //檢測(cè)是否會(huì)覆蓋某個(gè)游戲方格中的元素 
var isOverMapChild = false; 
for (var i = 0; i < itemPosArray.ItemPosYArray.length; i++) { 
var itemX = itemPosArray.ItemPosXArray[i]; 
var itemY = itemPosArray.ItemPosYArray[i]; 
if (blocksItem.currentDirectionEnum == this.DirectionEnum.left) { 
itemX--; 
} 
else if (blocksItem.currentDirectionEnum == this.DirectionEnum.right) { 
itemX++; 
} 
else if (blocksItem.currentDirectionEnum == this.DirectionEnum.down) { 
itemY++; 
} 
if (this.GameMap[itemY] && this.GameMap[itemY][itemX] && this.GameMap[itemY][itemX][this.TypeEnum.blocks] != null) { 
isOverMapChild = true; 
break; 
} 
} 
return isOverMapChild; 
}, 
_getBlocksItemPosArray: function(blocksItem, isRelative) { //獲取方塊集的位置集合，isRelative=true獲取的是方塊相對(duì)方塊集map的位置，否則是方塊相對(duì)游戲map的位置 
var itemPosXArray = []; 
var itemPosYArray = []; 
for (var i = 0; i < blocksItem.blocks.length; i++) { 
if (isRelative) { 
itemPosXArray.push(blocksItem.blocks[i].x); 
itemPosYArray.push(blocksItem.blocks[i].y); 
} 
else { 
itemPosXArray.push(blocksItem.blocks[i].x + blocksItem.x); 
itemPosYArray.push(blocksItem.blocks[i].y + blocksItem.y); 
} 
} 
return { ItemPosXArray: itemPosXArray, ItemPosYArray: itemPosYArray }; 
}, 
GetBlocksInitPos: function(blocks) { //獲取方塊的初始位置 
var blocksItem = null; 
if (!blocks) 
blocksItem = this.GetBlocks(); 
else 
blocksItem = blocks; 
var itemPosArray = this._getBlocksItemPosArray(blocksItem, true); 
itemPosArray.ItemPosXArray = itemPosArray.ItemPosXArray.filter(); 
itemPosArray.ItemPosYArray = itemPosArray.ItemPosYArray.filter(); 
var childsNumX = itemPosArray.ItemPosXArray.length; 
var childsNumY = itemPosArray.ItemPosYArray.length; 
var maxAndMinItemPosArray = this.GetMaxAndMinItemPosArray(itemPosArray); 
if (blocks) //獲取方塊集在預(yù)覽map中的初始位置 
return { x: (this.SmallGridNum - childsNumX - 1) / 2 + 0.5 - maxAndMinItemPosArray.minItemPosX, y: (this.SmallGridNum - childsNumY - 1) / 2 + 0.5 - maxAndMinItemPosArray.minItemPosY }; 
else //獲取方塊集在游戲map中的初始位置 
return { x: parseInt((this.HorizontalNum - childsNumX - 1) / 2) + 1 - maxAndMinItemPosArray.minItemPosX, y: -(childsNumY + maxAndMinItemPosArray.minItemPosY) }; 
}, 
GetNextActiviteBrocks: function() { //獲取下一個(gè)活動(dòng)的方塊集 
for (var i = 0; i < this.BlocksObj.length; i++) { 
if (this.BlocksObj[i].isInGameMap) { 
this.BlocksObj.removeAt(i); 
} 
} 
this.BlocksObj[0].isInGameMap = true; 
var itemPos = this.GetBlocksInitPos(); 
this.BlocksObj[0].x = itemPos.x; 
this.BlocksObj[0].y = itemPos.y; 
this.BlocksObj[0].AddToMap(false, false); 
this.CreateBlocks(); 
}, 
PlayGame: function() { //啟動(dòng)游戲 
this.IsPlay = true; 
this.NaturalMove(); 
if (!this.IsFirstPlay) { 
return; 
} 
this.GetNextActiviteBrocks(); 
}, 
AddToGameMapGrid: function() { //加入到游戲map網(wǎng)格中 
var blocks = this.GetBlocks(); 
blocks.UseGrid(this.GameMap, blocks); 
}, 
GetScore: function() { //分?jǐn)?shù)處理 
var rowIndexArray = []; 
for (var i = 0; i < this.VerticalNum; i++) { //獲取滿行的行數(shù) 
var entireRow = true; 
for (var j = 0; j < this.HorizontalNum; j++) { 
if (this.GameMap[i][j][this.TypeEnum.blocks] == null) { 
entireRow = false; 
break; 
} 
} 
if (entireRow) 
rowIndexArray.push(i); 
} 
if (rowIndexArray.length > 0) { 
this._FreeMapGrid(rowIndexArray); 
document.getElementById("score").innerText = this.ScoreStrategy[rowIndexArray.length - 1] + parseInt(document.getElementById("score").innerText); 
this.CheckTheLevel(); 
} 
}, 
CheckTheLevel: function() { //檢測(cè)是否進(jìn)入下一個(gè)級(jí)別 
var currentScore = parseInt(document.getElementById("score").innerText); 
var speedList = document.getElementById("speed"); 
var currentLevel = parseInt(speedList.options[speedList.selectedIndex].text) - 1; 
var levelScore = this.LevelScores[currentLevel]; 
if (currentScore >= levelScore) { 
if (currentLevel < this.LevelScores.length) { 
var element = document.getElementById("gameOver"); 
element.innerText = "恭喜你通過(guò)第" + (speedList.selectedIndex + 1) + "關(guān)"; 
element.style.display = "block"; 
this.PauseGame(); 
document.getElementById("btnStart").disabled = true; 
document.getElementById("speed").disabled = true; 
this._goToNextLevel.delay(3000); 
} 
else { 
this._finishAllTheLevel(element); 
} 
} 
}, 
_goToNextLevel: function() { //進(jìn)入下一個(gè)級(jí)別,速度加快 
Sys.IsPlay = true; 
document.getElementById("btnStart").disabled = false; 
var speedList = document.getElementById("speed"); 
speedList.disabled = false; 
speedList.options[speedList.selectedIndex + 1].selected = true; 
Sys.CurrentSpeed = Sys.Speeds[speedList.selectedIndex + 1]; 
Sys.NaturalMove(); 
document.getElementById("gameOver").style.display = "none"; 
}, 
_finishAllTheLevel: function() { //完成所有的游戲級(jí)別 
this.PauseGame(); 
}, 
_FreeMapGrid: function(rowIndexArray) { //從游戲map中釋放滿行的網(wǎng)格 
var gameMap = this.GameMap; 
var startIndex = rowIndexArray[0]; 
var len = rowIndexArray.length; 
var maxIndex = startIndex + len - 1; 
for (var i = startIndex; i <= maxIndex; i++) { 
for (var j = 0; j < this.HorizontalNum; j++) { 
if (gameMap[i][j][this.TypeEnum.blocks] != null) { 
document.getElementById("map").removeChild(gameMap[i][j][this.TypeEnum.blocks].domElement); 
gameMap[i][j][this.TypeEnum.blocks] = null; 
} 
} 
} 
this.ResetMapGrid(rowIndexArray); 
}, 
ResetMapGrid: function(rowIndexArray) { //重置游戲網(wǎng)格 
var gameMap = this.GameMap; 
var maxIndex = rowIndexArray[0]; 
var len = rowIndexArray.length; 
for (var i = maxIndex - 1; i >= 0; i--) { 
for (var j = 0; j < this.HorizontalNum; j++) { 
if (gameMap[i][j][this.TypeEnum.blocks] != null) { 
this._resetMapElement(gameMap[i][j][this.TypeEnum.blocks].domElement, len); 
gameMap[i + len][j][this.TypeEnum.blocks] = gameMap[i][j][this.TypeEnum.blocks]; 
gameMap[i][j][this.TypeEnum.blocks] = null; 
} 
} 
} 
}, 
_resetMapElement: function(element, len) { //重置dom元素，比如共有滿行兩行，則之上的元素均需下降兩個(gè) 
element.style.top = (parseInt(element.style.top) + 28 * len) + "px"; 
}, 
InitSpeed: function() { //初始化游戲級(jí)別 
var speedList = document.getElementById("speed"); 
if (speedList.options.length == 0) { 
for (var i = 0; i < this.Speeds.length; i++) { 
var varItem = new Option(i + 1, this.Speeds[i]); 
speedList.options.add(varItem); 
} 
} 
this.SetSpeedSelected(); 
}, 
SetSpeedSelected: function() { //選中級(jí)別 
var speedList = document.getElementById("speed"); 
for (var i = 0; i < speedList.options.length; i++) { 
if (speedList.options[i].value == this.CurrentSpeed) { 
speedList.options[i].selected = true; 
break; 
} 
} 
}, 
GameOver: function() { //游戲結(jié)束 
this.IsGameOver = true; 
this.PauseGame(); 
var element = document.getElementById("gameOver"); 
element.innerText = "Game Over!"; 
element.style.display = "block"; 
document.getElementById("btnStart").value = "try again"; 
}, 
PauseGame: function() { //暫停游戲 
this.IsPlay = false; 
clearInterval(this.Timer); 
}, 
CreateBlocks: function() { //創(chuàng)建方塊集 
var currentNum = this.BlocksEnum.length.getRandom(); 
var blocks = new Blocks(0, 0, this.BlocksStateNum[currentNum], currentNum, this.ColorEnum[currentNum]); 
blocks.Init(); 
if (this.BlocksObj.length == 3) 
Sys.BlocksObj.pop(); 
Sys.BlocksObj.push(blocks); 
}, 
NaturalMove: function() { //自然下落 
this.Timer = setInterval("Moving()", Sys.CurrentSpeed); 
} 
} 
function Base() { } //定義base類 
Base.prototype.AddToMap = function(isAddToPreviewMap, isMoving) { //添加方塊集到map中 
for (var i = 0; i < this.blocks.length; i++) { 
var element = null; 
if (!this.isInGameMap) { //如果方塊集是在預(yù)覽map中 
element = document.createElement("DIV"); 
document.getElementById("PreviewMap").appendChild(element); 
this.blocksElement.push(element); 
this.blocks[i].domElement = element; 
} 
else 
element = this.blocksElement[i]; 
if (!isAddToPreviewMap && !isMoving) //由預(yù)覽map移動(dòng)到游戲map時(shí) 
document.getElementById("map").appendChild(element); 
element.style.position = "absolute"; 
element.style.left = ((this.x + this.blocks[i].x) * 28) + "px"; //設(shè)置元素所在的map的位置 
element.style.top = ((this.y + this.blocks[i].y) * 28) + "px"; 
element.style.backgroundPositionX = this.color[0]; 
element.style.backgroundPositionY = this.color[1]; 
} 
} 
Base.prototype.UseGrid = function(map, blocksItem) { //方塊集加入到游戲map中 
for (var i = 0; i < blocksItem.blocks.length; i++) { 
var itemX = blocksItem.x + blocksItem.blocks[i].x; 
var itemY = blocksItem.y + blocksItem.blocks[i].y; 
if (blocksItem.y < 0) { 
Sys.GameOver(); 
return; 
} 
map[itemY][itemX] = {}; 
map[itemY][itemX][this.type] = blocksItem.blocks[i]; 
} 
} 
function Block(x, y) { //定義方塊結(jié)構(gòu)體 
this.x = x; 
this.y = y; 
this.type = Sys.TypeEnum.block; 
this.domElement = null; 
} 
function Blocks(x, y, state, blocksEnum, colorEnum) { //方塊集類 
this.x = x; 
this.y = y; 
this.state = state; 
this.blocksEnum = blocksEnum; //方塊類型(比如L,I,田字形,Z等) 
this.color = colorEnum; 
this.type = Sys.TypeEnum.blocks; //廢棄屬性 
this.blocks = []; //方塊集下的方塊的集合 
this.blocksElement = []; //方塊集下的方塊的對(duì)應(yīng)dom元素集 
this.currentState = 0; //當(dāng)前的狀態(tài)，比如L有四種類型的變形 
this.isInGameMap = false; //是否在游戲map中 
this.currentDirectionEnum = Sys.DirectionEnum.down; //默認(rèn)方向向下 
} 
Blocks.prototype = new Base(); //繼承base類 
Blocks.prototype.Init = function() {//初始化blocks 
var blocksPoses = Sys.BlocksShapeMaps[this.blocksEnum]; 
this.currentState = Sys.BlocksStateNum[this.blocksEnum].getRandom(); //隨機(jī)獲取方塊集的狀態(tài) 
var blocksPos = blocksPoses[this.currentState]; //獲取方塊集的map 
for (var i = 0; i < blocksPos.length; i++) { 
for (var j = 0; j < blocksPos[i].length; j++) { 
var block = new Block(blocksPos[i][j][0], blocksPos[i][j][1]); 
this.blocks.push(block); 
} 
} 
var itemPos = Sys.GetBlocksInitPos(this); //獲取初始位置，也就是說(shuō)在預(yù)覽map中的位置 
this.x = itemPos.x; 
this.y = itemPos.y; 
this.AddToMap(true, false); //加入到預(yù)覽map中 
} 
Blocks.prototype.ChangeShape = function() {//方塊變換形狀 
var gameMap = Sys.GameMap; 
var allowChangeShape = true; 
var blocksPoses = Sys.BlocksShapeMaps[this.blocksEnum]; 
var num = Sys.BlocksStateNum[this.blocksEnum]; 
var currentState1 = -1; 
this.currentState == num - 1 ? currentState1 = 0 : currentState1 = this.currentState + 1; 
var blocksPos = blocksPoses[currentState1]; 
var k = 0; 
for (var i = 0; i < blocksPos.length; i++) { //主要是檢測(cè)方塊集的下一個(gè)變形是否合理 
for (var j = 0; j < blocksPos[i].length; j++) { 
var block = this.blocks[k]; 
var itemX = this.x + blocksPos[i][j][0]; 
var itemY = this.y + blocksPos[i][j][1]; 
if ((itemX > Sys.HorizontalNum - 1) || (itemX < 0) || (itemY > Sys.VerticalNum - 1) || itemY >= 0 && gameMap[itemY][itemX] != null && gameMap[itemY][itemX][Sys.TypeEnum.blocks] != null) { 
allowChangeShape = false; 
break; 
} 
k++; 
} 
} 
if (allowChangeShape)//如果允許變形 
{ 
this.currentState == num - 1 ? this.currentState = 0 : this.currentState++; //設(shè)置下一個(gè)變形的狀態(tài) 
k = 0; 
for (var i = 0; i < blocksPos.length; i++) { 
for (var j = 0; j < blocksPos[i].length; j++) { 
var block = this.blocks[k]; 
block.x = blocksPos[i][j][0]; 
block.y = blocksPos[i][j][1]; 
k++; 
} 
} 
this.AddToMap(false, true); //變形后加入到游戲map中 
} 
} 
Blocks.prototype.BlocksMoveDown = function(isMoving) { //方塊集下落 
this.currentDirectionEnum = Sys.DirectionEnum.down; 
if (!Sys.AllowBlocksMove()) { //如果不允許移動(dòng) 
Sys.AddToGameMapGrid(); //固定方塊集在游戲map中的位置 
Sys.GetScore(); //得分處理 
Sys.GetNextActiviteBrocks(); //獲取下一個(gè)方塊集 
} 
else { //下落一格 
this.y++; 
this.AddToMap(false, isMoving); 
} 
} 
Number.prototype.getRandom = function() {//獲取0至number之間的隨機(jī)數(shù) 
var num = this; 
var i = this + 1; 
while (i >= num) { 
i = Math.round(Math.random() * 10); 
} 
return i; 
} 
Array.prototype.sorts = function() { return this.sort(compare); } //數(shù)組排序,按照升序排序 
function compare(a, b) { return a - b; } //定義排序規(guī)則 
Array.prototype.removeAt = function(dx) { //清除指定索引的數(shù)組元素 
if (isNaN(dx) || dx > this.length) { return false; } 
for (var i = 0, n = 0; i < this.length; i++) { 
if (this[i] != this[dx]) 
this[n++] = this[i]; 
} 
this.length -= 1; 
} 
Array.prototype.filter = function() { //清除數(shù)組中的重復(fù)值 
var arr = []; 
for (var i = 0; i < this.length; i++) { 
if (!arr.contains(this[i])) 
arr.push(this[i]); 
} 
return arr; 
} 
Array.prototype.contains = function(item) { //檢測(cè)數(shù)組是否包含某元素 
for (var i = 0; i < this.length; i++) { 
if (this[i] == item) 
return true; 
} 
return false; 
} 
Function.prototype.delay = function(time) { var timer = setTimeout(this, time); } //函數(shù)延遲time毫秒執(zhí)行 
window.onload = InitGame; 
function InitGame() {//初始化游戲 
Sys = new sys(); 
Sys.BlocksObj = []; 
Sys.InitSpeed(); //初始化游戲速度 
Sys.CreateGameMap(); //創(chuàng)建游戲map 
Sys.CreateBlocks(); //創(chuàng)建方塊集 
} 
function GameStart(element) { 
if (element.value == "start") { //開(kāi)始游戲 
element.value = "pause"; 
Sys.PlayGame(); 
Sys.IsFirstPlay = false; 
} 
else if (element.value == "pause") { //暫停游戲 
element.value = "start" 
Sys.PauseGame(); 
} 
else { //游戲結(jié)束后重新開(kāi)始 
window.location.reload(); 
} 
} 
function Moving() {//移動(dòng) 
Sys.GetBlocks().BlocksMoveDown(false); 
} 
function ChangeSpeed(e) {//切換級(jí)別 
var speedlist = document.getElementById("speed"); 
Sys.CurrentSpeed = speedlist.options[speedlist.selectedIndex].value; 
if (!Sys.IsGameOver) { 
clearInterval(Sys.Timer); 
this.NaturalMove(); 
} 
} 
function keyDown(e) { //按鍵操作 
if (Sys.IsGameOver || !Sys.IsPlay) return; 
var blocks = Sys.GetBlocks(); 
if (e.keyCode == 37) { //向左 
blocks.currentDirectionEnum = Sys.DirectionEnum.left; 
if (Sys.AllowBlocksMove()) 
blocks.x--; 
if (blocks.x != 0) 
blocks.AddToMap(false, true); 
} 
else if (e.keyCode == 38) { //向上 
blocks.currentDirectionEnum = Sys.DirectionEnum.up; 
blocks.ChangeShape(); 
} 
else if (e.keyCode == 39) { //向右 
blocks.currentDirectionEnum = Sys.DirectionEnum.right; 
var oldX = blocks.x; 
if (Sys.AllowBlocksMove()) 
blocks.x++; 
if (blocks.x != oldX) 
blocks.AddToMap(false, true); 
} 
else if (e.keyCode == 40) //向下 
{ 
blocks.currentDirectionEnum = Sys.DirectionEnum.down; 
blocks.BlocksMoveDown(true); 
} 
} 
</script> 
<style type="text/css"> 
body 
{ 
background-color:#ffffff; 
overflow:hidden; 
font-size:14px; 
} 
.gameZone 
{ 
position:absolute; 
left:0px; 
top:0px; 
width:100%; 
height:550px; 
background-Color:white; 
} 
.mask 
{ 
position:absolute; 
left:100px; 
top:0px; 
width:300px; 
height:20px; 
background-color:White; 
border:solid 0px; 
z-index:5; 
} 
.map 
{ 
position:absolute; 
left:100px; 
top:20px; 
width:280px; 
height:504px; 
background-image:url(images/tetris_grid.gif); 
border:solid 3px green; 
} 
.gameOver 
{ 
position:absolute; 
left:100px; 
top:20px; 
width:280px; 
height:504px; 
font-weight:800; 
font-size:xx-large; 
color:Red; 
text-align:center; 
border:solid 3px; 
line-height:420px; 
display:none; 
filter: Alpha(Opacity=80); 
background-color:pink; 
} 
.map div 
{ 
BACKGROUND-IMAGE: url(images/tetris.gif); 
WIDTH: 28px; 
BACKGROUND-REPEAT: no-repeat; 
POSITION: absolute; 
HEIGHT: 28px 
} 
.PreviewMap 
{ 
position:absolute; 
left:400px; 
top:20px; 
width:168px; 
height:168px; 
background-color:pink; 
border:solid 2px green; 
} 
.PreviewMap div 
{ 
BACKGROUND-IMAGE: url(images/tetris.gif); 
WIDTH: 28px; 
BACKGROUND-REPEAT: no-repeat; 
POSITION: absolute; 
HEIGHT: 28px 
} 
.start 
{ 
position:absolute; 
left:400px; 
top:240px; 
width:168px; 
height:40px; 
} 
.scoreSpeed 
{ 
position:absolute; 
left:400px; 
top:200px; 
width:190px; 
height:40px; 
} 
.score 
{ 
color:pink; 
font-weight:bold; 
width:20px; 
height:20px; 
background-color:blue; 
padding-left:10px; 
padding-right:10px; 
font-size:medium; 
} 
.speed 
{ 
color:pink; 
font-weight:bold; 
width:20px; 
height:20px; 
background-color:blue; 
padding-left:5px; 
padding-right:5px; 
font-size:medium; 
} 
.copyright 
{ 
position:absolute; 
left:400px; 
top:280px; 
word-break:break-all; 
width:160px; 
height:225px; 
border:solid 2px green; 
padding:5px; 
} 
</style> 
</head> 
<body onkeydown="keyDown(event)"> 
<div class="gameZone"> 
<div id="mask" class="mask"></div> 
<div id="map" class="map"></div> 
<div id="gameOver" class="gameOver"></div> 
<div id="PreviewMap" class="PreviewMap"></div> 
<div id="scoreSpeed" class="scoreSpeed">得分：<span id="score" class="score">0</span></div> 
<div id="start" class="start"> 
<input type="button" id="btnStart" value="start" onclick="GameStart(this);" />&nbsp; 
級(jí)別：<select id="speed" onchange="ChangeSpeed();"></select> 
</div> 
<div id="copyright" class="copyright"> 
<b><center>版權(quán)所有</center></b><br /> 
此俄羅斯方塊由高山流水開(kāi)發(fā)，歡迎各位使用， 
如有bug或者好的意見(jiàn)，請(qǐng)給我留言，謝謝支持! 
另如需轉(zhuǎn)載，請(qǐng)注明出處！<br /> 
<font color=red><b>順便，宣傳一下我的MVC qq群：45660795,歡迎加入!</b></font> 
<br /><br /> 
作者：<a  target="_blank">高山流水</a><br /> 
QQ:21243468 
</div> 
</div> 
</body> 
</html> 