Tetris14 [테트리스] 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. [테트리스] 22. 키 설정 추가 오늘의 이슈 설정 버튼을 추가하고 설정 버튼을 누르면 레이어팝업이 뜬다. 해당 팝업에서는 현재 사용중인 키 설정을 바꿀 수 있게 한다. 레이어 팝업은 인터넷에서 검색한 코드를 참고하였으므로 생략. 아래에 명시해둔 참고 사이트를 참고바란다. event의 key 는 알아보기 쉬운 문자열 (ArrowUp, ArrowDown...)로 되어있고 keyCode는 아스키코드로 되어있다. 기존에는 내부에서 keyCode로 분기처리를 하였지만 이제 세팅 화면에서 노출해야 하므로 이해가 쉬운 key를 사용하게 바꿨다. 위 아래 왼쪽 오른쪽 최하단 블럭 저장 확인 취소 // /js/setting.js // 디폴트 키코드 세팅 document.getElementById("key-up").value = keyCode.UP; d.. 2022. 3. 1. [테트리스] 21. 블록 이동, 바닥에 도달했을 때 로직 개선 https://github.com/fpdjsns/Tetris/issues/18 오늘의 이슈. 아주 묵혀있던 이슈를 처리했다. 바닥 도달 시 블럭을 회전했을 때 정상작동하지 않음. 기존에는 (x, y)로 이동할 때, 이동가능한지 체크(1), 가능하다면 해당 좌표로 블럭 좌표 갱신(2), 화면에 출력(3). 을 따로 하고 있었다. 블럭이 바닥에 완전히 도달했을 때 호출되는 함수는 timer에서 콜백함수로 따로 주입받았는데 로직은 아래와 같다. // gamescreen 배열에 nowBlock의 좌표를 세팅 setBlockInGameScreen(nowBlock); // 삭제가능한 행이 있다면 삭제 후 gamescreen 갱신 & 캔버스 그리기 nowBlock.checkRowsAndErase(); // 새로운 블.. 2022. 2. 28. [테트리스] 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. 이전 1 2 3 다음
