본문 바로가기
자바스크립트와 캔버스

자바스크립트와 캔버스, 5번째 시간. 테트리스를 만들어봐-1

Cray Fall 2019. 9. 23. 12:59

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

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

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

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

◐ 5. 자바스크립트와 캔버스, 5번째 시간. 테트리스를 만들어봐-1 ◑

이번 시간에는 많은 분들이 잘 알고계신 "테트리스" 게임를 만들어볼텐데요
단순해 보이지만, 생각할 부분들이 매우 많습니다.

너무 기초부터 시작하면 설명드릴 내용이 어마어마하게 많기 때문에,
기본적인 HTML 태그와 자바스크립트 문법 정도는 아신다는 선에서 출발합니다 :)​

테트리스 게임의 변형은 매우 많지만 초창기 테트리스 게임은 20x10의 칸이 기본입니다.

20x10의 칸에서 5가지 종류의 블럭을 이용해서 퍼즐을 맞추고,
맞춰진 줄은 사라지는 형태로 가져갈텐데요.
원래는 7가지 블럭인데, 처음에는 5가지로 가져갔다가 7개로 늘어날 겁니다 :)​

우선 임시 버전을 직접 플레이해보실까요?
키보드로 조작해야 해서 현재는 PC전용입니다.

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

 

캔바스. 테트리스

 

dreamplan7.cafe24.com

속도가 매우 느리지만, 일부러 플레이를 쉽게 한겁니다 :)
속도는 어마어마하게 빨라질 수 있지요 ㅎㅎ

아래 기본 소스부터 시작합니다. 캔버스 관련된 소스는 거의 이 기본소스에서 출발합니다.

<!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;

// 초기화
function Init()
{
	if(init==false)
	{
		myCanvas=document.getElementById("MyCanvas");
		Context=myCanvas.getContext("2d");		
		init=true;
	}

}


function Run()
{
	onDraw();
}

// draw 이벤트
function onDraw()
{
	if(init==false)return;
	// 전체 테두리
	Context.strokeStyle="#000";
	Context.lineWidth=1;
	Context.strokeRect(0, 0, myCanvas.width-1, myCanvas.height-1);
}

$(document).ready(function(){
	Init();
	setInterval(Run, 100);
});

</script>

<canvas id="MyCanvas" width=800 height=600>
Canvas is not supported.
</canvas>
</body>
</html>

우선 이번 시간에는 캔바스에 10x20의 블럭상자에 들어있는 블럭을 표시할텐데요.
이 블럭상자를 표현하려면 자바스크립트에서 2차원 배열을 선언해야 합니다.​

2차원 배열을 선언하려면 간단합니다.
우선 1차원 배열을 아래와 같이 선언하고,

var tetrix_blockbox=new Array();

다른 배열을 push 해서 넣으면 됩니다 :)

tetrix_blockbox.push(new Array(10));

위 단계를 for 반복문으로 20번 실행해주면 20x10열의 배열이 생성이 되지요.

	for(i=0;i<20;++i)
	{
		tetrix_blockbox.push(new Array(10));
	}

배열에 값을 넣거나 꺼내쓸때는 어떻게 해야 할까요?
아주 간단합니다. 배열의 순번을 참조해서 다음과 같이 쓰면 됩니다.
i가 20행, j가 10열을 의미하지요.

tetrix_blockbox[i][j] = 0;
result = tetrix_blockbox[i][j]

각 요소를 모두 0으로 채워주기 위해 함수를 하나 정의합니다.
이 함수는 tetrix_blockbox 블럭상자를 20행 10열로 선언하면서
모든 요소를 0으로 초기화합니다.

var tetrix_blockbox;

// 테트리스 블럭박스 초기화
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;
	}
}

지난 시간에 다루었던 Init() 함수에 이 함수를 호출하여 초기화해주는 부분을 넣고
5행 5열의 블럭하나만 샘플로 값을 1로 세팅해줍니다.

// 초기화
function Init()
{
	if(init==false)
	{
		myCanvas=document.getElementById("MyCanvas");
		Context=myCanvas.getContext("2d");		
		tetrix_blockbox_init();	// 블럭상자 초기화
		tetrix_blockbox[5][5]=1;
		init=true;
	}
}

