javascript俄罗斯方块(JS初学作品)

最新推荐文章于 2024-05-30 11:27:58 发布
最新推荐文章于 2024-05-30 11:27:58 发布
阅读量152 收藏
点赞数
文章标签： javascript xhtml ViewUI
原文链接：http://www.cnblogs.com/Dawnwang/archive/2011/10/31/2230844.html
版权

今天翻看正理代码库时发现了很早以前用JS写过的一个俄罗斯方块，当时刚接触JS没多久，练手的一个小作品。现在看来确实有些幼稚，但是当初完成之后的那种成有感确实让我兴奋了好几天。

<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<head>
<title>Tetris</title>
<script>
var HNum = 14;
var VNum = 17;
var TModulesNum = 8;
var TetrisWidth = 30;
var TimeSpace = 1000;
var BColor = "#FFFFFF";
var FColor = "#FF0000";
var GridFColor = "#DDDDDD";
var GridColor = "#DDDDDD";
var TModules = new Array(TModulesNum);
var Target = 0;
var lock = false;
var TimeStop = false;
var Sqare = new Array(VNum);
var TimeSpaceStart = 1000;
var TimeSpaceStop = 300;
var MainTime = null;
var Score = 0;

//键盘监控
function InitKeydown() 
{
    document.onkeydown = showKeyDown
}

function showKeyDown(evt) 
{
    evt = (evt) ? evt : window.event

switch (evt.keyCode)
    {
case 37:
            MoveLeft();
break;
case 39:
            MoveRight();
break;
case 38:
            ReMatrix();
break;
case 40:
            ModuleQuickDropDown();
break;
case 32:
if(document.getElementById("btnStart").disabled == true)
            {
                GameStop();
            }
else
            {
                GameStart();
            }
break;    

    }

}

//方块模型垂直和水平方向整序(VH = "V":垂直方向 VH = "H":水平方向 flag = 0:上小下大 flag = 1:上大下小)
function OrderByVH(VH,flag)
{
var temp = "";
for(var i =0;i< 4;i++)
    {
for(var j = i + 1;j< 4;j++)
        {
var vhi = 0;
var vhj = 0;
if(VH == "V")
            {
                vhi = Math.round(TModules[Target][i].split("_")[0]);
                vhj = Math.round(TModules[Target][j].split("_")[0]);
            }
else if(VH == "H")
            {
                vhi = Math.round(TModules[Target][i].split("_")[1]);
                vhj = Math.round(TModules[Target][j].split("_")[1]);                
            }
if(flag == 0)
            {
if(vhi > vhj)
                {
                    temp = TModules[Target][i];
                    TModules[Target][i] = TModules[Target][j];
                    TModules[Target][j] = temp; 
                }
            }
else
            {
if(vhi < vhj)
                {
                    temp = TModules[Target][i];
                    TModules[Target][i] = TModules[Target][j];
                    TModules[Target][j] = temp; 
                }                
            }
        }
    }
}


//方块左移
function MoveLeft()
{    
    lock = false;
if(lock == false)
    {
        lock = true;

//检测碰撞
        //----------------------------------------------
        for(var t = 0;t < 4;t++)
        {
var v = Math.round(TModules[Target][t].split("_")[0]);
var h = Math.round(TModules[Target][t].split("_")[1]);

if(h - 1 < 0)
            {
                lock = false;
return;
            }

var checkneed = true;
for(var p = 0;p < 4;p++ )
            {
if(p!=t)
                {
var pv = Math.round(TModules[Target][p].split("_")[0]);
var ph = Math.round(TModules[Target][p].split("_")[1]);

if( v  == pv && ph == h - 1)
                    {
                        checkneed = false;
                    }
                }
            }

if(v < 0 || h - 1 < 0 || checkneed == false)
            {
continue;
            }

if(Sqare[v][h - 1] == 1)
            {                
                lock = false;                
return;
            }
        }
//碰撞检测结束
        //----------------------------------------------------
        
//方块左移
        //----------------------------------------------------
        OrderByVH("H",0); //左整序
        for(var i = 0;i < 4;i++)
        {
var v = Math.round(TModules[Target][i].split("_")[0]);
var h = Math.round(TModules[Target][i].split("_")[1]);
var len = Math.round(TModules[Target][i].split("_").length);
if(h - 1 >= 0)
            {                
if(len == 3)
                {
                    TModules[Target][i] = v.toString() + "_" + (h - 1).toString() + "_D";
                }
else
                {
                    TModules[Target][i] = v.toString() + "_" + (h - 1).toString();                    
                }
if( v >= 0)
                {
var strT = document.getElementById("T" + v.toString() + "_" + (h - 1).toString());
var strF = document.getElementById("T" + v.toString() + "_" + h.toString());
if(strT != null)
                    {    
if(strF != null)
                        {
                            strF.style.backgroundColor = BColor;
                            Sqare[v][h] = 0;    
                        }                        
                        strT.style.backgroundColor = FColor;
                        Sqare[v][h - 1] = 1;                                    
                    }
                }
            }
        }
//左移结束
        //--------------------------------------------------
        lock = false;
    }
}

