JS编写的俄罗斯方块

js

<HTML>
<HEAD>
<title>俄罗斯方块</title>
<style>
<!--
BODY
{
}
.MB
{
    BACKGROUND-COLOR: firebrick;
    CURSOR: default;
    HEIGHT: 22px;
    WIDTH: 22px
}
.SB
{
    BACKGROUND-COLOR: slategray;
    CURSOR: default;
    HEIGHT: 22px;
    WIDTH: 22px
}
.BK
{
    BACKGROUND-COLOR: white;
    CURSOR: default;
    HEIGHT: 22px;
    WIDTH: 22px
}
.GT
{
    BORDER-BOTTOM: deepskyblue thin solid;
    BORDER-LEFT: deepskyblue thin solid;
    BORDER-RIGHT: deepskyblue thin solid;
    BORDER-TOP: deepskyblue thin solid;
    CURSOR: default
}
-->
</style>
<script>
<!--
var BX=new Array(4);
var BY=new Array(4);
var PX=new Array(4);
var PY=new Array(4);
var mTimer
var firstView

function beginGame()
{
    gameState=0;
    speed=1;
    outTime=1100-speed*100;
    score=0;
    if(gameState!=0)return;
    firstView=true;
    for(j=0;j<16;j++)
        for(i=0;i<10;i++)
            setClass(i,j,"BK");
    randBar();
    gameState=1;
    Play.disabled=true;
    window.clearInterval(mTimer);
    mTimer=window.setInterval("moveBar()",outTime);
}

function keyControl()
{
    if(gameState!=1)return;
    switch(event.keyCode){
        case 37:{    //left
            for(i=0;i<4;i++)if(BX[i]==0)return;
            for(i=0;i<4;i++)if(getClass(BX[i]-1,BY[i])=="SB")return;
            for(i=0;i<4;i++)setClass(BX[i],BY[i],"BK");
            for(i=0;i<4;i++)BX[i]=BX[i]-1;
            for(i=0;i<4;i++)setClass(BX[i],BY[i],"MB");
            break;}
        case 38:{    //up
            var preMBarX=new Array(4);
            var preMBarY=new Array(4);
            var cx=Math.round((BX[0]+BX[1]+BX[2]+BX[3])/4);
            var cy=Math.round((BY[0]+BY[1]+BY[2]+BY[3])/4);
            for(i=0;i<4;i++){
                preMBarX[i]=Math.round(cx-cy+BY[i]);
                preMBarY[i]=Math.round(cx+cy-BX[i]);
                if(preMBarX[i]<0 || preMBarX[i]>9 || preMBarY[i]<0 || preMBarY[i]>15)return;
                if(getClass(preMBarX[i],preMBarY[i])=="SB")return;
            }
            for(i=0;i<4;i++)setClass(BX[i],BY[i],"BK");
            for(i=0;i<4;i++){
                BX[i]=preMBarX[i];
                BY[i]=preMBarY[i];
            }
            for(i=0;i<4;i++)setClass(BX[i],BY[i],"MB");
            break;}
        case 39:{    //right
            for(i=0;i<4;i++)if(BX[i]==9)return;
            for(i=0;i<4;i++)if(getClass(BX[i]+1,BY[i])=="SB")return;
            for(i=0;i<4;i++)setClass(BX[i],BY[i],"BK");
            for(i=0;i<4;i++)BX[i]=BX[i]+1;
            for(i=0;i<4;i++)setClass(BX[i],BY[i],"MB");
            break;}
        case 40:{    //down
            moveBar();
            break;}
    }
}

function delLine()
{
    for(i=0;i<4;i++)setClass(BX[i],BY[i],"SB");
    for(j=0;j<16;j++){
        dLine=true;
        for(i=0;i<9;i++){
            if(getClass(i,j)!="SB"){
                dLine=false;
                break;
            }
        }
        if(dLine){
            score=score+100;
            for(k=j;k>0;k--)
                for(l=0;l<10;l++)
                    setClass(l,k,getClass(l,k-1));
            for(l=0;l<10;l++)setClass(l,0,"BK");
        }
    }
    randBar();
    speed=Math.floor(score/3000)+1;
    outTime=1100-speed*100;
    scoreBar.innerHTML="Score : " + score;
    speedBar.innerHTML="Speed : " + speed;
    window.clearInterval(mTimer);
    mTimer=window.setInterval("moveBar()",outTime);
}

function getClass(x,y){return GameBar.children[y].children[x].className;}
function setClass(x,y,cName){GameBar.children[y].children[x].className=cName;}

