자바스크립트와 캔버스 10, 테트리스를 만들어봐-6

1. HTML 표준 CANVAS 기술 소개 / https://itadventure.tistory.com/130

2. 자바스크립트와 CANVAS 두번째시간. 캔바스에 눈을 내리자 / https://itadventure.tistory.com/131

3. 자바스크립트와 캔버스 3번째 시간, 공튀기기 놀이 / https://itadventure.tistory.com/132

4. 자바스크립트와 캔버스 4번째 시간, 마우스의 파동을 느껴봐! | https://itadventure.tistory.com/133

5. 자바스크립트와 캔버스, 테트리스를 만들어봐-1 | https://itadventure.tistory.com/136

6. 자바스크립트와 캔버스, 테트리스를 만들어봐-2 | https://itadventure.tistory.com/139

7. 자바스크립트와 캔버스, 테트리스를 만들어봐-3 | https://itadventure.tistory.com/142

8. 자바스크립트와 캔버스, 테트리스를 만들어봐-4 | https://itadventure.tistory.com/146

9. 자바스크립트와 캔버스, 테트리스를 만들어봐-5 | https://itadventure.tistory.com/148

◐ 10. 자바스크립트와 캔버스, 테트리스를 만들어봐-6 ◑

---

테트리스 게임의 최종버전 전단계입니다 :)

http://dreamplan7.cafe24.com/canvas/cray13.php

캔바스. 테트리스

크레이는 레벨 8에 897점 정도이지만
순발력 좋은 여러분들은 더욱 높은 성적도 거두실 수도 있지 않을까요? ㅎㅎ

오늘 여기까지 진도가 나갈건 아니구요 :)
앞으로 2강 정도 더 나가면 진도가 모두 진행될 것 같습니다.​

오늘은 현재 블럭조각이 5가지였던 부분을 2가지를 더 늘려서 7가지로,
그리고 레벨이 오를때 난이도가 점점 높아지는 부분과,

그리고 게임이 끝나면 '게임오버 - GAME OVER' 처리가 되도록 하는 부분까지 진행됩니다
소스가 꽤 많이 바뀌었기 때문에 각 부분에 대해 흝어내려가듯 설명드리는 방식으로 진행하겠습니다.

그럼 하나씩 살펴볼까요? :)

---

먼저 게임중과 게임오버라는 상태를 알아야 하기 때문에
이 변수를 담을 전역변수를 하나 선언해야 합니다.

var Mode=1; // 1=게임중, 2=게임오버

아울러 2개의 상수를 선언할텐데요.

상수는 const 선언문으로 선언해줍니다.

상수란 변하지 않는 수이기 때문에 다른 값을 대입해줄 수 없고,

다만 Mode 라는 전역 변수에 값을 대입하거나 비교할 목적으로만 사용됩니다.

그냥 직접 Mode 변수에 1, 2 를 넣는 방법도 있지만, 이렇게 함으로써 나중에 봐도 잘 기억날테고

다른 사람이 보더라도 직관적으로 무엇을 의미하는지 알 수 있게 되지요.

const MODE_GAME=1;
const MODE_GAMEOVER=2;

그리고 Run 함수에 이 부분이 추가됩니다.

블록을 한칸씩 내리기에 앞서 CheckConflict() 함수로 충돌여부를 검사하는데요.

이 때 이미 충돌해 있으면 더 내려갈 곳이 없는 상황입니다.

그렇다면 사실상 게임이 끝난 것이지요.

그럴 경우 Mode 값을 게임오버 상태로 바꿉니다.

function Run()
{
	// 블럭을 떨어뜨리지도 않았는데 충돌해 있으면
	// 게임오버
	if(CheckConflict()) 
		Mode=MODE_GAMEOVER;
          :

이어서 진행되는 블럭을 한칸 내리고, 10줄이 꽉차면 지우고 이런 부분은 게임중일 때만 처리해야지 게임오버 상태에서는 더 이상 처리할 수 없지요.

이 후 처리 부분을 모두 게임중일 경우에만 처리하도록 수정합니다.

        :
	if(Mode==MODE_GAME)
	{	
           :
    }

    // 그리기 이벤트
	onDraw();
}

게임중일 때와 게임오버일 때는 여러가지 이벤트상황에서의 처리가 달라집니다.

우선 키보드 상하좌우 키로 입력하는 부분은 게임중일 때만 작동되야 할텐데요.

아래와 같이 if문으로 Mode 값이 게임중일 때만 작동되도록 처리를 제한해 줍니다.

