JavaScript19 [테트리스] 23. 시간 출력 오늘의 이슈. 플레이타임을 시분초로 출력하자. 0 : 0 : 0 시분초를 출력하는 부분을 html에 지정. // /js/constants.js const TIMER_UNIT = 1000; // 1sec 1초 마다 타이머가 수정되게 상수를 추가. // /js/timer.js class Timer { constructor(speed, bottomTimeInterval, bottomTimeTempInterval, speedUpInterval, speedUnitPercent, gameFunction, gameoverFunction, whenDropBlockNextFunction) { // ... this.time = 0; this.timerId = null; } startGame() { this.setTimer.. 2022. 3. 2. [테트리스] 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. 이전 1 2 3 4 다음