//方块右移
function MoveRight()
{
    lock = false;
if(lock == false)
    {
        lock = true;

//检测碰撞
        //----------------------------------------------
        for(var t = 0;t < 4;t++)
        {
var v = Math.round(TModules[Target][t].split("_")[0]);
var h = Math.round(TModules[Target][t].split("_")[1]);

if(h + 1>= HNum)
            {
                lock = false;
return;
            }
var checkneed = true;
for(var p = 0;p < 4;p++ )
            {
if(p!=t)
                {
var pv = Math.round(TModules[Target][p].split("_")[0]);
var ph = Math.round(TModules[Target][p].split("_")[1]);

if( v  == pv && ph == h + 1)
                    {
                        checkneed = false;
                    }
                }
            }

if(v < 0 || h + 1 >= HNum || checkneed == false)
            {
continue;
            }

if(Sqare[v][h + 1] == 1)
            {                
                lock = false;                
return;
            }
        }
//碰撞检测结束
        //----------------------------------------------------
        
//方块右移
        //----------------------------------------------------
        OrderByVH("H",1); //右整序
        for(var i = 0;i < 4;i++)
        {
var v = Math.round(TModules[Target][i].split("_")[0]);
var h = Math.round(TModules[Target][i].split("_")[1]);
var len = Math.round(TModules[Target][i].split("_").length);
if(h + 1 < HNum)
            {                
if(len == 3)
                {
                    TModules[Target][i] = v.toString() + "_" + (h + 1).toString() + "_D";
                }
else
                {
                    TModules[Target][i] = v.toString() + "_" + (h + 1).toString();
                }
if( v >= 0)
                {
var strT = document.getElementById("T" + v.toString() + "_" + (h + 1).toString());
var strF = document.getElementById("T" + v.toString() + "_" + h.toString());
if(strT != null)
                    {    
if(strF != null)
                        {
                            strF.style.backgroundColor = BColor;
                            Sqare[v][h] = 0;    
                        }                        
                        strT.style.backgroundColor = FColor;
                        Sqare[v][h + 1] = 1;                                    
                    }
                }
            }
        }
//右移结束
        //--------------------------------------------------
        lock = false;
    }
}

