[html] 俄罗斯方块 <br> body{ width:530px; background:#F7F7F7; margin:20px auto} <br> table#gameBoard{ border:1px solid black; border-collapse: collapse; float:left;} <br> table#gameBoard td{ width:30px; height:30px; border: 1px dotted #0cc;} <br> div#gameControl{ widows:160; float:right; height: 200px;; line-height: 200px;} <br> .font{ font-family:'微软雅黑'; font-size:18px; text-align:center;} <br> div input { width: 60px; height:25px; } <br> <br> <br> <br> <br> var T = TETRIS = { <br> aBoardGrids : [], <br> aShapes: [ <br> [0xCC00], <br> [0x8888, 0xF00], <br> [0x8C40, 0x6C00], <br> [0x4C80, 0xC600], <br> [0x44C0, 0x8E00, 0xC880, 0xE200], <br> [0x88C0, 0xE800, 0xC440, 0x2E00], <br> [0x4E00, 0x8C80, 0xE400, 0x4C40] <br> ], //代表所有方块的形状数 <br> init : function(){ <br> this.oDomBoard = document.getElementById("gameBoard"); <br> this.oDomScore = document.getElementById("score"); <br> this.aBoardGrids = new Array(18); <br> for (var rows = 0 ; rows < 18 ; rows++){ <br/> this.aBoardGrids[rows] = new Array(10); <br/> var oDomTr = this.oDomBoard.insertRow(-1); <br/> for (var cols = 0 ; cols < 10 ; cols++){ <br/> this.aBoardGrids[rows][cols] = 0; <br/> oDomTr.insertCell(cols); <br/> } <br/> } <br/> <br/> document.onkeydown = function(keyEvent){ <br/> keyEvent = keyEvent || window.event; <br/> var ikeyNum = keyEvent.which || keyEvent.keyCode; <br/> switch(ikeyNum){ <br/> case 37://← <br/> T.oBlock.move("left"); <br/> break; <br/> case 38://↑ <br/> T.oBlock.rotate((function (){ <br/> var vShape = T.aShapes[T.iShapeIdx][ (++T.index)%T.aShapes[T.iShapeIdx].length]; <br/> var sShape = vShape.toString(2); <br/> sShape = new Array(17 - sShape.length).join(0) + sShape; <br/> T.matrix = sShape.match(/\d{4}/g); <br/> return T.matrix; <br/> })()); //变形 <br/> break; <br/> case 39://→ <br/> T.oBlock.move("right"); <br/> break; <br/> case 40://↓ <br/> T.oBlock.move("down"); <br/> break; <br/> } <br/> } <br/> }, <br/> next : function (){ <br/> <br/> this.iShapeIdx = parseInt(Math.random() * this.aShapes.length); <br/> this.index = 0; <br/> var vShape = this.aShapes[this.iShapeIdx][this.index]; <br/> var sShape = vShape.toString(2); //将16进制转换为二进制 <br/> sShape = new Array(17 - sShape.length).join(0) + sShape; //不够16位，在前面用0补全 <br/> this.matrix = sShape.match(/\d{4}/g); //利用正则表达式匹配 <br/> <br/> this.oBlock = new TETRIS.Block(this.matrix); <br/> <br/> clearInterval(T.timer); <br/> //注册定时器 <br/> T.timer = setInterval(function (){ <br/> T.oBlock.move("down"); <br/> }, 1000); <br/> <br/> <br/> if( !T.oBlock.checkBlock() ){ <br/> alert("Game Over~"); <br/> clearInterval(T.timer); <br/> <br/> } <br/> <br/> }, <br/> updateBoard : function (){ //更新面板 <br/> for(var i = 0 ; i < 4 ; i++){ <br/> this.aBoardGrids[T.oBlock.shape[i].y][T.oBlock.shape[i].x] = 1; <br/> } <br/> }, <br/> eraseLines : function (){ <br/> var iLines = 0; <br/> for(var j = 17 ; j >= 0 ; j--){ <br> var num = 0; <br> for(var i = 0 ; i< 10 ; i++){ <br/> if(this.aBoardGrids[j][i] == 1) <br/> num ++; <br/> } <br/> if(num == 10){ <br/> iLines ++; <br/> for(var m = 0 ; m < i ; m++){ <br/> for(var n = j ; n > 0 ; n--){ <br> this.aBoardGrids[n][m] = this.aBoardGrids[n-1][m]; <br> T.oDomBoard.rows[n].cells[m].style.background = T.oDomBoard.rows[n-1].cells[m].style.background; <br> } <br> this.aBoardGrids[0][m] = 0; <br> } <br> j++; <br> } <br> } <br> return iLines; <br> }, <br> setScore : function (iLines){ <br> var iScore = parseInt(this.oDomScore.innerHTML); <br> if(iLines == 1){ <br> iScore += 100; <br> } else if(iLines == 2){ <br> iScore += 300; <br> } else if(iLines == 3){ <br> iScore += 500; <br> } else if(iLines == 4){ <br> iScore += 1000; <br> } <br> this.oDomScore.innerHTML = iScore; <br> } <br> } <br> <br> TETRIS.Block = function (matrix){ <br> <br> this.shape = (function(){ <br> <br> var aShape = []; <br> for(var i = 0 ; i < matrix.length ; i++){ <br/> var sValue = matrix[i]; <br/> for(var j = 0 ; j < sValue.length ; j++){ <br/> if(sValue.charAt(j) == "1"){ <br/> aShape.push({ x : j+3 , y : i }); <br/> } <br/> } <br/> } <br/> <br/> return aShape; <br/> <br/> })(); <br/> this.draw(); <br/> } <br/> <br/> TETRIS.Block.prototype.move = function (direction){//移动 <br/> if(this.checkBlock(this.shape,direction)){ <br/> this.draw("clear"); <br/> for(var i = 0 ; i < 4 ; i++){ <br/> switch(direction){ <br/> case "left"://← <br/> this.shape[i].x--; <br/> break; <br/> case "right": <br/> this.shape[i].x++; <br/> break; <br/> case "down": <br/> this.shape[i].y++; <br/> break; <br/> } <br/> } <br/> this.draw(); <br/> } else { <br/> if(direction == "down"){ <br/> this.draw(); <br/> T.updateBoard(); //更新面板 <br/> var iLines = T.eraseLines(); <br/> <br/> if(iLines > 0){ <br> <br> T.setScore(iLines); <br> <br> } <br> <br> T.next(); //再生成一个新的方块 <br> } <br> } <br> <br> } <br> TETRIS.Block.prototype.rotate = function (matrix){//变形 <br> <br> this.shape = (function(oBlock){ <br> <br> var aX = []; <br> var aY = []; <br> <br> for(var i = 0 ; i < 4 ; i++){ <br/> aX.push(oBlock.shape[i].x); <br/> aY.push(oBlock.shape[i].y); <br/> } <br/> var iMinX = aX.getMin(); <br/> var iMinY = aY.getMin(); <br/> <br/> <br/> var aShape = []; <br/> for(var i = 0 ; i < matrix.length ; i++){ <br/> var sValue = matrix[i]; <br/> for(var j = 0 ; j < sValue.length ; j++){ <br/> if(sValue.charAt(j) == "1"){ <br/> aShape.push({ x : j+iMinX , y : i+iMinY }); <br/> } <br/> } <br/> } <br/> if( !( oBlock.checkBlock(aShape)) ) <br/> return oBlock.shape; <br/> oBlock.draw("clear"); <br/> return aShape; <br/> <br/> })(this); <br/> <br/> this.draw(); <br/> } <br/> <br/> TETRIS.Block.prototype.draw = function (opt){//绘图 <br/> for(var i = 0 ; i < this.shape.length ; i++){ <br/> var oShape = this.shape[i]; <br/> T.oDomBoard.rows[oShape.y].cells[oShape.x].style.background = (opt==undefined?"#09F":""); <br/> } <br/> } <br/> TETRIS.Block.prototype.checkBlock = function (shape, direction){ <br/> shape = shape || this.shape; <br/> for(var i = 0 ; i < 4 ; i++){ <br/> if(direction == "left"){ <br/> if(shape[i].x == 0 || T.aBoardGrids[shape[i].y][shape[i].x - 1] == 1){ <br/> return false; <br/> } <br/> } else if(direction == "right"){ <br/> if(shape[i].x == 9 || T.aBoardGrids[shape[i].y][shape[i].x + 1] == 1){ <br/> return false; <br/> } <br/> } else if(direction == "down"){ <br/> if(shape[i].y == 17 || T.aBoardGrids[shape[i].y + 1][shape[i].x] ==1){ <br/> return false; <br/> } <br/> } <br/> if(shape[i].x < 0 || shape[i].x > 9 || shape[i].y < 0 || shape[i].y > 17) <br> return false; <br> if(T.aBoardGrids[shape[i].y][shape[i].x] == 1){ <br> return false; <br> } <br> } <br> return true; <br> <br> } <br> Array.prototype.getMin = function (){ <br> var iMin = this[0]; <br> for(var i = 0 ; i < this.length ; i++){ <br/> if(this[i] < iMin) <br/> iMin = this[i]; <br/> } <br/> return iMin; <br/> } <br/> window.onload = function(){ <br/> <br/> T.init(); <br/> <br/> var oBtnPlay = document.getElementById("btnPlay"); <br/> oBtnPlay.onclick = function(){ <br/> if(this.value == "begin"){ <br/> T.next(); <br/> this.value = "over"; <br/> } else { <br/> this.value = "begin"; <br/> alert("Game Over~"); <br/> clearInterval(T.timer); <br/> } <br/> <br/> } <br/> var oBtnPause = document.getElementById("btnPause"); <br/> oBtnPause.onclick = function (){ <br/> if(this.value == "pause"){ <br/> clearInterval(T.timer); <br/> this.value = "resume"; <br/> } else { <br/> T.timer = setInterval(function (){ <br/> T.oBlock.move("down"); <br/> }, 1000); <br/> this.value = "pause"; <br/> } <br/> } <br/> <br/> } <br/> <br/> Score ： 0 俄罗斯方块
