html17 [테트리스] 20. 블록 회전 개선 (2) 이전에 했던 이슈를 마저 처리해보자. 1. 회전 중심 // /js/block.js function Block(blockTypeIndex, x, y) { this.typeIndex = blockTypeIndex; this.type = blockType[this.typeIndex]; this.shape = [...this.type.shape]; this.blockNum = this.shape.length; // add // ... block에 blockNum 변수를 추가. 지금보니 왜 Block을 function으로 만들었을까 싶다. nextBlock 처럼 class로 만들어도 됐을거 같은데 :thinking_face: Block 내에 있는 SMALL_BLOCK_NUM 상수를 모두 this.blockNum .. 2020. 8. 22. [테트리스] 18. 다음 블럭 정하는 난수 수정 오늘의 이슈. 이제 간단한 건은 없드아. 기존 문제점 중복되는 블럭이 연속으로 많이 나온다. 3개가 연속으로 나온적도 있다. 무작정 랜덤으로 돌리면 안될듯하다. 다른 테트리스에서는 어떻게 하고 있는지 구글링을 해봤다. https://www.quora.com/Do-Tetris-pieces-spawn-randomly 2001년부터 7 System(random bag)이라는 랜덤 블럭 생성 방법을 사용한다는 글을 보았다. 7은 테트리스에서 사용하는 블럭의 수다. https://tetris.fandom.com/wiki/Random_Generator https://simon.lc/the-history-of-tetris-randomizers 좀 더 상세한 정보를 찾아봤다. (새삼느끼는 인터넷의 위대함) 가방에 7개.. 2020. 8. 16. [테트리스] 17. 캔버스 테두리 추가 오늘의 이슈. 간단한 건 // canvas.js var ctx = canvas.getContext("2d"); // add ctx.lineWidth = 2; ctx.strokeStyle="black"; ctx.strokeRect(0, 0, canvas.width, canvas.height); var ctxNextBlock = canvasNextBlock.getContext("2d"); // add ctxNextBlock.lineWidth = 2; ctxNextBlock.strokeStyle="black"; ctxNextBlock.strokeRect(0, 0, canvasNextBlock.width, canvasNextBlock.height); var ctxKeepBlock = canvasKeepBlock.. 2020. 8. 8. [테트리스] 16. 초기 블럭 생성 위치 개선 오늘의 이슈. 초기 블럭 위치를 0에서 -2로 개선시킨다. 말만 -2이지 배열에서는 인덱스가 -2가 될 수 없으므로 gameArray 배열의 y 인덱스를 2증가시키고, canvas에서는 gameArray의 2인덱스부터 블록을 그려준다. // constants.js const HIDE_SCREEN_HEIGHT_NUM = 2; //add // gamearray y size const GAME_SCREEN_HEIGHT_NUM = 20 + HIDE_SCREEN_HEIGHT_NUM; // canvas y size const GAME_SCREEN_HEIGHT = (GAME_SCREEN_HEIGHT_NUM - HIDE_SCREEN_HEIGHT_NUM) * SMALL_BLOCK_SIZE; 상수에 숨김처리하는 블럭 y인.. 2020. 8. 1. [테트리스] 15. 시간 지날수록 블럭 속도 감소 오늘의 이슈. 지금은 블럭 속도가 처음 지정한 속도로 게임이 끝날때까지 유지되는데, 난이도 조절을 위해 시간이 지날수록 블럭 속도가 빨라지게 해보자. // timer.js class Timer { setDifficulty() { var that = this; that.difficultyTimerId = setInterval(function() { that.speed *= 0.9; // 속도를 10% 감소시킨다. that.refreshGame(that.speed); // 감소된 속도로 세팅 }, 10000); // 10초마다 스피드 갱신 } startGame() { this.refreshGame(this.speed); // 시작 스피드로 게임 시작 this.setDifficulty(); // 난이도 세팅 .. 2020. 5. 7. [테트리스] 14. 블럭이 지면에 닿았는지 판단하는 알고리즘 개선 오늘의 이슈. setInterval로 설정한 스피드가 아닌 바닥에 도달하였는지 여부는 시간 설정을 다르게 한다. 예를 들어 바닥에 닿았다고 하더라도 왼쪽이나 오른쪽으로 이동한 경우, 블럭을 회전시킨 경우 특정 시간이후 다시 바닥에 닿았는지 체크했다. Timer 클래스를 만들고 그 클래스에 게임 시작, 게임 종료, setInterval 관련 코드들 실행을 모두 위임했다. class Timer { this.gameTimerId = null; // setInterval Id. 종료시 사용. this.bottomTime = null; // 바닥에 닿았는지 판단하는 타임아웃 최대시각 this.bottomTempTime = null; // 바닥에 닿았는지 판단하는 타임아웃 중간 시각.( 블럭 이동, 회전시 갱신) .. 2020. 5. 4. 이전 1 2 3 다음