function moveBar()
{
    if(gameState!=1)return;
    dropLine=true;
    for(i=0;i<4;i++)if(BY[i]==15)dropLine=false;
    if(dropLine)for(i=0;i<4;i++)if(getClass(BX[i],BY[i]+1)=="SB")dropLine=false;
    if(!dropLine){
        window.clearInterval(mTimer);
        delLine();
        return;
    }
    for(i=0;i<4;i++)setClass(BX[i],BY[i],"BK");
    for(i=0;i<4;i++)BY[i]=BY[i]+1;
    for(i=0;i<4;i++)setClass(BX[i],BY[i],"MB");
}

function pauseGame()
{
    if(gameState==0)return;
    if(event.srcElement.value=="Pause"){
        gameState=2;
        event.srcElement.value="Continue";
        window.clearInterval(mTimer);
    }
    else{
        gameState=1;
        event.srcElement.value="Pause";
        mTimer=window.setInterval("moveBar()",outTime);
    }
}

function fMnu(){return false;}
document.oncontextmenu=fMnu;

function preview()
{
    if(previewBar.style.display!="none")
        previewBar.style.display="none";
    else
        previewBar.style.display="block";
}

function replayGame()
{
    if(gameState!=1)return;
    if(!confirm("你真的要重新开始么？"))return;
    gameState=0;
    window.clearInterval(mTimer);
    beginGame();
}
function randBar()
{
    randNum=Math.floor(Math.random()*20)+1;
    if(!firstView)
        for(i=0;i<4;i++){
            BX[i]=PX[i];
            BY[i]=PY[i];
        }
    switch(randNum){
        case 1:{
            PX[0]=4;
            PY[0]=0;
            PX[1]=4;
            PY[1]=1;
            PX[2]=5;
            PY[2]=1;
            PX[3]=6;
            PY[3]=1;
            break;}
        case 2:{
            PX[0]=4;
            PY[0]=0;
            PX[1]=5;
            PY[1]=0;
            PX[2]=4;
            PY[2]=1;
            PX[3]=4;
            PY[3]=2;
            break;}
        case 3:{
            PX[0]=4;
            PY[0]=0;
            PX[1]=5;
            PY[1]=0;
            PX[2]=6;
            PY[2]=0;
            PX[3]=6;
            PY[3]=1;
            break;}
        case 4:{
            PX[0]=5;
            PY[0]=0;
            PX[1]=5;
            PY[1]=1;
            PX[2]=5;
            PY[2]=2;
            PX[3]=4;
            PY[3]=2;
            break;}
        case 5:{
            PX[0]=6;
            PY[0]=0;
            PX[1]=6;
            PY[1]=1;
            PX[2]=4;
            PY[2]=1;
            PX[3]=5;
            PY[3]=1;
            break;}
        case 6:{
            PX[0]=4;
            PY[0]=0;
            PX[1]=4;
            PY[1]=1;
            PX[2]=4;
            PY[2]=2;
            PX[3]=5;
            PY[3]=2;
            break;}
        case 7:{
            PX[0]=4;
            PY[0]=0;
            PX[1]=4;
            PY[1]=1;
            PX[2]=5;
            PY[2]=0;
            PX[3]=6;
            PY[3]=0;
            break;}
        case 8:{
            PX[0]=4;
            PY[0]=0;
            PX[1]=5;
            PY[1]=0;
            PX[2]=5;
            PY[2]=1;
            PX[3]=5;
            PY[3]=2;
            break;}
        case 9:{
            PX[0]=4;
            PY[0]=0;
            PX[1]=5;
            PY[1]=0;
            PX[2]=5;
            PY[2]=1;
            PX[3]=6;
            PY[3]=1;
            break;}
        case 10:{
            PX[0]=5;
            PY[0]=0;
            PX[1]=5;
            PY[1]=1;
            PX[2]=4;
            PY[2]=1;
            PX[3]=4;
            PY[3]=2;
            break;}
        case 11:{
            PX[0]=4;
            PY[0]=1;
            PX[1]=5;
            PY[1]=1;
            PX[2]=5;
            PY[2]=0;
            PX[3]=6;
            PY[3]=0;
            break;}
        case 12:{
            PX[0]=4;
            PY[0]=0;
            PX[1]=4;
            PY[1]=1;
            PX[2]=5;
            PY[2]=1;
            PX[3]=5;
            PY[3]=2;
            break;}
        case 13:{
            PX[0]=4;
            PY[0]=0;
            PX[1]=5;
            PY[1]=0;
            PX[2]=6;
            PY[2]=0;
            PX[3]=5;
            PY[3]=1;
            break;}
        case 14:{
            PX[0]=4;
            PY[0]=0;
            PX[1]=4;
            PY[1]=1;
            PX[2]=4;
            PY[2]=2;
            PX[3]=5;
            PY[3]=1;
            break;}
        case 15:{
            PX[0]=5;
            PY[0]=0;
            PX[1]=5;
            PY[1]=1;
            PX[2]=4;
            PY[2]=1;
            PX[3]=6;
            PY[3]=1;
            break;}
        case 16:{
            PX[0]=5;
            PY[0]=0;
            PX[1]=5;
            PY[1]=1;
            PX[2]=5;
            PY[2]=2;
            PX[3]=4;
            PY[3]=1;
            break;}
        case 17:{
            PX[0]=4;
            PY[0]=0;
            PX[1]=5;
            PY[1]=0;
            PX[2]=4;
            PY[2]=1;
            PX[3]=5;
            PY[3]=1;
            break;}
        case 18:{
            PX[0]=4;
            PY[0]=0;
            PX[1]=5;
            PY[1]=0;
            PX[2]=4;
            PY[2]=1;
            PX[3]=5;
            PY[3]=1;
            break;}
        case 19:{
            PX[0]=3;
            PY[0]=0;
            PX[1]=4;
            PY[1]=0;
            PX[2]=5;
            PY[2]=0;
            PX[3]=6;
            PY[3]=0;
            break;}
        case 20:{
            PX[0]=5;
            PY[0]=0;
            PX[1]=5;
            PY[1]=1;
            PX[2]=5;
            PY[2]=2;
            PX[3]=5;
            PY[3]=3;
            break;}
    }
    if(firstView){
        firstView=false;
        randBar();
        return;
    }
    for(i=0;i<4;i++){
        for(j=0;j<4;j++){
            previewBar.children[j].children[i].className="BK";
        }
    }
    for(i=0;i<4;i++)previewBar.children[PY[i]].children[PX[i]-3].className="MB";
    for(i=0;i<4;i++){
        if(getClass(BX[i],BY[i])!="BK"){
            alert("Game Over!");
            window.clearInterval(mTimer);
            Play.disabled=false;
            gameState=0;
            return;
        }
    }
    for(i=0;i<4;i++)setClass(BX[i],BY[i],"MB");
}
// -->
</script>
</HEAD>
<BODY bgcolor=Black >
<center>
<P><b><font color=red>俄罗斯方块</font></b></P>
<table cellspacing=0 cellpadding=0 class=gt border=1 bordercolor="LightYellow " style="position:absolute;left:220px;top:53px;">
<Tbody id=GameBar>
<tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr>
</tbody>
</table>
</center>
<table style="position:absolute;top=100px;left:50px">
    <tr><td id=scoreBar style="color:white">Score : 0</td></tr>
    <tr><td id=speedBar style="color:white">Speed : 1</td></tr>
