javascript
자바스크립트 테트리스
joonsei
2020. 3. 17. 14:59
<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>
자바스크립트로 제작된 테트리스 게임입니다. 방향키로 조작 가능합니다.
<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>