Javascript写的俄罗斯方块

最新推荐文章于 2021-01-04 12:01:18 发布
最新推荐文章于 2021-01-04 12:01:18 发布
阅读量1.1k 收藏
点赞数
分类专栏： 脚本语言 文章标签： javascript class function button table border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/feng_sundy/article/details/374248
版权

Javascript写的俄罗斯方块

<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.οncοntextmenu=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 οnkeydοwn="return keyControl();">
<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" οnclick="return beginGame();"></td></tr>
    <tr><td><input type=button id="Pause" style="width:100px" value="Pause" οnclick="return pauseGame();"></td></tr>
    <tr><td><input type=button id="Preview" style="width:100px" value="Preview" οnclick="preview();"></td></tr>
    <tr><td><input type=button id="Replay" style="width:100px" value="Replay" οnclick="replayGame();"></td></tr>
    <tr><td><input type=button id="Quit" style="width:100px" value="Quit" οnclick="window.close();"></td></tr>
</table>
</BODY>
</HTML>
<script>
function unSel()
{
    document.execCommand("Unselect");
    window.setTimeout("unSel()",10);
}
unSel();

window.οnunlοad=rel;
function rel()
{
    location.reload();
    return false;
}

</script>

feng_sundy
关注
专栏目录
Jquery写的游戏 俄罗斯方块
12-13
Jquery俄罗斯方块 基于Jquery开发的俄罗斯方块小游戏，带游戏说明
javaScript版俄罗斯方块
02-13
JavaScript版的俄罗斯方块是一款基于Web的休闲游戏，利用了JavaScript这一广泛应用于网页开发的脚本语言。在本文中，我们将深入探讨JavaScript编程基础、HTML布局、CSS样式以及如何将这些技术结合实现俄罗斯方块的...
Javascript写俄罗斯方块游戏
dianyan5615的博客
07-05 117
　　俄罗斯方块这个游戏也做了移动端的兼容， 这个游戏难点是怎么翻转方块， 自己实现的方式是把方块放到一个二维数组， 然后逆时针旋转二维数组。 　　也有别的方法，比如直接用一个全局变量代表一个方向， 翻转的时候根据这个变量转动方块， 但是代码要写更多。 　　在文库搜索到了一篇关于算法的文章， ....看着好心塞： 　　游戏在线查看：打开 　　游戏截图PC端： 　　游...
JavaScript写的俄罗斯方块
seanchan的专栏
08-26 660
如果你在考虑要不要学习JavaScript，建议你看看这个，绝对让你对它产生兴趣
60行代码俄罗斯方块
f5647的专栏
05-04 1433
var map=eval("["+Array(23).join("0x801,")+"0xfff]"); var tatris=[[0x6600],[0x2222,0xf00],[0xc600,0x2640],[0x6c00,0x4620],[0x4460,0x2e0,0x6220,0x740],[0x2260,0xe20,0x6440,0x4700],[0x2620,0x720,0x2320,0
60行代码 Javascript 写的俄罗斯方块游戏
dghggij的博客
01-26 378
60行代码 Javascript 写的俄罗斯方块游戏
JavaScript实现俄罗斯方块.rar
08-26
JavaScript实现的俄罗斯方块是一款基于浏览器的经典游戏，它利用了JavaScript这门强大的客户端脚本语言，为用户在网页上提供了一种重温经典游戏的方式。在本文中，我们将深入探讨JavaScript如何构建这样的游戏，并...
JavaScript写的俄罗斯方块小游戏.zip
06-12
JavaScript写的俄罗斯方块小游戏.zipJavaScript写的俄罗斯方块小游戏.zipJavaScript写的俄罗斯方块小游戏.zipJavaScript写的俄罗斯方块小游戏.zipJavaScript写的俄罗斯方块小游戏.zipJavaScript写的俄罗斯方块小游戏...
JavaScript-使用javascript+phaser开发的小游戏之俄罗斯方块.zip
最新发布
03-08
在压缩包中的 "JavaScript_使用javascript+phaser开发的小游戏之俄罗斯方块" 文件中，应该包含了实现以上功能的源代码。通过阅读和分析代码，你可以学习到如何结合 JavaScript 和 Phaser 实现游戏逻辑，以及如何组织...
原生JavaScript编写俄罗斯方块
12-08
【原生JavaScript编写俄罗斯方块】是一个挑战性的项目，它涉及到JavaScript编程语言的基本知识以及游戏开发的技巧。在这个项目中，开发者尝试用JavaScript从零开始实现经典的俄罗斯方块游戏。以下是一些关键的知识点...
JQuery 游戏 俄罗斯方块 代码
07-17
使用Jquery.js, 用最少的代码实现页面俄罗斯方块游戏，方向键控制移动，空格变形，回车键暂停，绝对原创，代码完全免费共享，大家随意修改使用。
jquery编写的俄罗斯方块源码
04-14
这是用jquery框架开发的俄罗斯方块源码，老外写的，只有四个文件，两三百行代码就实现了，编程思想很牛逼，可以学习一下。
俄罗斯方块游戏设计报告
12-15
俄罗斯方块游戏设计报告
js版俄罗斯方块（二）
斌斌(Java)
03-27 2307
之前曾发过一个js版的俄罗斯方块，界面比较简单，Bug也不少。抽空重构了一下，加入了javaScript面向对象的知识，修复了一些明显的BUG。 斌斌 (给我写信) 原创博文（http://blog.csdn.net/binbinxyz），转载请注明出处！ 源码（下载：http://download.csdn.net/detail/binbinxyz/5186774）公开如下：
javascript 做的俄罗斯方块
12-24 417
俄罗斯方块BODY {BACKGROUND: black; MARGIN: 0px}TD {COLOR: #ffffff; FONT-FAMILY: 宋体; FONT-SIZE: 9pt; HEIGHT: 20px; WIDTH: 20px}#block_div {POSITION: absolute; WIDTH: 80px; Z-INDEX: 1}#table_div {POSITION: a
JS俄罗斯方块第二版
kuma小站
01-30 521
#table {float:left} #table tr{height:20px;} #table tr td{width:20px;} #yl {float:left;margin-left:10px;} #yl tr{height:20px;} #yl tr td{width:20px;}
B站学习---js面向对象应用（俄罗斯方块游戏的实现）
belle_mei的博客
01-04 488
这是本人在B站学习上跟着老师做的一个小游戏—俄罗斯方块，里面的内容跟老师的视频几乎一样。 视频来源 https://www.bilibili.com/video/BV1Rv41147GP?p=10 采用的技术主要是JavaScript。 全部代码，本人也放在了gitee上了，这是国内的GitHub，速度比较快。 仓库地址，此地址短期内有效 https://gitee.com/jjm1/tetris 1.1 初始化布局 代码 //采用这样的形式是为了防止全局污染 (function () { wi
javascript俄罗斯方块
东南隅
07-23 1630
初学javascript，写了个简单的俄罗斯方块，但是有个问题一直解决不了，就是响应速度超慢。。这究竟是为什么呢？javascript没有给提供绘图的api，就学着网上的做法用talbe来画图，恰好俄罗斯方块绘图简单，而且所有图形都是方块组成的，于是每个方格用一个table。莫非是由于不断重绘这些talbe导致了程序速度如此之慢？当初用mfc写过一个类似的方块，同样的重绘频率，但程序速
用JS实现的俄罗斯方块
weixin_33813128的博客
06-13 105
一边练习一下javascript，一边搞的稍微有趣一点。这次的界面就是个table表格。其实所有的操作只要操作tabel的class就可以了。我这里把颜色直接用 cell.style.backgroundColor 来设置内联样式的属性了。完整代码如下，预先显示下一个方块的功能没做。Game Over也没有写。 <!DOCTYPE html> <html lang="en"&gt...
简易版JavaScript俄罗斯方块实现
"使用JavaScript实现一个简易版的俄罗斯方块游戏。通过简洁的代码，创建一个HTML文件，玩家可以体验到基本的游戏流程。" 在这个项目中，开发者利用JavaScript语言来编写了一个基本的俄罗斯方块游戏。游戏的核心逻辑...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值