Project43 [테트리스] 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. [RN] Expo 프로젝트 생성, 실행 https://expo.io/learn Expo — Learn how Use our step-by-step guide to get started with Expo in minutes. expo.io expo 다운로드 npm install expo-cli --global 예전에는 Expo xde가 있었는데 지원이 종료되면서 cli을 이용해야 한다. 프로젝트 생성 & 실행 $ expo init rn-project $ cd rn-project $ expo start cd명령어로 프로젝트 생성하고 싶은 위치로 이동 후 첫번째 명령어 실행. rn-project 라는 Expo 프로젝트를 생성한다. 생성된 프로젝트 폴더로 이동(2번째 명령어) 후 실행(3번째 명령어) Please install it with 'yar.. 2020. 4. 3. [테트리스] 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 5 6 7 8 다음