//快速下落函数
function ModuleQuickDropDown()
{
while(true&&lock!=true)
    {
        lock = true;
//检测碰撞
        //----------------------------------------------
        for(var t = 0;t < 4;t++)
        {
var v = Math.round(TModules[Target][t].split("_")[0]);
var h = Math.round(TModules[Target][t].split("_")[1]);
var checkneed = true;
for(var p = 0;p < 4;p++ )
            {
if(p!=t)
                {
var pv = Math.round(TModules[Target][p].split("_")[0]);
var ph = Math.round(TModules[Target][p].split("_")[1]);

if( v + 1 == pv && ph == h)
                    {
                        checkneed = false;
                    }
                }
            }

if(v + 1 < 0 || checkneed == false)
            {
continue;
            }

if(v + 1 >= VNum || Sqare[v + 1][h] == 1)
            {
if(v + 1 == 0)
                {
                    lock = false;
                    GameOver();
return;
                }            
                ReLines();            
                GetTModule();
                lock = false;
return;
            }
        }
//碰撞检测结束
        //----------------------------------------------------
            
//方块下落
        //----------------------------------------------------
        OrderByVH("V",1); //下整序
        for(var i = 0;i < 4;i++)
        {
var v = Math.round(TModules[Target][i].split("_")[0]);
var h = Math.round(TModules[Target][i].split("_")[1]);
var len = Math.round(TModules[Target][i].split("_").length);
if(v + 1 < VNum)
            {                
if(len == 3)
                {
                    TModules[Target][i] = (v + 1).toString() + "_" + h.toString() + "_D";
                }
else
                {
                    TModules[Target][i] = (v + 1).toString() + "_" + h.toString();
                }
if( v + 1 >= 0)
                {
var strT = document.getElementById("T" + (v + 1).toString() + "_" + h.toString());
var strF = document.getElementById("T" + (v).toString() + "_" + h.toString());                    
if(v >=0)
                    {
                        strF.style.backgroundColor = BColor;
                        Sqare[v][h] = 0;                            
                    }    
                    strT.style.backgroundColor = FColor;
                    Sqare[v + 1][h] = 1;    
                }
            }
        }
//下落结束
        //--------------------------------------------------
        lock = false;
    }
}

//方块下落
function ModuleDropDown()
{
if(lock == false)
    {
        lock = true;

//检测碰撞
        //----------------------------------------------
        for(var t = 0;t < 4;t++)
        {
var v = Math.round(TModules[Target][t].split("_")[0]);
var h = Math.round(TModules[Target][t].split("_")[1]);
var checkneed = true;
for(var p = 0;p < 4;p++ )
            {
if(p!=t)
                {
var pv = Math.round(TModules[Target][p].split("_")[0]);
var ph = Math.round(TModules[Target][p].split("_")[1]);

if( v + 1 == pv && ph == h)
                    {
                        checkneed = false;
                    }
                }
            }

if(v + 1 < 0 || checkneed == false)
            {
continue;
            }

if(v + 1 >= VNum || Sqare[v + 1][h] == 1)
            {
if(v + 1 == 0)
                {
                    lock = false;
                    GameOver();
if(MainTime != null)
                    {
                        clearTimeout(MainTime);
                    }
return;
                }                
                ReLines();                
                GetTModule();
                lock = false;
if(MainTime != null)
                {
                    clearTimeout(MainTime);
                }
                setTimeout("ModuleDropDown()",TimeSpace);
return;
            }
        }
//碰撞检测结束
        //----------------------------------------------------
        
//方块下落
        //----------------------------------------------------
        OrderByVH("V",1); //下整序
        for(var i = 0;i < 4;i++)
        {
var v = Math.round(TModules[Target][i].split("_")[0]);
var h = Math.round(TModules[Target][i].split("_")[1]);
var len = Math.round(TModules[Target][i].split("_").length);

if(v + 1 < VNum)
            {                
if(len == 3)
                {
                    TModules[Target][i] = (v + 1).toString() + "_" + h.toString() + "_D";
                }
else
                {
                    TModules[Target][i] = (v + 1).toString() + "_" + h.toString();
                }
if( v + 1 >= 0)
                {
var strT = document.getElementById("T" + (v + 1).toString() + "_" + h.toString());
var strF = document.getElementById("T" + (v).toString() + "_" + h.toString());
if(v >=0)
                    {
                        strF.style.backgroundColor = BColor;
                        Sqare[v][h] = 0;                            
                    }    
                    strT.style.backgroundColor = FColor;
                    Sqare[v + 1][h] = 1;    
                }
            }
        }
//下落结束
        //--------------------------------------------------
        lock = false;
    }
    MainTime = setTimeout("ModuleDropDown()",TimeSpace);
}