</table>

<table cellspacing=0 cellpadding=0 class=gt border=1 bordercolor="LightYellow " style="position:absolute;left:570px;top:53px;">
<Tbody id=previewBar>
<tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr>
</tbody>
</table>
<table style="position:absolute;left:570px;top:180px;">
    <tr><td><input type=button id="Play" style="width:100px" value="Play" ></td></tr>
    <tr><td><input type=button id="Pause" style="width:100px" value="Pause" ></td></tr>
    <tr><td><input type=button id="Preview" style="width:100px" value="Preview" ></td></tr>
    <tr><td><input type=button id="Replay" style="width:100px" value="Replay" ></td></tr>
    <tr><td><input type=button id="Quit" style="width:100px" value="Quit" ></td></tr>
</table>
<div style="position:absolute;left:590px;top:390px;color:white;font-size:9pt">如有问题请与我<a href="mailto:sor@263.net"><font color=white>联系</font></a></div>
</BODY>
</HTML>
<script>
function unSel()
{
    document.execCommand("Unselect");
    window.setTimeout("unSel()",10);
}
unSel();

window.onunload=rel;
function rel()
{
    location.reload();
    return false;
}

</script>

时间： 2025-01-02 10:06:50

JS编写的俄罗斯方块的相关文章

使用Meteor配合Node.js编写实时聊天应用的范例

  这篇文章主要介绍了使用Meteor配合Node.js编写实时聊天应用的范例,Node.js作为异步框架,其最突出的使用便是用来编写实时应用程序,需要的朋友可以参考下 我经常见到被拿来与Derby.js做比较的框架是Meteor.js. 与Derby相似的是,它也能在多个客户端下实时更新views, 尽管做法上可能跟Derby有点不同. Derby可以较容易的使用多种数据库, 而Meteor则只亲近于MongoDB. 事实上, 通过如Mongoose客户端接入数据库的API与你在服务端所期望的

