본문 바로가기

Project/테트리스23

[테트리스] 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.
[테트리스] 8. 키보드 버튼 구현 2018. 8. 1. # html # css // 기본 화살표 배경-흰, 화살표-검 .arrow { color: black; background-color: white; } // 클릭 시 화살표 배경-검, 화살표-흰 .click { color: white; background-color: black; } # js // 키보드 keyCode 상수 const LEFT = 37; const UP = 38; const RIGHT = 39; const DOWN = 40; const SPACEBAR = 32; // 키보드 element 가저온 변수 var arrow_up = $(".fa-arrow-up"); var arrow_down = $(".fa-arrow-down"); var arrow_left = $(".f.. 2019. 8. 27.
[테트리스] 7. 블럭 한 칸 구별, 스페이스 구현 2018. 7. 31. # 블럭 한 칸 구별되게 블럭 간 틈새 추가 const BLOCK_GAP = 1; // 블럭 틈새 크기 var drawOneBlock = function(x, y, colorType) { ctx.fillStyle = blockType[colorType].color; ctx.fillRect( // 틈새 크기만큼 띄우고 그리기 x * SMALL_BLOCK_SIZE + BLOCK_GAP, y * SMALL_BLOCK_SIZE + BLOCK_GAP, SMALL_BLOCK_SIZE - BLOCK_GAP, SMALL_BLOCK_SIZE - BLOCK_GAP ); }; # 스페이스 바 눌렀을 때 블럭 가장 아래로 이동시키기 var drawBelow = function(block) { conso.. 2019. 8. 27.
[테트리스] 6. 블럭 회전 2018. 7. 30. # 블럭 회전 var blockType = [ { name: "O", color: "skyblue", shape: [[[0, 0, 0, 0], [0, 1, 1, 0], [0, 1, 1, 0], [0, 0, 0, 0]]] }, { name: "S", color: "gray", shape: [ [[0, 0, 0, 0], [0, 0, 1, 1], [0, 1, 1, 0], [0, 0, 0, 0]], [[0, 0, 1, 0], [0, 0, 1, 1], [0, 0, 0, 1], [0, 0, 0, 0]] ] }, { name: "Z", color: "purple", shape: [ [[0, 0, 0, 0], [0, 1, 1, 0], [0, 0, 1, 1], [0, 0, 0, 0]], [[0, .. 2019. 8. 27.

티스토리툴바