//旋转 待完善……
function ReMatrix()
{
    lock = false;
if(lock == false)
    {
        lock = true;

//矩阵旋转。
        //x' = y + a - b;
        //y' = -x + a + b;
    
var v = -1;
var h = -1;
for(var t = 0;t< 4;t++)
        {        
if(TModules[Target][t].split("_").length == 3)
            {
                v = Math.round(TModules[Target][t].split("_")[0]);
                h = Math.round(TModules[Target][t].split("_")[1]);
break;
            }
        }    
if(v == -1&&h== -1)
        {
            lock = false;
return;
        }

var TempModules = new Array(4);

for(var i = 0;i< 4;i++)
        {
var vn = Math.round(TModules[Target][i].split("_")[0]);
var hn = Math.round(TModules[Target][i].split("_")[1]);        
var len = Math.round(TModules[Target][i].split("_").length);        
if(hn + v - h >= VNum || -vn + v + h < 0|| -vn + v + h >= HNum)
            {
                lock = false;
return;
            }
if(len == 3)
            {
                TempModules[i]  = (hn + v - h).toString() + "_" + (-vn + v + h).toString() + "_D";        
            }
else
            {
                TempModules[i]  = (hn + v - h).toString() + "_" + (-vn + v + h).toString();        
            }
        }

for(var i = 0;i< 4;i++)
        {
var v1 = Math.round(TempModules[i].split("_")[0]);
var h1 = Math.round(TempModules[i].split("_")[1]);
var isorg = false;
if(v1 < 0)
            {
continue;                
            }
for(var j = 0;j<4;j++)
            {
if(TempModules[i] == TModules[Target][j])            
                {
                    isorg = true;
                }
            }
if(Sqare[v1][h1] == 1&&isorg == false)
            {
                lock = false;
return;
            }
        }

for(var i = 0;i< 4;i++)
        {

var vn = Math.round(TModules[Target][i].split("_")[0]);
var hn = Math.round(TModules[Target][i].split("_")[1]);
            TModules[Target][i] = TempModules[i];
if(vn >= 0)
            {
var strT = document.getElementById("T" + vn.toString() + "_" + hn.toString());
                strT.style.backgroundColor = BColor;
                Sqare[vn][hn] = 0;            
            }                        
        }

for(var i = 0;i< 4;i++)
        {
var vn = Math.round(TempModules[i].split("_")[0]);
var hn = Math.round(TempModules[i].split("_")[1]);
if(vn >= 0)
            {            
var strN = document.getElementById("T" + vn.toString() + "_" + hn.toString());
                strN.style.backgroundColor = FColor;
                Sqare[vn][hn] = 1;    
            }            
        }        
        lock = false;
    }

}

//消行
function ReLines()
{
var count = 0;
var end = false;
while(end == false)
    {
for(var i = VNum - 1;i >= 0 ;i--)
        {
for(var j = 0;j< HNum;j++)
            {
                count += Sqare[i][j];
            }                
if(count < HNum)
            {
                count = 0;
if(i == 0)
                {
                    end = true;
                }
continue;
            }

            Score += 1;
if(TimeSpace - 10 > TimeSpaceStop)
            {
                TimeSpace -= 10;
            }
            document.getElementById("txtScore").value = "Score : " + Score.toString();
            document.getElementById("txtSpeed").value ="Speed : " + TimeSpace.toString() + "毫秒";
            count = 0;
for(var ii = i - 1;ii >= 0;ii--)
            {
for(var j = 0;j< HNum;j++)
                {
                    Sqare[ii + 1][j] = Sqare[ii][j];
var strT = document.getElementById("T" + (ii + 1).toString() + "_" + j.toString());
var strN = document.getElementById("T" + ii.toString() +"_" + j.toString());
                    strT.style.backgroundColor = strN.style.backgroundColor;
                }            
            }
if(i==0)
            {
                end = true;
            }
break;        
        }
    }

}

//游戏开始
function GameStart()
{
    ModuleDropDown();
    document.getElementById("btnStart").disabled = true;
    document.getElementById("btnStop").disabled = false;
}

//游戏暂停
function GameStop()
{    
    document.getElementById("btnStart").disabled = false;
if(MainTime != null)
    {
        clearTimeout(MainTime);
    }
}