그리고 onDraw 함수에서는 실제 20행 10열을 그려주는 부분을 다룰텐데요.
우선 화면에 그릴 블럭상자의 크기, 블럭상자의 시작 좌표를 정의해주어야 합니다.
블럭 한개를 25픽셀 간격으로 하고 시작좌표를 (50, 280) 정도로 하기 위해 아래 변수를 정의합니다.

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

그리고 Draw 함수 내에 20행 10열의 반복문을 구성합니다.

	// 블럭 표시
	for(i=0;i<20;++i)
		for(j=0;j<10;++j)
		{

		}

이어서 반복문 내에서 현재 블럭의 값이 0이면 회색으로 0이 아니면 녹색으로 화면에 사각형을 색칠하는 것이지요.

			if(tetrix_blockbox[i][j]==0)
				Context.fillStyle="#ccc";
			else
				Context.fillStyle="green";
			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);

이렇게 구성된 전체 소스는 아래와 같습니다.

<!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 tetrix_blockbox_boxsize=25;
var tetrix_blockbox_top=50;
var tetrix_blockbox_left=280;

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

// 테트리스 블럭박스 초기화
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;
	}
}

// 초기화
function Init()
{
	if(init==false)
	{
		myCanvas=document.getElementById("MyCanvas");
		Context=myCanvas.getContext("2d");		
		init=true;
		tetrix_blockbox_init();	// 블럭상자 초기화
		tetrix_blockbox[5][5]=1;
	}
}


function Run()
{
	onDraw();
}

// draw 이벤트
function onDraw()
{
	if(init==false)return;
	// 전체 테두리
	Context.strokeStyle="#000";
	Context.lineWidth=1;
	Context.strokeRect(0, 0, myCanvas.width-1, myCanvas.height-1);
	// 블럭 표시
	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";
			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);
		}
}

$(document).ready(function(){
	Init();
	setInterval(Run, 100);
});

</script>

<canvas id="MyCanvas" width=800 height=600>
Canvas is not supported.
</canvas>
테트리스 블럭상자 정의 및 블럭 1개가 치워진 상태 표시
<span id=debug></span>
</body>
</html>

아래와 같은 화면이 보일텐데요.
우선 블럭상자와 들어있는 1개의 블럭만 녹색으로 표시되었습니다.

소스에 아래와 같은 부분이 있는데요.

tetrix_blockbox[5][5]=1;

다른 행과 열의 값을 더 추가해주면 더 많은 블럭을 보실 수 있지요 :)

		tetrix_blockbox[6][4]=1;
		tetrix_blockbox[7][3]=1;
		tetrix_blockbox[9][7]=1;

오늘은 고정된 위치에 색칠만 해서 보여주는 예제소스인데요.
이 것을 이제 작동하게 할 겁니다.
그럼 다음 시간에 보실까요?

수고하셨습니다~

 

다음 강좌로 넥스트~ ( Next ) / https://itadventure.tistory.com/139

 

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

1. HTML 표준 CANVAS 기술 소개 / https://itadventure.tistory.com/130 2. 자바스크립트와 CANVAS 두번째시간. 캔바스에 눈을 내리자 / https://itadventure.tistory.com/131 3. 자바스크립트와 캔버스 3번째 시..

itadventure.tistory.com

 

저작자표시 비영리 변경금지

'자바스크립트와 캔버스' 카테고리의 다른 글

자바스크립트와 캔버스 7, 테트리스를 만들어봐-3  (0) 2019.09.25
자바스크립트와 캔버스 6, 테트리스를 만들어봐-2  (8) 2019.09.24
자바스크립트와 캔바스 4번째 시간. 마우스의 파동을 느껴봐!  (2) 2019.09.21
자바스크립트와 캔버스 3번째 시간, 공튀기기 놀이  (4) 2019.09.21
자바스크립트와 CANVAS 두번째시간. 캔바스에 눈을 내리자  (0) 2019.09.21

'자바스크립트와 캔버스' Related Articles

티스토리툴바