// 키입력
function onKeyDown(event)
{
	// 게임중일 때만 이동 회전키가 작동
	if(Mode==MODE_GAME)
	{
		if(event.which==37)	// 왼쪽키
		{
			tetrix_block_x--;
			if(CheckConflict())tetrix_block_x++;
			else onDraw();
		}
           :
	}
}

그리고 Draw 이벤트에서도 게임이 끝난 경우 Game Over 표시를 해주는 부분이 추가되었습니다.

// draw 이벤트
function onDraw()
{
           :
    if(Mode==MODE_GAMEOVER)
	{
		Context.fillStyle="red";
		Context.fillText("GAME OVER", tetrix_blockbox_left + 40, tetrix_blockbox_top + 250);
	}
}

게임이 끝난 다음 다시 시작하려면 어떻게 해야 할 까요?

Enter 키를 누르면 다시 시작하도록 합시다.

​

그렇다면 onKeyDown(event) 함수에 이 부분을 추가해주면 되는데요.

게임오버일 때만 작동되도록 해주면 됩니다.

// 키입력
function onKeyDown(event)
{
             :
	// 게임오버일 때 재시작 단축키는 Enter 키
	else if(Mode==MODE_GAMEOVER)
	{
		if(event.which==13)	// Enter 키를 누르면
		{
			// 게임 재시작
			         :
		}
	}
}

"게임 재시작"이라고 써진 부분에 재시작할 수 있는 코드를 넣어야 할 텐데요.

어떤 부분들을 초기화해주면 다시 게임이 처음부터 다시 시작될까요?

이를 테면 블럭조각같은 경우는 다시 초기화해줄 필요는 없습니다.

​

초기화해줄 부분을 한번 점검해봅시다.

첫째. 블럭상자를 초기화해줍니다.

둘째, 그리고 새로운 블럭조각을 위쪽에 하나 만들어 놓습니다

셋째, 점수를 0점으로 바꾸어 주고요.

네번째는, Mode 변수를 다시 MODE_GAME 으로 바꾸어 게임중으로 변경해 줍니다.

​

뭐 이 정도면

블럭상자를 초기화해주고 블럭을 새로 생성 및 점수를 0점으로 바꾸고

Mode 변수를 MODE_GAME 으로 바꾸어 줍니다.

그러면 그 이후 알아서 다시 게임이 처음부터 시작되지요 :)

			// 게임 재시작
			tetrix_blockbox_init();	// 블럭상자 초기화
			tetrix_block_number=Math.floor(Math.random()*6.9);
			tetrix_block_this = tetrix_block[tetrix_block_number].slice();
			score=0;
			Mode=MODE_GAME;

다음으로 블록 조각이 2가지 추가되었는데요.

블록조각 추가는 아주 간단합니다.

tetrix_block_init() 함수에 추가할 블럭의 모양을 추가해주면 됩니다.

추가되는 코드는 아래와 같은데, 별 희안한 모양을 넣길 원하시면 언제든지 넣어주시면 됩니다 :)

// 5가지 블럭 초기화
function tetrix_block_init()
{
	tetrix_block=new Array();
          :

	// 여섯번째 블럭
	// □□□
	// □
	tmp=new Array();
	tmp.push(0,0); tmp.push(0,1); tmp.push(0,2); tmp.push(1,0);
	tetrix_block.push(tmp);

	// 일곱째 블럭
	// □□□
	//   □
	tmp=new Array();
	tmp.push(0,0); tmp.push(0,1); tmp.push(0,2); tmp.push(1,2);
	tetrix_block.push(tmp);
}

이번의 키포인트 중 하나는 또한 레벨링입니다.

블럭을 쌓을수록 exp(경험치)가 증가하고

경험치가 증가하면 레벨이 오릅니다.

레벨이 오르면 블럭이 떨어지는 속도 또한 빨라지지요.

​

경험치, 레벨, 떨어지는 속도를 위해 전역변수를 선언합니다.

var RunEvent;
var RunEventTime = 500;
var level=1;
var exp=0;

전역변수가 3개일줄 알았는데 4개이지요? RunEvent 는 타이머 이벤트 핸들러라고 해서,

시간이 지날때마다 호출하는 Run 함수를 제어하는 자동차의 핸들 같은 겁니다 :)

​

setInterval 함수를 실행해주는 부분을 약간 바꿔봅시다

$(document).ready(function(){
	Init();
	RunEvent = setInterval(Run, RunEventTime);
});

RunEvent 에 setInterval 의 결과를 대입해주는 건데,

이렇게 RunEvent 에 담아두면 필요할 때 자동 호출되는 부분을

