用JavaScript做的俄罗斯方块[转]

it2022-05-09 32

山东大学一位兄台做的，个人觉得不错！ <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > < HTML > < HEAD > < TITLE > 俄罗斯方块 </ TITLE > < META NAME ="Generator" CONTENT ="EditPlus" > < META NAME ="Author" CONTENT ="" > < META NAME ="Keywords" CONTENT ="" > < META NAME ="Description" CONTENT ="" > < style > span.btn { BORDER-RIGHT : #7b9ebd 1px solid ; PADDING-RIGHT : 2px ; BORDER-TOP : #7b9ebd 1px solid ; PADDING-LEFT : 2px ; FONT-SIZE : 12px ; FILTER : progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde) ; BORDER-LEFT : #7b9ebd 1px solid ; CURSOR : hand ; COLOR : black ; PADDING-TOP : 2px ; BORDER-BOTTOM : #7b9ebd 1px solid } </ style > < script language =javascript > var grid = [ [ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], [ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], [ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], [ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], [ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], [ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], [ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], [ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], [ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], [ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], [ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], [ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], [ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], [ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], [ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], [ 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1 ] ]; var gridBuf = [ [ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], [ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], [ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], [ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], [ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], [ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], [ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], [ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], [ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], [ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], [ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], [ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], [ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], [ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], [ 1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 ], [ 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1 ] ]; var boxdata = [ [ [ 1 , 1 , 1 , 1 ], [ 0 , 0 , 0 , 0 ], [ 0 , 0 , 0 , 0 ], [ 0 , 0 , 0 , 0 ] ], [ [ 1 , 1 , 1 , 0 ], [ 1 , 0 , 0 , 0 ], [ 0 , 0 , 0 , 0 ], [ 0 , 0 , 0 , 0 ], ], [ [ 1 , 1 , 1 , 0 ], [ 0 , 1 , 0 , 0 ], [ 0 , 0 , 0 , 0 ], [ 0 , 0 , 0 , 0 ] ], [ [ 1 , 1 , 1 , 0 ], [ 0 , 0 , 1 , 0 ], [ 0 , 0 , 0 , 0 ], [ 0 , 0 , 0 , 0 ] ], [ [ 1 , 1 , 0 , 0 ], [ 0 , 1 , 1 , 0 ], [ 0 , 0 , 0 , 0 ], [ 0 , 0 , 0 , 0 ] ], [ [ 0 , 1 , 1 , 0 ], [ 1 , 1 , 0 , 0 ], [ 0 , 0 , 0 , 0 ], [ 0 , 0 , 0 , 0 ] ], [ [ 1 , 1 , 0 , 0 ], [ 1 , 1 , 0 , 0 ], [ 0 , 0 , 0 , 0 ], [ 0 , 0 , 0 , 0 ] ] ]; var colors = [ " black " , " #A0A0A0 " , " red " , " green " , " yellow " , " pink " ]; var gotLine = 0 ; var box; var bGameOver = false ; function getHeight(arr) { var i,j; for (i = 3 ;i >= 0 ;i -- ) for (j = 0 ;j < 4 ;j ++ ) if (arr[i][j]) return i; } function getWidth(arr) { var i,j; for (i = 3 ;i >= 0 ;i -- ) for (j = 0 ;j < 4 ;j ++ ) if (arr[j][i]) return i; } function Box(x,y,arr,color) { this .arr = arr; this .x = x; this .y = y; this .w = getWidth(arr); this .h = getHeight(arr); this .color = color; this .active = true ; this .clearOldBox = function () { for ( var j = 0 ;j <= this .h;j ++ ) for ( var i = 0 ;i <= this .w;i ++ ) if ( this .arr[j][i] > 0 ) grid[ this .y + j][ this .x + i] = 0 ; } this .putNewBox = function () { for ( var j = 0 ;j <= this .h;j ++ ) for ( var i = 0 ;i <= this .w;i ++ ) if ( this .arr[j][i] > 0 ) grid[ this .y + j][ this .x + i] = this .color; } this .moveLeft = function () { this .clearOldBox(); var _x = this .x - 1 ; if ( this .canMove(_x, this .y)) this .x = _x; this .putNewBox(); drawGrid(); } this .moveRight = function () { this .clearOldBox(); var _x = this .x + 1 ; if ( this .canMove(_x, this .y)) this .x = _x; this .putNewBox(); drawGrid(); } this .moveDown = function () { this .clearOldBox(); var _y = this .y + 1 ; if ( this .canMove( this .x,_y)) { this .y = _y; this .putNewBox(); drawGrid(); } else { this .putNewBox(); drawGrid(); checkLineFull(); return ; } } this .rotate = function () { var tmp = [[ 0 , 0 , 0 , 0 ],[ 0 , 0 , 0 , 0 ],[ 0 , 0 , 0 , 0 ],[ 0 , 0 , 0 , 0 ]]; for (j = 0 ;j <= this .h;j ++ ) for (i = 0 ;i <= this .w;i ++ ) tmp[ this .w - i][j] = this .arr[j][i]; var newBox = new Box( this .x, this .y,tmp, this .color); this .clearOldBox(); if ( ! newBox.canMove( this .x, this .y)) this .putNewBox(); else { box = newBox; box.putNewBox(); drawGrid(); } } this .canMove = function (x,y) { for ( var j = 0 ;j <= this .h;j ++ ) for ( var i = 0 ;i <= this .w;i ++ ) { if (grid[y + j][x + i] != 0 && this .arr[j][i] != 0 ){ return false ; } } return true ; } } function drawGrid() { for ( var j = 0 ;j <= 15 ;j ++ ) for ( var i = 0 ;i <= 10 ;i ++ ) { if ( grid[j][i] != gridBuf[j][i]) { paintCell(j,i,grid[j][i]); } gridBuf[j][i] = grid[j][i]; } } function paintCell(i,j,color) { var htmlGrid = document.getElementById( " TetrisGrid " ).firstChild; htmlGrid.childNodes[i].childNodes[j].style.backgroundColor = colors[color]; } function init() { var html = ' < table id = " TetrisGrid " cellspacing = 1 style = " background-color:green " >< tbody > '; for ( var i = 0 ;i <= 15 ;i ++ ) { html += ' < tr > '; for ( var j = 0 ;j <= 10 ;j ++ ) { html += ' < td width = " 20 " height = " 20 " style = " background-color:'+colors[grid[i][j]]+'; " ></ td > '; } html += ' </ tr > \r\n'; } html += ' </ tbody ></ table > '; document.write(html); } function checkLineFull() { var full,i,j,i2; var y3 = box.y + box.h; var y4 = box.y; for (i = y3;i >= y4;) { full = 1 ; for (j = 1 ;j < 10 ;j ++ ) if (grid[i][j] == 0 ){full = 0 ; break ;} if (full == 0 ){ -- i; continue ;} for (i2 = i; i2 > 0 ;i2 -- ) for (j = 1 ;j < 10 ;j ++ ) grid[i2][j] = grid[i2 - 1 ][j]; drawGrid(); y4 ++ ; gotLine ++ ; } checkGameOver(); } function checkGameOver() { var bOver = false ; for ( var j = 1 ;j < 10 ;j ++ ) if (grid[ 1 ][j] > 0 ){ bOver = true ; break ;} if ( ! bOver){ box = new Box( 1 , 1 ,boxdata[Math.floor(Math.random() * 7 )],Math.floor(Math.random() * 5 ) + 1 ); box.putNewBox(); } else { bGameOver = true ; msg.innerHTML = " 游戏结束! 您的得分为 " + gotLine * 100 ; window.clearInterval(); } } function document_onkeydown() { if (bGameOver) return ; switch (event.keyCode) { case 37 : box.moveLeft(); break ; case 39 : box.moveRight(); break ; case 38 : box.rotate(); break ; case 40 : box.moveDown(); break ; } } function moveDownBox() { var interval = 1000 - 10 * (gotLine > 80 ? 80 :gotLine); msg.innerHTML = " 等级： " + Math.floor(gotLine / 10 ) + " 得分: " + gotLine * 100 ; box.moveDown(); window.setTimeout('moveDownBox()',interval); } function startGame() { init(); window.setTimeout('moveDownBox()', 1000 ); bGameOver = false ; box = new Box( 1 , 1 ,boxdata[Math.floor(Math.random() * 7 )],Math.floor(Math.random() * 5 ) + 1 ); box.putNewBox(); drawGrid(); } </ script > < SCRIPT LANGUAGE =javascript FOR =document EVENT =onkeydown >  </ SCRIPT > </ HEAD > < BODY LANGUAGE =javascript onLoad ="window.focus()" > < span class ="btn" style ="width:254;background-color:#F0C0C0;color:#0000FF;text-align:center" > sunnisdu 山东大学 < a href ="javascript:window.location.reload();" > 开始 </ a ></ span >< br /> < span style ="background-color:black;width:22" ></ span >< span id ="msg" style ="width:232;background-color:black;color:#00FF00;" > 俄罗斯方块 </ span > < script language =javascript > startGame(); </ script > </ BODY > </ HTML > 推荐给大家！以前在网上还见过有人用js做了个星际争霸，javascript真是门很不错的语言。

转载于:https://www.cnblogs.com/tuyile006/archive/2007/08/21/864106.html

专利

最新回复(0)