우찬쓰 개발블로그
자바스크립트로 웹 테트리스 만들기(1) 본문
벌써 테트리스를 만든지는 꽤 오래되었지만, 블로그에 테트리스 개발기를 써야지.. 써야지.. 하다가 오늘에야 마음먹고 쓰게되었습니다.
결론부터 말씀드리자면, 소스는 오픈소스로 공개되어있고, 출처만 밝히면 누구든지 소스를 참고할 수 있게 공개해 두었습니다.
누구든 이 테트리스 오픈소스에 참여할 수 있으니, PR 올려주세요~!
github.com/WoochanLee/BalanceTetris
WoochanLee/BalanceTetris
Tetris built with vanilla javascript. Contribute to WoochanLee/BalanceTetris development by creating an account on GitHub.
github.com
깃허브 호스팅을 이용하여 바로 플레이 해볼 수 있는 주소도 공유합니다. (바로 한번 해보세요!)
https://woochanlee.github.io/BalanceTetris/
Balance Tetris
Tetris built with vanilla javascript
woochanlee.github.io
본격적으로 시작하기에 앞서서, 블로그를 보시면 알겠지만 저는 안드로이드 개발자 입니다..
자바스크립트에 대해 이해력이 높은 상태로 개발한 것이 아니고, 테트리스를 위해 필요한 만큼만 공부하여 만든 것이라 코드가 단순합니다.
어쩌면 초보자 분들에게는 도움이 될 수도 있겠네요.
저의 본업 기술인 안드로이드 앱개발에만 충실한 것도 좋지만, 이것저것 사람들이 플레이 할 수 있는 것을 개발하는 것도 좋아했었고 아이디어가 떠오를때 가끔씩 게임도 만들고 했었는데, (이전에 만들었던 게임도 잠깐 공유합니다. 나중에 이것도 포스팅 할 예정)
play.google.com/store/apps/details?id=com.woody.spaceship
회피능력 테스트 - IQ 테스트 (스페이스 쉽) - Google Play 앱
스페이스 쉽에 오신것을 환영합니다! 당신은 비행사가 되어 우주를 비행하게 됩니다. 날아오는 소행성을 회피하고 파괴하면서 가장 멀리 비행하여 랭킹을 기록하여 보세요! 1분을 넘긴다면 당
play.google.com
최근에는 웹개발이 해보고 싶어서 간단히 만들어보다가 웹에 canvas라는 컴포넌트를 알게되고, 갑자기 테트리스를 만들고 싶다는 필이 꽂혀서 개발을 시작하게 되었습니다.
그리고 그것은 현재까지의 여정의 시작이었으니..
저의 성격상, 도전정신으로 어떠한 다른 소스나 로직을 참고하지 않았고,
어릴때 플레이하던 테트리스 기억에 의거하여 모든 부분은 직접 구현해보고 싶어서 생각의 흐름대로 개발하였습니다.
그래서 코드가 비효율적인 부분이 있을 수도 있고, 수정이 필요해 보이는 부분이 보이실 수도 있을텐데, 언제든 컨트리뷰팅 해주시면 좋을것 같네요!
(참고로 이것은 개발기이고, 강의가 아닙니다.. 전체 소스를 보고 싶으시면 위에 올려드린 깃허브 소스를 보시면 됩니다..)
이제 개발기를 본격적으로 시작해보겠습니다.
일단 간단히 생각해보면 테트리스의 기본은 블록이 쌓일 공간입니다.
인터넷에 검색을 해보니.. 보통 테트리스 게임의 블록의 칸은 대략 가로 10칸, 세로 25칸, 총 10x25로 이루어져 있네요.
그래서 이 부분을 일단 캔버스로 그려볼게요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="800" height="2000"></canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "gray";
const borderWidth = 5;
const blockSize = 30;
for (x = 0; x < 12; x++) {
for (y = 0; y < 24; y++) {
ctx.fillRect(
borderWidth * x + blockSize * x,
borderWidth * y + blockSize * y,
blockSize,
blockSize
);
}
}
</script>
</body>
</html>
각 블럭의 사이즈는 30px로 잡고, 이중 for문을 돌려서 Rect를 그려볼게요~
결과물을 볼까요?
깔끔한 테트리스 공간이 형성되었네요.
시작이 반이라고 하였으니 이미 개발의 절반은 끝났습니다(?)
이제 풍부한 상상력과 창의력을 불어넣어 봅시다.
2부에 계속..
'테트리스 개발기' 카테고리의 다른 글
| 자바스크립트로 웹 테트리스 만들기(6) - End (2) | 2021.03.27 |
|---|---|
| 자바스크립트로 웹 테트리스 만들기(5) (0) | 2021.03.27 |
| 자바스크립트로 웹 테트리스 만들기(4) (0) | 2021.03.27 |
| 자바스크립트로 웹 테트리스 만들기(3) (0) | 2021.03.27 |
| 자바스크립트로 웹 테트리스 만들기(2) (0) | 2021.03.27 |