在window7下使用C++来给node.js编写扩展模块的方法

  在window7下使用C++来给node.js编写扩展模块的方法           本文给大家介绍的是在window7下使用C++来给node.js编写扩展模块的方法,附上一个简单的hello实例,有需要的小伙伴可以参考下. 前提: 安装好node.js.Python2.7与visual studio 2013. 过程: 首先安装GYP项目生成工具,npm install -g node-gyp . 建立test目录,这是我们的工作目录,在此目录下再建一个src目录,用来存放C++源代码,

js-!急JS编写的计算器 如何实现 连续加减乘除四则运算 求大神指点 急帮我再看看小数点的问题

问题描述 !急JS编写的计算器 如何实现 连续加减乘除四则运算 求大神指点 急帮我再看看小数点的问题 var oper = "" var isClickOper = false//是否点击了运算符 var num = 0; var isClickPoint = false;//是否点击了小数点 //输入数字 function addNum(n){ var nowNum = myform.num.value; if(nowNum == "0"||isClickOper

Node.js编写组件的三种实现方式_node.js

首先介绍使用v8 API跟使用swig框架的不同: (1)v8 API方式为官方提供的原生方法,功能强大而完善,缺点是需要熟悉v8 API,编写起来比较麻烦,是js强相关的,不容易支持其它脚本语言. (2)swig为第三方支持,一个强大的组件开发工具,支持为python.lua.js等多种常见脚本语言生成C++组件包装代码,swig使用者只需要编写C++代码和swig配置文件即可开发各种脚本语言的C++组件,不需要了解各种脚本语言的组件开发框架,缺点是不支持javascript的回调,文档和de

js编写当天简单日历效果【实现代码】_javascript技巧

之前一直很想用javascript写一个日历,但是因为完全没有好的思路, 所以迟迟没有尝试.最近在网上刚好看到用javascript编写的简单日历的例子,代码量虽然不大, 但是我觉得很好地阐述了js日历的实现原理.自己也尝试着做了一下,收获蛮大,掌握了基本的实现原理后,再想增加更多的功能,完全就可以自由发挥了,先在这里分享一下吧,有兴趣的可以试试! 一.表格行数问题 既然要显示日期表格的话,首先得知道这个表格有多少行多少列,列数是已经确定的,从星期天(日历上第1列是星期天)到星期六一共7列.要解

原生js编写设为首页兼容ie、火狐和谷歌_javascript技巧

原生 js 编写,兼容 ie,火狐和谷歌. 完整代码: <script type="text/javascript"> //设为首页 www.jb51.net function SetHome(obj,url){ try{ obj.style.behavior='url(#default#homepage)'; obj.setHomePage(url); }catch(e){ if(window.netscape){ try{ netscape.security.Privi

用js编写的简单的计算器代码程序_javascript技巧

最近编写的一个简单的计算器代码程序,先给大家展示一下 分享代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta htt

JS编码技巧:翻译的14天JS编写技巧

写任何编程代码,不同的开发者都会有不同的见解.但参考一下总是好的,下面是来自 Javascript Toolbox 发布的 14条最佳JS代码编写技巧 ,Sofish翻译(1,2). 1. 总是使用 'var' 在JavaScript中,变量不是全局范围的就是函数范围的,使用"var"关键词将是保持变量简洁明了的关键.当声明一个或者是全局或者是函数级(function-level)的变量,需总是前置"var"关键词,下面的例子将强调不这样做潜在的问题. 不使用 Va

js编写的treeview使用方法_javascript技巧

 本文实例为大家分享了treeview使用方法,供大家参考,具体内容如下  1.所需文件:ftiens4.js,ua.js,XMLTree.js,以及一些树上的图片(文件下载处:http://www.treeview.net/),图片名字和位置如下图   2.其他页面(MainContent.aspx,NavTree.aspx)放置位置如下图所示: 3.关键页面的代码 3.1 MainContent.aspx代码 <%@ Page Language="C#" CodeFile=&