//游戏结束
function GameOver()
{    
for(var i = 0;i< VNum ;i++)
    {
for(var j = 0;j< HNum;j++)
        {
            document.getElementById("T" + i.toString() + "_" + j.toString()).style.backgroundColor = FColor;
        }
    }
    alert("Game Over !");
for(var i = 0;i< VNum ;i++)
    {
for(var j = 0;j< HNum;j++)
        {
            document.getElementById("T" + i.toString() + "_" + j.toString()).style.backgroundColor = BColor;
        }
    }

if(MainTime != null)
    {
        clearTimeout(MainTime);
    }
    InitialSqare();
    InitialTModules();
    GetTModule();
    lock = false;
    Score = 0;
    document.getElementById("txtScore").value = "Score : 0";
    document.getElementById("txtSpeed").value ="Speed : " + TimeSpace.toString() + "毫秒";
    document.getElementById("btnStart").disabled = false;    
}

//游戏参数初始化
function MainFunction()
{
    InitialPanel();
    InitialSqare();
    InitialTModules();
    GetTModule();
    InitKeydown()
}

//初始化面板
function InitialPanel()
{
var vwidth = HNum * TetrisWidth + HNum - 1;
var vheight = VNum * TetrisWidth + VNum - 1;
var contentdivstr = "<div style=\"width:";
    contentdivstr += (vwidth + 2).toString();
    contentdivstr += "px;height:";
    contentdivstr += (vheight + 2).toString();
    contentdivstr +=";\"><div id=\"TetrisContent\" style=\"width:100%; height:100%; border:solid 1px #000000; position:relative;\"></div></div>";
    document.getElementById("contentdiv").innerHTML = contentdivstr;

var BorderLines = "";
for(var i = 1;i< VNum;i++)
    {
        BorderLines += "<div style =\"position:absolute;top:";
        BorderLines += (i * TetrisWidth + (i - 1)).toString();
        BorderLines += "px;left:0px;width:";
        BorderLines += vwidth.toString();
        BorderLines += "px;height:1px;background-color:";
        BorderLines +=     GridColor +";\"></div>";
    }

for(var i = 1;i< HNum;i++)
    {
        BorderLines += "<div style =\"position:absolute;left:";
        BorderLines += (i * TetrisWidth + (i - 1)).toString();
        BorderLines += "px;top:0px;height:";
        BorderLines += vheight.toString();
        BorderLines += "px;width:1px;background-color:";
        BorderLines +=     GridColor +";\"></div>";
    }

var VHDots = "";

for(var p = 0 ;p < VNum ;p++)
    {
for(var k = 0;k< HNum; k++)
        {

            VHDots += "<div id=\"T"
            VHDots += p.toString() + "_" + k.toString();
            VHDots +="\" style=\"LEFT: ";
            VHDots += (k * TetrisWidth + k ).toString() + "px; WIDTH:";
            VHDots += (TetrisWidth).toString() + "px; POSITION: absolute; TOP: ";
            VHDots += (p * TetrisWidth + p ).toString() + "px; HEIGHT: ";
            VHDots += (TetrisWidth).toString() + "px;background-color:";
            VHDots += BColor + ";\" ></div>";            
        }
    }
    document.getElementById("TetrisContent").innerHTML = BorderLines + VHDots;    
    document.getElementById("txtScore").value = "Score : 0";
    document.getElementById("txtSpeed").value ="Speed : " + TimeSpace.toString() + "毫秒";
    document.getElementById("btnStart").disabled = false;
    document.getElementById("btnStop").disabled = false;
}

//初始化方块位置矩阵
function InitialSqare()
{
for(var i = 0;i < VNum;i++)
    {
        Sqare[i] = new Array(HNum);
for( var j = 0;j < HNum;j++)
        {
            Sqare[i][j] = 0;
        }
    }
}

