Project/테트리스23 [테트리스] 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. [테트리스] 13. 다음에 나타날 블럭 1개에서 3개로 변경 오늘의 이슈. 다음에 나올 블럭의 개수를 1개에서 3개로 변경한다. // 다음 블럭 클래스 class NextBlock { // size만큼 랜덤 타입을 만들어 typesQ에 차례로 넣는다. constructor(size) { this.typesQ = []; for(var i = 0; i { map[type.name] = index; return map; }, new Map()); // blockType 요소로 인덱스 가져오기 var getBlockTypeIndex = function(blockType) { return blockTypeMap[blockType.name]; } 1번째 캡쳐화면에서 ctrl을 눌러서 떨어지고 있는 블럭을 keep 해둔다. 2번째 화면에서 I자 형 블럭이 떨어질 때, ctrl.. 2020. 4. 29. [테트리스] 12. 블록이 바닥에 닿았을 때 모습 출력. 오늘의 이슈. 거의 7개월만에 했는데 코르 품질이 영 좋지 않다. 일단 개발하긴 했는데 리팩토링이 시급해보인다. // nx, ny 위치의 블록이 바닥에 떨어졌을 때 모습을 그리기. this.drawPreview = function(nx, ny) { for (var k = 0; ; k++) { if(this.isBottom(nx, ny + k + 1)) { this.justDrawBlock(nx, ny + k); return; } } } // x, y 위치의 블록이 바닥에 떨어졌을 때의 블록을 지우기. this.erasePreview = function(x, y) { for (var k = 0; ; k++) { if(this.isBottom(x, y + k + 1)) { this.eraseBlock(x, .. 2020. 4. 27. 이전 1 2 3 4 다음
