자바스크립트 테트리스

<script type="text/javascript">
 
    var tr, td;
    
    var key, moveState, maxY;
    
    var xArray, yArray; //기본블럭 배열
    
    var xArray_1, xArray_2, xArray_3, xArray_4; //도형 변형배열
    var yArray_1, yArray_2, yArray_3, yArray_4; //도형 변형배열
    
    var random;
    
    function makeBlock(){
        random = Math.floor(Math.random() * 7) + 1;
    
        switch (random){
            case 1 : xArray = new Array(1, 0, 1, 2); yArray = new Array(0, 1, 1, 1); break;
            case 2 : xArray = new Array(0, 0, 1, 2); yArray = new Array(0, 1, 1, 1); break;
            case 3 : xArray = new Array(2, 0, 1, 2); yArray = new Array(0, 1, 1, 1); break;
            case 4 : xArray = new Array(0, 1, 2, 3); yArray = new Array(0, 0, 0, 0); break;
            case 5 : xArray = new Array(0, 1, 1, 2); yArray = new Array(0, 0, 1, 1); break;
            case 6 : xArray = new Array(1, 2, 0, 1); yArray = new Array(0, 0, 1, 1); break;
            case 7 : xArray = new Array(0, 1, 0, 1); yArray = new Array(0, 0, 1, 1); break;
        }
        //가운데로 
        for(var i in xArray){ xArray[i] = xArray[i]+4;};
    }
    
    function InitBlock(){
    
        makeBlock();
        settingBlock(random);
    
    }
    
    //블럭 좌우 이동
    function settingBlock(ran){
    
        $("#playArea tr td").removeClass("on");
        $("#playArea tr td").removeClass("type" + ran);
    
        for(var j in xArray){
    
            x = xArray[j];
            y = yArray[j];
    
    //        console.log("x = " + xArray[j] + " // y = " + yArray[j])
    
    
            $("#playArea tr:eq("+y+") td:eq("+x+")").addClass("on");
            $("#playArea tr:eq("+y+") td:eq("+x+")").addClass("type" + ran);
    
        }
    }
    
    function setting(){
    
        for(var i=0; i<20; i++){
    
            tr = $("<tr>").appendTo("#playArea");
    
            for(var k=0; k<10; k++){
                td = $("<td>", {
                    //html : i + ", " +k
                }).appendTo(tr).addClass("block");
            }
        }
    
    }
    
    function moveBlock(key){
        //console.log(key);
        //←: 37, ↑: 38, →: 39, ↓: 40
    
        moveState = true;
        moveCheck(key);
    
        if(!moveState){ removeBlock(); }
    
    
        if(moveState){
            switch (key){
                case 39 : for(var i in xArray){ xArray[i] = xArray[i]+1;}; settingBlock(random); break;
                case 37 : for(var i in xArray){ xArray[i] = xArray[i]-1;}; settingBlock(random); break;
                case 40 : for(var i in yArray){ yArray[i] = yArray[i]+1;}; settingBlock(random); break;
                case 38 : blockRotate(random); settingBlock(random); break;
            }
        }
    }
    
    var rotate = 0;
    function blockRotate(ran){
        rotate++;
        if(rotate > 4){
            rotate = 1;
        }
        switch (ran){
    
            case 1 : 
                switch (rotate){
                    case 1 : 
                        xArray[0] = xArray[0] - 1;    yArray[0] = yArray[0] + 0;
                        xArray[1] = xArray[1] + 0;    yArray[1] = yArray[1] + 0;
                        xArray[2] = xArray[2] + 0;    yArray[2] = yArray[2] + 0;
                        xArray[3] = xArray[3] - 2;    yArray[3] = yArray[3] + 1;
                        break;
    
                    case 2:
                        xArray[0] = xArray[0] + 0;  yArray[0] = yArray[0] + 0;
                        xArray[1] = xArray[1] + 1;    yArray[1] = yArray[1] - 1;
                        xArray[2] = xArray[2] + 1;    yArray[2] = yArray[2] - 1;
                        xArray[3] = xArray[3] + 1;    yArray[3] = yArray[3] - 1;
                        break;
    
                    case 3:
                        xArray[0] = xArray[0] + 1;  yArray[0] = yArray[0] + 0;
                        xArray[1] = xArray[1] - 1;    yArray[1] = yArray[1] + 1;
                        xArray[2] = xArray[2] - 1;    yArray[2] = yArray[2] + 1;
                        xArray[3] = xArray[3] + 0;    yArray[3] = yArray[3] + 1;
                        break;
    
                    case 4:
                        xArray[0] = xArray[0] + 0;  yArray[0] = yArray[0] + 0;
                        xArray[1] = xArray[1] + 0;    yArray[1] = yArray[1] + 0;
                        xArray[2] = xArray[2] + 0;    yArray[2] = yArray[2] + 0;
                        xArray[3] = xArray[3] + 1;    yArray[3] = yArray[3] - 1;
                        break;
                }
            break;
    
            case 2 :
                switch (rotate){
                    case 1 : 
                        xArray[0] = xArray[0] + 0;    yArray[0] = yArray[0] + 0;
                        xArray[1] = xArray[1] + 1;    yArray[1] = yArray[1] - 1;
                        xArray[2] = xArray[2] - 1;    yArray[2] = yArray[2] + 0;
                        xArray[3] = xArray[3] - 2;    yArray[3] = yArray[3] + 1;
                        break;
    
                    case 2:
                        xArray[0] = xArray[0] + 0;  yArray[0] = yArray[0] + 0;
                        xArray[1] = xArray[1] + 0;    yArray[1] = yArray[1] + 0;
                        xArray[2] = xArray[2] + 2;    yArray[2] = yArray[2] - 1;
                        xArray[3] = xArray[3] + 2;    yArray[3] = yArray[3] - 1;
                        break;
    
                    case 3:
                        xArray[0] = xArray[0] + 1;  yArray[0] = yArray[0] + 0;
                        xArray[1] = xArray[1] + 0;    yArray[1] = yArray[1] + 1;
                        xArray[2] = xArray[2] - 2;    yArray[2] = yArray[2] + 2;
                        xArray[3] = xArray[3] - 1;    yArray[3] = yArray[3] + 1;
                        break;
    
                    case 4:
                        xArray[0] = xArray[0] - 1;  yArray[0] = yArray[0] + 0;
                        xArray[1] = xArray[1] - 1;    yArray[1] = yArray[1] + 0;
                        xArray[2] = xArray[2] + 1;    yArray[2] = yArray[2] - 1;
                        xArray[3] = xArray[3] + 1;    yArray[3] = yArray[3] - 1;
                        break;
                }
            break;
    
            case 3 :
                switch (rotate){
                    case 1 : 
                        xArray[0] = xArray[0] - 2;    yArray[0] = yArray[0] + 0;
                        xArray[1] = xArray[1] + 0;    yArray[1] = yArray[1] + 0;
                        xArray[2] = xArray[2] - 1;    yArray[2] = yArray[2] + 1;
                        xArray[3] = xArray[3] - 1;    yArray[3] = yArray[3] + 1;
                        break;
    
                    case 2:
                        xArray[0] = xArray[0] + 0; yArray[0] = yArray[0] + 0;
                        xArray[1] = xArray[1] + 1;    yArray[1] = yArray[1] - 1;
                        xArray[2] = xArray[2] + 2;    yArray[2] = yArray[2] - 2;
                        xArray[3] = xArray[3] - 1;    yArray[3] = yArray[3] - 1;
                        break;
    
                    case 3:
                        xArray[0] = xArray[0] + 0;    yArray[0] = yArray[0] + 0;
                        xArray[1] = xArray[1] + 0;    yArray[1] = yArray[1] + 0;
                        xArray[2] = xArray[2] - 1;    yArray[2] = yArray[2] + 1;
                        xArray[3] = xArray[3] + 1;    yArray[3] = yArray[3] + 1;
                        break;
    
                    case 4:
                        xArray[0] = xArray[0] + 2;    yArray[0] = yArray[0] + 0;
                        xArray[1] = xArray[1] - 1;    yArray[1] = yArray[1] + 1;
                        xArray[2] = xArray[2] + 0;    yArray[2] = yArray[2] + 0;
                        xArray[3] = xArray[3] + 1;    yArray[3] = yArray[3] - 1;
                        break;
                }
            break;
    
            case 4 :
                switch (rotate){
                    case 1 : 
                        xArray[0] = xArray[0] + 0;    yArray[0] = yArray[0] + 0;
                        xArray[1] = xArray[1] - 1;    yArray[1] = yArray[1] + 1;
                        xArray[2] = xArray[2] - 2;    yArray[2] = yArray[2] + 2;
                        xArray[3] = xArray[3] - 3;    yArray[3] = yArray[3] + 3;
                        break;
    
                    case 2:
                        xArray[0] = xArray[0] + 0;    yArray[0] = yArray[0] + 0;
                        xArray[1] = xArray[1] + 1;    yArray[1] = yArray[1] - 1;
                        xArray[2] = xArray[2] + 2;    yArray[2] = yArray[2] - 2;
                        xArray[3] = xArray[3] + 3;    yArray[3] = yArray[3] - 3;
                        break;
    
                    case 3:
                        xArray[0] = xArray[0] + 0;    yArray[0] = yArray[0] + 0;
                        xArray[1] = xArray[1] - 1;    yArray[1] = yArray[1] + 1;
                        xArray[2] = xArray[2] - 2;    yArray[2] = yArray[2] + 2;
                        xArray[3] = xArray[3] - 3;    yArray[3] = yArray[3] + 3;
                        break;
    
                    case 4:
                        xArray[0] = xArray[0] + 0;    yArray[0] = yArray[0] + 0;
                        xArray[1] = xArray[1] + 1;    yArray[1] = yArray[1] - 1;
                        xArray[2] = xArray[2] + 2;    yArray[2] = yArray[2] - 2;
                        xArray[3] = xArray[3] + 3;    yArray[3] = yArray[3] - 3;
                        break;
                }
            break;
    
            case 5 :
                switch (rotate){
                    case 1 : 
                        xArray[0] = xArray[0] + 1;    yArray[0] = yArray[0] + 0;
                        xArray[1] = xArray[1] - 1;    yArray[1] = yArray[1] + 1;
                        xArray[2] = xArray[2] + 0;    yArray[2] = yArray[2] + 0;
                        xArray[3] = xArray[3] - 2;    yArray[3] = yArray[3] + 1;
                        break;
    
                    case 2:
                        xArray[0] = xArray[0] - 1;    yArray[0] = yArray[0] + 0;
                        xArray[1] = xArray[1] + 1;    yArray[1] = yArray[1] - 1;
                        xArray[2] = xArray[2] + 0;    yArray[2] = yArray[2] + 0;
                        xArray[3] = xArray[3] + 2;    yArray[3] = yArray[3] - 1;
                        break;
    
                    case 3:
                        xArray[0] = xArray[0] + 1;    yArray[0] = yArray[0] + 0;
                        xArray[1] = xArray[1] - 1;    yArray[1] = yArray[1] + 1;
                        xArray[2] = xArray[2] - 0;    yArray[2] = yArray[2] + 0;
                        xArray[3] = xArray[3] - 2;    yArray[3] = yArray[3] + 1;
                        break;
    
                    case 4:
                        xArray[0] = xArray[0] - 1;    yArray[0] = yArray[0] + 0;
                        xArray[1] = xArray[1] + 1;    yArray[1] = yArray[1] - 1;
                        xArray[2] = xArray[2] + 0;    yArray[2] = yArray[2] - 0;
                        xArray[3] = xArray[3] + 2;    yArray[3] = yArray[3] - 1;
                        break;
                }
            break;
    
            case 6 :
                switch (rotate){
                    case 1 : 
                        xArray[0] = xArray[0] - 1;    yArray[0] = yArray[0] + 0;
                        xArray[1] = xArray[1] - 2;    yArray[1] = yArray[1] + 1;
                        xArray[2] = xArray[2] + 1;    yArray[2] = yArray[2] + 0;
                        xArray[3] = xArray[3] + 0;    yArray[3] = yArray[3] + 1;
                        break;
    
                    case 2:
                        xArray[0] = xArray[0] + 1;    yArray[0] = yArray[0] + 0;
                        xArray[1] = xArray[1] + 2;    yArray[1] = yArray[1] - 1;
                        xArray[2] = xArray[2] - 1;    yArray[2] = yArray[2] + 0;
                        xArray[3] = xArray[3] + 0;    yArray[3] = yArray[3] - 1;
                        break;
    
                    case 3:
                        xArray[0] = xArray[0] - 1;    yArray[0] = yArray[0] + 0;
                        xArray[1] = xArray[1] - 2;    yArray[1] = yArray[1] + 1;
                        xArray[2] = xArray[2] + 1;    yArray[2] = yArray[2] + 0;
                        xArray[3] = xArray[3] - 0;    yArray[3] = yArray[3] + 1;
                        break;
    
                    case 4:
                        xArray[0] = xArray[0] + 1;    yArray[0] = yArray[0] + 0;
                        xArray[1] = xArray[1] + 2;    yArray[1] = yArray[1] - 1;
                        xArray[2] = xArray[2] - 1;    yArray[2] = yArray[2] - 0;
                        xArray[3] = xArray[3] + 0;    yArray[3] = yArray[3] - 1;
                        break;
                }
            break;
    
            case 7 :
                switch (rotate){
                    case 1 : 
                        xArray[0] = xArray[0] - 0;    yArray[0] = yArray[0] + 0;
                        xArray[1] = xArray[1] - 0;    yArray[1] = yArray[1] + 0;
                        xArray[2] = xArray[2] + 0;    yArray[2] = yArray[2] + 0;
                        xArray[3] = xArray[3] + 0;    yArray[3] = yArray[3] + 0;
                        break;
    
                    case 2:
                        xArray[0] = xArray[0] - 0;    yArray[0] = yArray[0] + 0;
                        xArray[1] = xArray[1] - 0;    yArray[1] = yArray[1] + 0;
                        xArray[2] = xArray[2] + 0;    yArray[2] = yArray[2] + 0;
                        xArray[3] = xArray[3] + 0;    yArray[3] = yArray[3] + 0;
                        break;
    
                    case 3:
                        xArray[0] = xArray[0] - 0;    yArray[0] = yArray[0] + 0;
                        xArray[1] = xArray[1] - 0;    yArray[1] = yArray[1] + 0;
                        xArray[2] = xArray[2] + 0;    yArray[2] = yArray[2] + 0;
                        xArray[3] = xArray[3] + 0;    yArray[3] = yArray[3] + 0;
                        break;
    
                    case 4:
                        xArray[0] = xArray[0] - 0;    yArray[0] = yArray[0] + 0;
                        xArray[1] = xArray[1] - 0;    yArray[1] = yArray[1] + 0;
                        xArray[2] = xArray[2] + 0;    yArray[2] = yArray[2] + 0;
                        xArray[3] = xArray[3] + 0;    yArray[3] = yArray[3] + 0;
                        break;
                }
            break;
        }
    
    
    }
    
    function moveCheck(key){
        //블럭끼리 닿을때
        var stopY = new Array();
        var stopX = new Array();
        var count = 0;
    
        $(".stop").each(function(){
            stopY[count] = $(this).parent().index();
            stopX[count] = $(this).index();    
            count++;
        });
    
        for(var i in stopY){
    
            for(var k in yArray){
    
                //← 눌렀을때
                if(key == 37){
                    if(stopY[i] == yArray[k]){
                        if(stopX[i] == (xArray[k]-1)){
                            moveState = false;
                        }
                    }
                }
    
    
                //→ 눌렀을때
                if(key == 39){
                    if(stopY[i] == yArray[k]){
                        if((stopX[i]-1) == xArray[k]){
                            moveState = false;
                        }
                    }
                }
    
                //↓ 눌렀을때
                if(key == 40){
                    if((stopY[i]-1) == yArray[k]){
                        if(stopX[i] == xArray[k]){
                            $(".on").addClass("stop");
                            $(".on").addClass("stop_" + random);
                            $(".on").removeClass("on");
                            $(".type" + random).removeClass("type" + random);
                            moveState = false;
                            makeBlock();
                            rotate = 0; //블럭 회전변수 초기화
                        }
                    }
                }
            }
        }
    
        //실제 블럭이 멈춰야되는 시점, 젤 아랫부분에 닿을때
        for(var i in yArray){
            if(yArray[i]==19 && key == 40){
                $(".on").addClass("stop");
                $(".on").addClass("stop_" + random);
                $(".on").removeClass("on");
                $(".type" + random).removeClass("type" + random);
    
                moveState = false;
                maxY = Math.min.apply(null, yArray);
                makeBlock();
                rotate = 0; //블럭 회전변수 초기화
            }
        }
    
        switch (key){
            case 39 : for(var i in xArray){ if(xArray[i]==9){ moveState = false; }}; break; //오른쪽끝
            case 37 : for(var i in xArray){ if(xArray[i]==0){ moveState = false; }}; break; //왼쪽끝
            case 40 : for(var i in yArray){ if(yArray[i]==19){ moveState = false; }}; break; //아래끝
        }
    }
    
    function removeBlock(){
        for(var i=0; i<20; i++){
            if($("#playArea tr:eq(" + i + ") .stop").length == 10){
    
                //블럭 한줄 삭제
    //            $("#playArea tr:eq(" + i + ") td").removeClass("stop");
                $("#playArea tr:eq(" + i + ")").remove();
                tr = $("<tr>").insertBefore("#playArea tr:first");
                for(var j=0; j<10; j++){
                    td = $("<td>").appendTo(tr).addClass("block");
                }
                //삭제 후 기존 블럭들 한줄 내리기
            }
        }
    }
    
    $(document).ready(function(){
        setting();
        InitBlock();
    });
    
    $(document).keydown(function(event){
        if(event.which == 37 || event.which == 38 || event.which == 39 || event.which == 40){
            moveBlock(event.which);
        }
    });
    
    </script>
    자바스크립트로 제작된 테트리스 게임입니다. &nbsp;&nbsp;방향키로 조작 가능합니다.
    <br>
 
