우찬쓰 개발블로그

저는 이쯤에서부터 깃허브 호스팅을 시작했던 것으로 기억합니다. 어느정도 플레이 할 수 있는 테트리스가 되니 다른분들도 시켜보고 싶더군요. 깃허브 호스팅은 간단합니다. `gh-pages`라는 브랜치를 만들어서 push하면, 가장 상위루트에 index.html로 정의한 파일이 호스팅되게 됩니다. URL을 예를 들어보면 제 github 프로젝트 주소가 github.com/WoochanLee/BalanceTetris이고, 호스팅하면 woochanlee.github.io/BalanceTetris 이런 주소가 됩니다. 이 주소를 공유하여 테스터분들의 피드백을 요청하여 봤습니다. 근데 피드백을 들어보니, 랜덤의 문제점이 들어납니다. 긴 블럭만 계속 나온다던지.. 아니면 죽어도 안나온다던지.. 그래서 찾아보니 테트리스..

이제 테트리스 게임같긴 한데 뭔가 밋밋하죠? 네 맞습니다.. 색상을 입혀야 겠군요. 여기까지 만들고나서 지인들에게 조언을 구해보니 중요한 사실이 있었습니다. 테트리스의 각 블록은 이미 암묵적으로 정해진 색상이 있더군요(저도 이때 처음 알게되었음) 그래서 저도 그 색상을 따다가 블럭의 설계도에 추가해 봤습니다. /** ****□□□□**** **/ class BlockTypeOne { constructor() { this.widthBlockCount = 4; this.widthBlockMarginCount = 0; this.heightBlockCount = 1; this.heightBlockMarginCount = 1; this.blockColor = "#8CD6F3"; this.shape = [ [0, ..

고지가 눈앞에 보이니, 게임 시작부터 게임 오버까지 만들고 싶어졌습니다! 자 그럼 완성된 줄을 지우는 로직부터 시작해봅시다. removeCompletedLine(lineCount) { let stackedBlockArray = this.stackedBlock.blockArray; for (let y = 0; y < heightBlockCount; y++) { let isCompletedLine = true; for (let x = 0; x < widthBlockCount; x++) { if (!stackedBlockArray[x][y]) { isCompletedLine = false; break; } } if (isCompletedLine) { this.removeLine(y); return this.r..

이제 블럭을 좌우로 움직일 때 입니다! 화살표에 따라 블럭이 움직여 줘야 게임이겠죠 ㅎㅎ 그리서 key 이벤트를 받아 블럭이 움직이도록 해봅시다. window.onkeydown = (e) => { handleKeyboardEvent(e); }; function handleKeyboardEvent(e) { switch (e.code) { case "ArrowLeft": onClickLeftArrow(controlBlocks, stackedBlocks); break; case "ArrowRight": onClickRightArrow(controlBlocks, stackedBlocks); break; case "ArrowDown": onClickDownArrow(controlBlocks, stackedBloc..

이전에 테트리스 블럭이 쌓일 공간을 만들었으니, 이제 직접 조정할 블럭과 쌓일 블럭을 만들어야겠죠? 저는 이 두개를 stackedBlock과 controlBlock으로 이름붙였습니다. 그리고 각 블럭을 초기화 해봅니다. const widthBlockCount = 10; const heightBlockCount = 25; let stackedBlock = new Array(widthBlockCount); let controlBlock = new Array(widthBlockCount); initBlockArray(stackedBlock); initBlockArray(controlBlock); function initBlockArray(blockArray) { for (let x = 0; x < widthB..

벌써 테트리스를 만든지는 꽤 오래되었지만, 블로그에 테트리스 개발기를 써야지.. 써야지.. 하다가 오늘에야 마음먹고 쓰게되었습니다. 결론부터 말씀드리자면, 소스는 오픈소스로 공개되어있고, 출처만 밝히면 누구든지 소스를 참고할 수 있게 공개해 두었습니다. 누구든 이 테트리스 오픈소스에 참여할 수 있으니, 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 깃허브 호스팅을 이용하여 바로 플레이 해..