반응형
HTML로 테트리스(Tetris) 게임 만들기
1. 모양 정하기
<Code>
var flag_ing = true; //현재 게임을 하고있는중인지 아닌지
//stack2D -> 쌓여있는 블럭
var stack2D = [
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0]
]
//block2D -> 내려오는 블럭
var block2D = [
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0]
]
//scrin2D -> block2D + stack2D
var scrin2D = [
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0],
[0,0,0,0,0, 0,0,0,0,0]
]
var block = {
'type' : parseInt((Math.random()*7)+1), //type -> 모양
'status' : 1, //status -> 상태(변할 수 있는 모양의 상태)
'i' : 1,
'j' : 4
}
function myclick(key){
var bak_type = block.type;
var bak_status = block.status;
var bak_i = block.i;
var bak_j = block.j;
var flag_down = false;
if(key == "ArrowRight"){ //방향키 오른쪽
block.j++;
}
if(key == "ArrowLeft"){ //방향키 왼쬑
block.j--;
}
if(key == "ArrowUp"){ //방향키 위버튼
changeStatus();
}
if(key == "ArrowDown"){ //방향키 아래
block.i++;
flag_down = true;
}
var flag_collision_bottom = false; //바닥하고 부딪혔을때
try {
setBlock2D();
} catch (e) {
flag_collision_bottom = true;
}
var flag_collision = isCollision(); //충돌된지 안된지
/*console.log("flag_collision:"+flag_collision);
console.log("flag_collision_bottom:"+flag_collision_bottom);*/
if(flag_collision_bottom || flag_collision ){ //충돌이 난경우
block.type = bak_type;
block.status = bak_status;
block.i = bak_i;
block.j = bak_j;
setBlock2D();
if(flag_down){
moveBlock2D();
clear10();
checklose();
block.type = parseInt((Math.random()*7)+1);
block.stauts = 1;
block.i = 1;
block.j = 4;
setBlock2D(); //위에서 바꿔주고 다시 원복
}
}
setScrin2DFromSB();
myrender();
}
function checklose(){ //졌을때 체크
if( stack2D[4][0] >0 ||
stack2D[4][1] >0 ||
stack2D[4][2] >0 ||
stack2D[4][3] >0 ||
stack2D[4][4] >0 ||
stack2D[4][5] >0 ||
stack2D[4][6] >0 ||
stack2D[4][7] >0 ||
stack2D[4][8] >0 ||
stack2D[4][9] >0
){
alert("u lose");
flag_ing = false;
}
}
function changeStatus(){ //상태 변화함수
if(block.type == 2 || block.type == 3 || block.type == 4){ //모양이 바뀌는부분 위로가기 버튼 누르면 모양 변함
if(block.status == 1){
block.status =2;
}else if(block.status ==2){
block.status = 1;
}
}
if(block.type == 5 || block.type == 6 || block.type == 7){
if(block.status ==1){
block.status =2;
}else if(block.status == 2){
block.status =3;
}else if(block.status == 3){
block.status =4;
}else if(block.status == 4){
block.status =1;
}
}
}
function setScrin2DFromSB(){
for(var i=0; i<scrin2D.length; i++){ //scrin2D를 0으로 비워준다 block2D는 셋팅되었고 scrin2D를 바꿔준다
for(var j=0; j<scrin2D[i].length; j++){
scrin2D[i][j] = 0
}
}
for(var i=0;i<block2D.length;i++){
for(var j=0;j<block2D.length;j++){
if(block2D[i][j] > 0){
scrin2D[i][j] = block2D[i][j];
}
}
}
for(var i=0;i<stack2D.length;i++){
for(var j=0;j<stack2D.length;j++){
if(stack2D[i][j] >0){
scrin2D[i][j] = stack2D[i][j];
}
}
}
}
function setBlock2D(){
for(var i=0; i<block2D.length; i++){ //block2D를 0으로 왜? 번지잖아
for(var j=0; j<block2D[i].length; j++){
block2D[i][j] = 0;
}
}
if(block.type == 1){
block2D[block.i ][block.j ] = block.type;
block2D[block.i ][block.j+1 ] = block.type;
block2D[block.i+1 ][block.j ] = block.type;
block2D[block.i+1 ][block.j+1 ] = block.type;
}
if(block.type == 2){
if(block.status == 1){
block2D[block.i ][block.j ] = block.type;
block2D[block.i-1 ][block.j ] = block.type;
block2D[block.i+1 ][block.j ] = block.type;
block2D[block.i+2 ][block.j ] = block.type;
}else if(block.status == 2){
block2D[block.i ][block.j ] = block.type;
block2D[block.i ][block.j-2 ] = block.type;
block2D[block.i ][block.j-1 ] = block.type;
block2D[block.i ][block.j+1 ] = block.type;
}
}
if(block.type == 3){
if(block.status == 1){
block2D[block.i ][block.j ] = block.type;
block2D[block.i-1 ][block.j ] = block.type;
block2D[block.i ][block.j+1 ] = block.type;
block2D[block.i+1 ][block.j+1 ] = block.type;
}else if(block.status == 2){
block2D[block.i ][block.j ] = block.type;
block2D[block.i ][block.j+1 ] = block.type;
block2D[block.i+1 ][block.j ] = block.type;
block2D[block.i+1 ][block.j-1 ] = block.type;
}
}
if(block.type == 4){
if(block.status == 1){
block2D[block.i ][block.j ] = block.type;
block2D[block.i ][block.j+1 ] = block.type;
block2D[block.i-1 ][block.j+1 ] = block.type;
block2D[block.i+1 ][block.j ] = block.type;
}else if(block.status == 2){
block2D[block.i ][block.j ] = block.type;
block2D[block.i ][block.j-1 ] = block.type;
block2D[block.i+1 ][block.j ] = block.type;
block2D[block.i+1 ][block.j+1 ] = block.type;
}
}
if(block.type == 5){
if(block.status == 1){
block2D[block.i ][block.j ] = block.type;
block2D[block.i-1 ][block.j-1 ] = block.type;
block2D[block.i ][block.j-1 ] = block.type;
block2D[block.i ][block.j+1 ] = block.type;
}else if(block.status == 2){
block2D[block.i ][block.j ] = block.type;
block2D[block.i-1 ][block.j ] = block.type;
block2D[block.i-1 ][block.j+1 ] = block.type;
block2D[block.i+1 ][block.j ] = block.type;
}else if(block.status == 3){
block2D[block.i ][block.j ] = block.type;
block2D[block.i ][block.j-1 ] = block.type;
block2D[block.i ][block.j+1 ] = block.type;
block2D[block.i+1 ][block.j+1 ] = block.type;
}else if(block.status == 4){
block2D[block.i ][block.j ] = block.type;
block2D[block.i-1 ][block.j ] = block.type;
block2D[block.i+1 ][block.j ] = block.type;
block2D[block.i+1 ][block.j-1 ] = block.type;
}
}
if(block.type == 6){
if(block.status == 1){
block2D[block.i ][block.j ] = block.type;
block2D[block.i ][block.j-1 ] = block.type;
block2D[block.i-1 ][block.j+1 ] = block.type;
block2D[block.i ][block.j+1 ] = block.type;
}else if(block.status == 2){
block2D[block.i ][block.j ] = block.type;
block2D[block.i-1 ][block.j ] = block.type;
block2D[block.i+1 ][block.j ] = block.type;
block2D[block.i+1 ][block.j+1 ] = block.type;
}else if(block.status == 3){
block2D[block.i ][block.j ] = block.type;
block2D[block.i ][block.j-1 ] = block.type;
block2D[block.i ][block.j+1 ] = block.type;
block2D[block.i+1 ][block.j-1 ] = block.type;
}else if(block.status == 4){
block2D[block.i ][block.j ] = block.type;
block2D[block.i-1 ][block.j-1 ] = block.type;
block2D[block.i-1 ][block.j ] = block.type;
block2D[block.i+1 ][block.j ] = block.type;
}
}
if(block.type == 7){
if(block.status == 1){
block2D[block.i ][block.j ] = block.type;
block2D[block.i ][block.j-1 ] = block.type;
block2D[block.i-1 ][block.j ] = block.type;
block2D[block.i ][block.j+1 ] = block.type;
}else if(block.status == 2){
block2D[block.i ][block.j ] = block.type;
block2D[block.i-1 ][block.j ] = block.type;
block2D[block.i ][block.j+1 ] = block.type;
block2D[block.i+1 ][block.j ] = block.type;
}else if(block.status == 3){
block2D[block.i ][block.j ] = block.type;
block2D[block.i ][block.j-1 ] = block.type;
block2D[block.i ][block.j+1 ] = block.type;
block2D[block.i+1 ][block.j ] = block.type;
}else if(block.status == 4){
block2D[block.i ][block.j ] = block.type;
block2D[block.i-1 ][block.j ] = block.type;
block2D[block.i ][block.j-1 ] = block.type;
block2D[block.i+1 ][block.j ] = block.type;
}
}
}
- 시작화면
- 이겼을 때 화면
반응형
'나도 개발자다 > HTML' 카테고리의 다른 글
| 토글스위치 (Toggle) 만들기 (0) | 2021.06.18 |
|---|
댓글