<style>
        
/* 테트리스 */
#playArea   {width:340px;height:680px;border:1px solid #D0D0D0;background-color:#E9E9E9}
.block      {width:30px;height:30px;border:1px solid #E9E9E9;}
/*.on {background-color:black;opacity:0.3}*/
/*.stop {background-color:black;opacity:0.7}*/
 
.type1 {background-color:#BC5DED; border-width: 1px; border-style: solid; border-color: lightgray black black lightgray;}
.type2 {background-color:#5071DC; border-width: 1px; border-style: solid; border-color: lightgray black black lightgray;}
.type3 {background-color:#F0A003; border-width: 1px; border-style: solid; border-color: lightgray black black lightgray;}
.type4 {background-color:#62BEFF; border-width: 1px; border-style: solid; border-color: lightgray black black lightgray;}
.type5 {background-color:#ED4646; border-width: 1px; border-style: solid; border-color: lightgray black black lightgray;}
.type6 {background-color:#9BD374; border-width: 1px; border-style: solid; border-color: lightgray black black lightgray;}
.type7 {background-color:#FFD403; border-width: 1px; border-style: solid; border-color: lightgray black black lightgray;}
 
 
.stop_1 {background-color:#BC5DED; border-width: 1px; border-style: solid; border-color: lightgray black black lightgray;}
.stop_2 {background-color:#5071DC; border-width: 1px; border-style: solid; border-color: lightgray black black lightgray;}
.stop_3 {background-color:#F0A003; border-width: 1px; border-style: solid; border-color: lightgray black black lightgray;}
.stop_4 {background-color:#62BEFF; border-width: 1px; border-style: solid; border-color: lightgray black black lightgray;}
.stop_5 {background-color:#ED4646; border-width: 1px; border-style: solid; border-color: lightgray black black lightgray;}
.stop_6 {background-color:#9BD374; border-width: 1px; border-style: solid; border-color: lightgray black black lightgray;}
.stop_7 {background-color:#FFD403; border-width: 1px; border-style: solid; border-color: lightgray black black lightgray;}
 
 
</style>
<table cellpadding="0" cellspacing="0" border="0" id="playArea" align="center"></table>