zoukankan      html  css  js  c++  java

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

    山东大学一位兄台做的，个人觉得不错！

    <!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> 
    <!-- 
         if (document.all)document_onkeydown() 

    //--> 
    </SCRIPT> 
    </HEAD> 

    <BODY LANGUAGE=javascript onLoad="window.focus()"> 
    <span class="btn" style="254;background-color:#F0C0C0;color:#0000FF;text-align:center">sunnisdu 山东大学   <a href="javascript:window.location.reload();">开始</a></span><br/> 
    <span style="background-color:black;22"></span><span id="msg" style="232;background-color:black;color:#00FF00;">俄罗斯方块</span> 
    <script language=javascript> 
    startGame(); 
    </script> 
    </BODY> 
    </HTML> 

    推荐给大家！
    以前在网上还见过有人用js做了个星际争霸，javascript真是门很不错的语言。
  • 相关阅读:
    AWVS使用基础教程 什么是AWVS Acunetix Web Vulnerability Scanner(简称AWVS)是一款知名的网络漏洞扫描工具
    91家纺网，三次更新，配套数据库models
    91家纺网，三次更新，此次代码不可联通
    91家纺网，二次更新
    91家纺
    Copy_Excel_To_Excel#--此脚本用于将目标表格写入新的表格--
    Find_Excel_From_Dir获取特定目录下的excel表格，将数据复制出来
    递归解压压缩包_模块更新(需要下载对应的解压程序)
    更新的Main函数
    添加copy模块_复制Excel文件
  • 原文地址：https://www.cnblogs.com/tuyile006/p/864106.html
Copyright © 2011-2022 走看看