JavaScript19 [테트리스] 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. [테트리스] 11. 블럭 저장, 불러오기 오늘할 이슈. 테트리스 시 블럭을 keep해두고 keep해둔 블럭을 load해서 사용하는 것까지 구현했다. #1. 이미 불러온 블럭인 경우 -> 아무 행동하지 않고 종료 #2. keep해놓은 블럭이 있는 경우 -> 현재 블록 타입을 keep, keep해뒀던 타입으로 새로운 블럭 생성 후 위에서 부터 다시 떨굼. #3. keep해놓은 블럭이 없는 경우 -> 현재 블록 타입을 keep, 다음에 나올 예정이었던 타입의 블럭을 생성. 수도코드를 간단히 적어보자면 위와 같다. const keepOrLoadBlock = function() { // #1 if(nowBlock.isLoaded) return false; nowBlock.eraseBeforeBlock(); const willKeepType = nowBl.. 2019. 9. 10. [테트리스] 10. 모바일 - 키보드 입력 방지, 화면 확대 모바일에서도 게임 플레이가 가능하게 화살표 버튼을 구현한 적이 있다. 그러나 문제가 있었다. 일단 화면이 너무 작고, 버튼을 클릭 시 두 번 연속으로 클릭하면 화면이 확대되어 게임이 불가능했다. 그래서 임시 방편으로 화면 확대를 막고 게임화면 크기를 키웠다. // mobile인지 const isMobile = (function() { var userAgent = navigator.userAgent; var isMobile = false; if (userAgent.indexOf("iPhone") > 0 || userAgent.indexOf("iPot") > 0 || userAgent.indexOf("iPad") > 0) { console.log("iPhone or iPot or iPad"); isMobil.. 2019. 9. 1. [테트리스] 9. 게임 맵 경계 구분 오랜만에 테트리스 개발. 이번에는 3일전에 등록해둔 이슈를 해결했다. 기존에 테트리스 화면은 위와 같았다. 배경이 핑크이고, 별다른 행열 구분이 없어서 블록이 어디로 떨어지는지 구분하기가 어렵다는 단점이 있었다. 그래서 배경에 행열 구분을 위한 체크무늬(?)의 필요성을 느꼈다. canvas 배경색을 pink에서 white로 변경했다. 배경색을 white로 두고 선을 white로 하니까 별로 안이쁜거 같아서 기본으로 돌아가기로 했다. 그래서 배경색은 white, 선은 black으로 했다. // js/main.js const LINE_COLOR = "black"; // set line color to black $(window).load(function() { console.log("load"); drawW.. 2019. 8. 31. 이전 1 2 3 4 다음