//初始化方块模型
function InitialTModules()
{
var sh = Math.round((HNum - 1) / 2) - 2;
    TModules[0] = new Array("-1_" + sh.toString(),"-1_" + (sh + 1).toString() + "_D","-1_" + (sh + 2).toString(),"-1_" + (sh + 3).toString()); //横条
    sh = Math.round((HNum -1) / 2);
    TModules[1] = new Array("-1_" + sh.toString(),"-2_" + sh.toString(),"-3_" + sh.toString() + "_D","-4_" + sh.toString());    //竖条
    sh = Math.round((HNum - 1) / 2) - 1;
    TModules[2] = new Array("-1_" + sh.toString() + "_D","-1_" + (sh + 1).toString(),"-2_" + sh.toString(),"-3_" + sh.toString()); //右L
    TModules[3] = new Array("-1_" + sh.toString(),"-1_" + (sh + 1).toString() + "_D","-2_" + (sh + 1).toString(),"-3_" + (sh + 1).toString()); //左L
    sh = Math.round((HNum - 1) / 2);
    TModules[4] = new Array("-1_" + (sh + 1).toString(),"-1_" + sh.toString() + "_D","-2_" + sh.toString(),"-2_" + (sh - 1).toString()); //左Z
    TModules[5] = new Array("-1_" + (sh - 1).toString(),"-1_" + sh.toString() + "_D","-2_" + sh.toString(),"-2_" + (sh + 1).toString()); //右Z
    sh = Math.round((HNum - 1) / 2);
    TModules[6] = new Array("-1_" + (sh - 1).toString(),"-1_" + sh.toString() + "_D","-1_" + (sh + 1).toString(),"-2_" + sh.toString()); //上凸
    TModules[7] = new Array("-1_" + sh.toString(),"-1_" + (sh + 1).toString(),"-2_" + sh.toString(),"-2_" + (sh + 1).toString());//田
}

//获得随机模型
function GetTModule()
{
    Target = Math.floor(Math.random()*TModulesNum + 1) - 1;    
    InitialTModules();
}
function ChangeV(dis)
{
if(VNum + dis>=10&&VNum + dis<=20)
    {
        VNum += dis;
        InitialPanel();

if(MainTime != null)
        {
            clearTimeout(MainTime);
        }
        InitialSqare();
        InitialTModules();
        GetTModule();
        lock = false;

    }        
}

//隐藏显示网格
function GridOn(flag)
{

if(document.getElementById("btngrid").value=="无网格")
    {
        document.getElementById("btngrid").value = "网格";
        GridColor = BColor;        
    }
else
    {
        document.getElementById("btngrid").value = "无网格";
        GridColor = GridFColor;        
    }
    InitialPanel();
if(MainTime != null)
    {
        clearTimeout(MainTime);
    }
    InitialSqare();
    InitialTModules();
    GetTModule();
    lock = false;        
}

//横向增加减少网格
function ChangeH(dis)
{
if(HNum + dis>=10 && HNum + dis<=26)
    {
        HNum += dis;
        InitialPanel();

if(MainTime != null)
        {
            clearTimeout(MainTime);
        }
        InitialSqare();
        InitialTModules();
        GetTModule();
        lock = false;        
    }
}
function CreateBtns()
{
var clr = new Array('FF','C0','A0','80','60','40','20','00');
var bgcolorsele = document.getElementById("bgcolors");
var fcolorssele = document.getElementById("fcolors");
var seloption = null;
for (i=0;i<8;i++) 
    { 
for (j=0;j<8;j++) 
        {
for (k=0;k<8;k++) 
            {
                seloption = new Option("#" + clr[i]+clr[j]+clr[k],"#" + clr[i]+clr[j]+clr[k]);
                seloption.style.backgroundColor = "#"+clr[i]+clr[j]+clr[k];

if("#"+clr[i]+clr[j]+clr[k] == BColor)
                {
                    seloption.selected = true;
                    bgcolorsele.style.backgroundColor = "#"+clr[i]+clr[j]+clr[k];
                }

                bgcolorsele.options[bgcolorsele.length] = seloption;

                seloption = new Option("#" + clr[i]+clr[j]+clr[k],"#" + clr[i]+clr[j]+clr[k]);
                seloption.style.backgroundColor = "#"+clr[i]+clr[j]+clr[k];
if("#"+clr[i]+clr[j]+clr[k] == FColor)
                {
                    seloption.selected = true;
                    fcolorssele.style.backgroundColor = "#"+clr[i]+clr[j]+clr[k];
                }
                fcolorssele.options[fcolorssele.length] = seloption;
            }
        }
    }
}

function BColorChange()
{
var bgcolorsel = document.getElementById("bgcolors");
    BColor = bgcolorsel.options[bgcolorsel.selectedIndex].value;
    bgcolorsel.style.backgroundColor = BColor;
    InitialPanel();

if(MainTime != null)
    {
        clearTimeout(MainTime);
    }
    InitialSqare();
    InitialTModules();
    GetTModule();
    lock = false;
}