정지할 수도 해제할 수도 있습니다.

​

여기서는 떨어지는 속도를 더 빠르게 할 목적으로 임시로 담아두는 것이지요 :)

​

이제 경험치와 레벨이 올라가는 부분을 살펴볼까요?

경험치가 올라가는 조건은 아주 단순화하였습니다.

그냥 한줄을 쌓을때 점수가 10점이 올라가면서 경험치도 1 올라갑니다.

         :
				// 합계가 10이면 꽉찬 것
				if(sum==10)
				{
					// 위의 내용을 아래로 복사해준다.
					for(k=i;k>0;--k)
						for(j=0;j<10;++j)
							tetrix_blockbox[k][j]=tetrix_blockbox[k-1][j];
					score+=10;

					// 난이도 레벨을 증가시키기 위해 경험치 증가
					exp++;

그러다가 경험치가 10이 되면 레벨이 1단계 올라가는 것이지요.

					if(exp>=10){
						level++; exp=0;

레벨이 올라갈 때는 그냥 숫자만 올라가는 것이 아닙니다.

바로 하강 속도가 빨라지는데요.

처음에 설정값이 500이었던 RunEventTime 값이 레벨이 올라갈 때마다 50씩 줄어듭니다.

						RunEventTime-=50;

그리고 RunEvent 의 작동을 중지합니다.

간단히 Run 함수 호출을 계속하던 것을 중지하는 것이지요.

						clearInterval(RunEvent);

왜 중지할까요? 그건 바로 속도를 재지정해서 다시 작동해주기 위함입니다 :)

이렇게 되면 0.5초마다 한번씩 호출하던 Run 함수가 레벨이 한단계 오르면,

0.45초마다 한번씩 호출, 0.4초마다 한번씩 호출, .., 나중에는 엄청나게 짧은 주기로 호출하게 됩니다. 실제 레벨 8 정도 가면 속도를 감당할 수가 없지요 :)

						RunEvent = setInterval(Run, RunEventTime);

전체적으로 설명드리고 싶지만, 너무 길어질 것 같아서,

약간은 날림으로 진행되었군요 ㅎㅎ

전체 소스 보시면서 이해가 필요하신 분은 질문해주시면 최대한 답변드리겠습니다 :)

​

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>캔바스. 테트리스</title>
</head>
<body>
https://blog.naver.com/ephraimdrlee 
/ 크레이의 세컨드라이프 탐구생활 네이버 블로그<br/>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
// 기본 초기화
var init=false;
var myCanvas;
var Context;

var Mode=1; // 1=게임중, 2=게임오버
const MODE_GAME=1;
const MODE_GAMEOVER=2;

var tetrix_blockbox_boxsize=25;
var tetrix_blockbox_top=50;
var tetrix_blockbox_left=280;

// tetrix_blockbox[row][col]; 20행 10열
var tetrix_blockbox;

var score;

var RunEvent;
var RunEventTime = 500;
var level=1;
var exp=0;

// 테트리스 블럭박스 초기화
function tetrix_blockbox_init()
{
	// 20행 10열의 박스 생성
	tetrix_blockbox=new Array();
	for(i=0;i<20;++i)
	{
		tetrix_blockbox.push(new Array(10));
		// 모두 0으로 채운다
		for(j=0;j<10;++j)tetrix_blockbox[i][j]=0;
	}
}

// 5가지 타입 블록
var tetrix_block;

// 현재 사용중인 블록
var tetrix_block_this;

// 5가지 블럭 초기화
function tetrix_block_init()
{
	tetrix_block=new Array();

	// 첫번째 블럭
	// □□□□
	tmp=new Array();
	tmp.push(0,0); tmp.push(0,1); tmp.push(0,2); tmp.push(0,3);
	tetrix_block.push(tmp);

	// 두번째 블럭
	// □□□
	//  □
	tmp=new Array();
	tmp.push(0,0); tmp.push(0,1); tmp.push(0,2); tmp.push(1,1);
	tetrix_block.push(tmp);

	// 세번째 블럭
	// □□
	//  □□
	tmp=new Array();
	tmp.push(0,0); tmp.push(0,1); tmp.push(1,1); tmp.push(1,2);
	tetrix_block.push(tmp);

	// 네번째 블럭
	//  □□
	// □□
	tmp=new Array();
	tmp.push(0,1); tmp.push(0,2); tmp.push(1,0); tmp.push(1,1);
	tetrix_block.push(tmp);

	// 다섯번째 블럭
	// □□
	// □□
	tmp=new Array();
	tmp.push(0,0); tmp.push(0,1); tmp.push(1,0); tmp.push(1,1);
	tetrix_block.push(tmp);

	// 여섯번째 블럭
	// □□□
	// □
	tmp=new Array();
	tmp.push(0,0); tmp.push(0,1); tmp.push(0,2); tmp.push(1,0);
	tetrix_block.push(tmp);

	// 일곱째 블럭
	// □□□
	//   □
	tmp=new Array();
	tmp.push(0,0); tmp.push(0,1); tmp.push(0,2); tmp.push(1,2);
	tetrix_block.push(tmp);
}