function FColorChange()
{
var fcolorsel = document.getElementById("fcolors");
    FColor = fcolorsel.options[fcolorsel.selectedIndex].value;
    fcolorsel.backgroundColor = FColor;
    InitialPanel();

if(MainTime != null)
    {
        clearTimeout(MainTime);
    }
    InitialSqare();
    InitialTModules();
    GetTModule();
    lock = false;
}

</script>
</head>
<body onLoad="MainFunction();CreateBtns();">
<div>
<div style="margin-bottom:4px;">
  <input type="button" value="横向扩展" onClick="ChangeH(1)" />
  <input type="button" value="横向收缩" onClick="ChangeH(-1)" />
  <input type="button" value="纵向扩展" onClick="ChangeV(1)" />
  <input type="button" value="纵向收缩" onClick="ChangeV(-1)" />
  <input type="button" id="btngrid" value="无网格" onClick="GridOn()" />

</div>

<div style="margin-bottom:4px;">
    背景色：
      <select id="bgcolors" style="background-color:#FFFFFF;" onChange="BColorChange()">      
      </select>
    前景色
    <select id="fcolors" style="background-color:#FFFFFF;" onChange="FColorChange()">      
      </select>
</div>
<div style="margin-bottom:4px;">
    <input type="text" id="txtScore" style="border:none; text-align:center;" value="" />
    <input type="text" id="txtSpeed" style="border:none; text-align:center;" value="" />
      <input type="button" id="btnStart" onClick="GameStart()" value="开始" />
      <input type="button" id="btnStop" onClick="GameStop()"  value="停止" />
</div>
<div id="contentdiv" style="height:auto; " > </div>
</div>
</body>
</html>

这里不做详细讲解了，有兴趣的可以自己读一下代码，注释比较清楚。

拷贝代码可直接运行





转载于:https://www.cnblogs.com/Dawnwang/archive/2011/10/31/2230844.html