// 현재 떨어지는 블록번호와 좌표
var tetrix_block_number=1;
var tetrix_block_x=3;
var tetrix_block_y=0;

// 초기화
function Init()
{
	if(init==false)
	{
		myCanvas=document.getElementById("MyCanvas");
		Context=myCanvas.getContext("2d");		
		tetrix_block_init();	// 5가지 블럭 모양 초기화
		tetrix_blockbox_init();	// 블럭상자 초기화
		tetrix_block_number=Math.floor(Math.random()*6.9);
		tetrix_block_this = tetrix_block[tetrix_block_number].slice();
		score=0;
		init=true;
	}
}

function CheckConflict()
{
	var size=tetrix_block_this.length;
	for(k=0;k<size;k+=2)
	{
		check_y = tetrix_block_y + tetrix_block_this[k];
		check_x = tetrix_block_x + tetrix_block_this[k+1];
		if(check_y < 0 )continue;	// y좌표가 0보다 적은 사각형은 중돌 검사를 안함
		// 겹치는 경우
		if(check_x < 0 || check_x >=10 || check_y >= 20 || tetrix_blockbox[check_y][check_x]!=0)return true;
	}
	return false;
}

function Run()
{
	// 블럭을 떨어뜨리지도 않았는데 충돌해 있으면
	// 게임오버
	if(CheckConflict()) 
		Mode=MODE_GAMEOVER;

	if(Mode==MODE_GAME)
	{	
		// 블럭을 한칸 떨어뜨리고
		tetrix_block_y++;

		// 겹침검사	
		if(CheckConflict())
		{
			// 다시 위로 이동시킨 다음
			tetrix_block_y--;
			var size=tetrix_block_this.length;
			// 블럭을 블럭판에 박는다
			for(k=0;k<size;k+=2)
			{
				check_y = tetrix_block_y + tetrix_block_this[k];
				check_x = tetrix_block_x + tetrix_block_this[k+1];
				tetrix_blockbox[check_y][check_x]=1;
			}
			// 꽉참 줄 검사
			for(i=0;i<20;++i)
			{
				// 한줄 단위로 0이 아닌 블럭을 세서 
				sum=0;
				for(j=0;j<10;++j)
					if(tetrix_blockbox[i][j]!=0)
						sum++;

				// 합계가 10이면 꽉찬 것
				if(sum==10)
				{
					// 위의 내용을 아래로 복사해준다.
					for(k=i;k>0;--k)
						for(j=0;j<10;++j)
							tetrix_blockbox[k][j]=tetrix_blockbox[k-1][j];
					score+=10;

					// 난이도 레벨을 증가시키기 위해 경험치 증가
					exp++;
					if(exp>=10){
						level++; exp=0;
						RunEventTime-=50;
						clearInterval(RunEvent);
						RunEvent = setInterval(Run, RunEventTime);
					}

				}
			}

			// 블럭을 다시 제일 위로 생성시키고
			tetrix_block_y=0;
			tetrix_block_x=3;
			// 블럭번호도 바꿔 주자
			tetrix_block_number=Math.floor(Math.random()*6.9);
			tetrix_block_this=tetrix_block[tetrix_block_number].slice();

		}
	}

	// 그리기 이벤트
	onDraw();
}

function RotateBlock()
{
	switch(tetrix_block_number)
	{
		case 0: case 1: case 2: case 3: case 5: case 6:
			// 첫번째 블럭
			// □□□□
			// 두번째 블럭
			// □□□
			//  □
			// 세번째 블럭
			// □□
			//  □□
			// 네번째 블럭
			//  □□
			// □□
			centerY=0; centerX=1;	// ( 0, 1 ) 지점을 중심
			break;
		case 4:
			// 다섯번째 블럭
			// □□
			// □□
			return;
	}

	// 회전
	// x ← -y
	// y ← x
	// 이전 형태를 미리 기억
	tetrix_block_save = tetrix_block_this.slice();
	for(i=0;i<tetrix_block_this.length;i+=2)
	{
		y=tetrix_block_this[i+1] - centerX;
		x=-(tetrix_block_this[i] - centerY);
		tetrix_block_this[i]=y + centerY;
		tetrix_block_this[i+1]=x + centerX;
	}

	// 충돌인 경우 원상복귀
	if(CheckConflict())
		tetrix_block_this=tetrix_block_save.slice();
}
// 키입력
function onKeyDown(event)
{
	// 게임중일 때만 이동 회전키가 작동
	if(Mode==MODE_GAME)
	{

		if(event.which==37)	// 왼쪽키
		{
			tetrix_block_x--;
			if(CheckConflict())tetrix_block_x++;
			else onDraw();
		}
		if(event.which==39)	// 오른쪽키
		{
			tetrix_block_x++;
			if(CheckConflict())tetrix_block_x--;
			else onDraw();
		}
		if(event.which==40 || event.which==32)	// 아래쪽키, 스페이스키 
		{
			tetrix_block_y++;
			if(CheckConflict())tetrix_block_y--;
			else onDraw();
		}
		if(event.which==38)	// 위쪽키(회전)
		{
			RotateBlock();
			onDraw();
		}
	}
	// 게임오버일 때 재시작 단축키는 Enter 키
	else if(Mode==MODE_GAMEOVER)
	{
		if(event.which==13)	// Enter 키를 누르면
		{
			// 재시작
			tetrix_blockbox_init();	// 블럭상자 초기화
			tetrix_block_number=Math.floor(Math.random()*6.9);
			tetrix_block_this = tetrix_block[tetrix_block_number].slice();
			score=0;
			Mode=MODE_GAME;
		}
	}
}

// draw 이벤트
function onDraw()
{
	if(init==false)return;
	// 전체 테두리
	Context.strokeStyle="#000";
	Context.lineWidth=1;
	Context.strokeRect(0, 0, myCanvas.width-1, myCanvas.height-1);
	Context.fillStyle="#fcfcfc";
	Context.fillRect(1, 1, myCanvas.width-2, myCanvas.height-2);
	// 블럭 표시
	for(i=0;i<20;++i)
		for(j=0;j<10;++j)
		{
			if(tetrix_blockbox[i][j]==0)
				Context.fillStyle="#ccc";
			else
				Context.fillStyle="green";
			
			// 떨어지는 블럭표시
			var size=tetrix_block_this.length;
			for(k=0;k<size;k+=2)
			{
				if(tetrix_block_y+tetrix_block_this[k]==i
				   && tetrix_block_x+tetrix_block_this[k+1]==j)
					Context.fillStyle="blue"; 
			}

			x=tetrix_blockbox_left + j*tetrix_blockbox_boxsize;
			y=tetrix_blockbox_top + i*tetrix_blockbox_boxsize;
			Context.fillRect(x, y, tetrix_blockbox_boxsize-2, tetrix_blockbox_boxsize-2);
		}
	// 점수표시
	Context.font = "30px 나눔고딕";
	Context.fillStyle="#eee";
	Context.fillRect(10, 60, 250, 40);
	Context.fillRect(10, 120, 250, 40);
	Context.fillStyle="blue";
	Context.fillText("Score " + score, 50, 90);
	Context.fillText("Level " + level, 50, 150);

	if(Mode==MODE_GAMEOVER)
	{
		Context.fillStyle="red";
		Context.fillText("GAME OVER", tetrix_blockbox_left + 40, tetrix_blockbox_top + 250);
	}
}

$(document).ready(function(){
	Init();
	RunEvent = setInterval(Run, RunEventTime);
});

$(document).keydown(function( event ){
	onKeyDown(event);		
});

</script>

<canvas id="MyCanvas" width=800 height=600>
Canvas is not supported.
</canvas>
<br/>
블럭조각 2가지 추가<br/>
난이도가 점점 높아짐<br/>
게임오버 처리<br/>

<span id=debug></span>
</body>
</html>

금번 강좌의 실제 실행 주소는 아래와 같습니다 :)

http://dreamplan7.cafe24.com/canvas/cray11.php

캔바스. 테트리스

오늘 소스는 꽤 많은 부분이 진행되었습니다.
소스 내용을 이해하고자 하시는 분께서는 부분마다
반복해서 눈에 익혀두시길 권해드립니다.

도전하시는 모든 분들께서 성공하시길 바랍니다.

여기까지 읽어주셔서 감사합니다 :)

 

다음 강좌 보러가기 / https://itadventure.tistory.com/159

자바스크립트와 캔버스 11, 테트리스를 만들어봐-7