aojiage7469
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
有趣的HTML实例（十四） 窗边风景动画（css+js）
好好读书
02-28 585
有趣的HTML实例（十四） 窗边风景动画（css+js）
初学俄罗斯方块，完美注释--欢迎指出bug
Naro7L的博客
08-16 683
第一次写小游戏，参考了很多个俄罗斯方块的版本！自我感觉逻辑上很复杂，代码不够优雅！欢迎指正<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>练习--俄罗斯方块</title> <style type="text/css"> #board{margin-top:10px;}
javascript俄罗斯方块
东南隅
07-23 1607
初学javascript，写了个简单的俄罗斯方块，但是有个问题一直解决不了，就是响应速度超慢。。这究竟是为什么呢？javascript没有给提供绘图的api，就学着网上的做法用talbe来画图，恰好俄罗斯方块绘图简单，而且所有图形都是方块组成的，于是每个方格用一个table。莫非是由于不断重绘这些talbe导致了程序速度如此之慢？当初用mfc写过一个类似的方块，同样的重绘频率，但程序速
俄罗斯方块设计思路html,HTML5游戏实战之俄罗斯方块
weixin_39996234的博客
06-07 229
"heng", "shu"来标识。 这个标识字符 需要在构造Shape对象时传入给构造函数。 像下面这样。var heng = new Shape("hang", 20, 20);这样我们就创造一个横条的图形， 在坐标20, 20的位置上，举一反三，其它的图形也都这么创造出来。 不同点在于，每个图形内部的四个小方块的初始化坐标位置是不同的。因为形状不同嘛，就是我上面代码中所有用数字1临时写的坐标，...
手把手教你用Excel编写俄罗斯方块
码农翻身
03-26 1万+
看到这个题目，想必你一定会感到非常惊讶，什么，Excel居然能开发游戏？没错，Excel的强大取决于使用者，遇强则强，遇弱则弱。但我这篇文章并不是为了展...
Python 实战开发俄罗斯方块游戏
热门推荐
GitChat
07-03 3万+
“人生苦短，我用 Python”，这是网络上的一句戏言，却真实反映了 Python 语言的江湖地位。2017年 IEEE Spectrum 杂志发布的编程语言排行榜中，Python 排行榜首。Python 也被视为 AI 时代的头牌语言，是数据科学和机器学习领域使用最多的语言。Python 语言学习曲线平滑，上手容易。然而，新手必须通过项目实战才能显著提高 Python 开发能力。本达人课意在...
aasddsasda的JS俄罗斯方块全解释
natineprince的专栏
08-20 4093
此文为带新手进门的文章。 欢迎转载，但请保留转载信息。
基于java的俄罗斯方块小游戏设计(含源文件)
【完整】
03-04 4433
欢迎添加微信互相交流学习哦！ 项目源码：https://gitee.com/oklongmm/biye 题 目 小游戏开发 摘 要 俄罗斯方块是我们最常见的游戏之一，该游戏出现过在掌上游戏机、家用游戏机、手机游戏和电脑游戏中，因此俄罗斯方块也是一个十分经典的游戏。我们可以在网上下载到各式各样的俄罗斯方块游戏，也可以在各个游戏大厅中见到网络对战形式的俄罗斯方块。一般的俄罗斯方块规则比较简单，游戏中随机出现一些方块，再对这些方块进行变换，下降到游戏界面中的不同位置，如...
HTML5游戏实战之俄罗斯方块
一个20年码农的博客空间
07-08 1万+
先说几句废话，写这篇文章前也思考了很久，最近这几年很少在博客上写文章了，感觉年龄越大越懒得写东西了，不过思前想好，还是决定写出来。还是以前的心态，做份记录，未来可以回顾。同时也希望能给初学者写一篇好的教程。 现在HTML5炒得的确很火，我就不解释为什么了，文章里会有很多处用“不解释，百度吧", 大家别见怪。这篇文章主要是讲解如何设计和实现一款经典的俄罗斯方块游戏， 并且是基于HTML5的Canv...
俄罗斯方块html+css+js
06-06
景点小游戏俄罗斯方块，上下左右填充消除，填满失败的传统游戏规则，通过原生javascript实现操作，css美化样式，html基础布局，非常适合初学者的小伙伴体验学习，快来体验叭
Javascript俄罗斯方块，极简代码（完整版）适合初学者
03-29
Javascript俄罗斯方块，极简代码（完整版）适合初学者
俄罗斯方块JS版本
12-21
纯js写的俄罗斯方块 供初学者参考 单人版 还有双人对战版另外的资源
俄罗斯方块js双人版
12-21
纯js写的双人版俄罗斯 供初学者参考 此为双人对战版 还有单机版另外的资源
Javascript实现俄罗斯方块
04-29
纯Javascrtip+css+html实现俄罗斯方块。 代码简单易懂，适合初学者研究。
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1085
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
`“use strict“`在JavaScript中是什么？它背后的原理是什么？
Jerry学长
05-27 1058
JavaScript的严格模式（strict mode）是ECMAScript 5引入的一项特性。如果你在脚本或函数的顶部声明 ，你就启用了严格模式： 当JavaScript引擎看到这个指令时，它将开始以一种特殊的模式解释代码。在这种模式下，当检测到某些可能导致潜在错误的编码实践时，会抛出错误。这就是严格模式背后的基本原理。考虑下面这个例子： 开发者可能因为强迫症而对齐数值字面量，但这样会无意中使变量 初始化为八进制字面量。在非严格模式下，这将被解释为值 （十进制）。然而，在严格模式下，这样的代码会抛出错
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
最新发布
山花的博客
05-30 328
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
Vue3 - 实现一个雨水滴落的动画效果
良月柒
05-29 142
在 Vue 3 中实现一个雨水滴落的动画效果，可以使用 HTML5 的元素和 JavaScript 来绘制和控制动画。
JavaScript 俄罗斯方块
04-01
JavaScript 俄罗斯方块是一种在 Web 网页上运行的俄罗斯方块游戏。它利用了 JavaScript 语言的特性和 HTML、CSS 技术，实现了一个简单的游戏界面和游戏逻辑。 在 JavaScript 俄罗斯方块游戏中，玩家需要控制一个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值