본문 바로가기

JavaScript19

[테트리스] 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.
[테트리스] 5. 다음블럭출력, 한 줄 삭제 2018. 7. 28. # 다음 블럭 출력 // 캔버스 추가 var canvasNextBlock = document.getElementById("nextBlock"); var ctxNextBlock = canvasNextBlock.getContext("2d"); var drawNextBlock = function() { var nextBlock = blockType[nextBlockType]; var x = 0; var y = 0; for (var i = 0; i < SMALL_BLOCK_NUM; i++) { for (var j = 0; j < SMALL_BLOCK_NUM; j++) { //블럭 있는 칸은 해당 색으로 if (nextBlock.shape[i][j] == 1) { ctxNextBlock.f.. 2019. 8. 27.
[테트리스] 4. 블럭 간 경계 설정 2018. 7. 27. # 게임판 배열 추가 const GAME_SCREEN_WIDTH_NUM = 10; const GAME_SCREEN_HEIGHT_NUM = 20; var gameScreenArray = new Array(GAME_SCREEN_HEIGHT_NUM) .fill(0) .map(row => new Array(GAME_SCREEN_WIDTH_NUM).fill(0)); 위 게임판의 배열을 만들어서 해당 자리에 블럭이 있는지 유무를 체크한다. 블럭이 있는 경우 1, 없는 경우 0. 따라서 처음 초기화는 0으로 한다. # 움직일 위치에 블럭이 있는지 체크 + 게임판 범위 벗어나는지 체크 this.isDuplicatedBlockOrOutOfGameScreen = function(x, y) { for.. 2019. 8. 27.
[테트리스] 3. 테트리스 블럭 모양 만들기 2018. 7. 25. const SMALL_BLOCK_SIZE = 20; // 블럭 한 칸 const BIG_BLOCK_SIZE = SMALL_BLOCK_SIZE * 4; // 4 x 4 블럭의 width, height // 이전 블럭 지우기 ctx.clearRect(this.x, this.y, BIG_BLOCK_SIZE, BIG_BLOCK_SIZE); for (var i = 0; i < 4; i++) { for (var j = 0; j < 4; j++) { // 작은 블럭이 1(채워져 있음)이면 if (this.type.shape[i][j] == 1) // 해당 칸 색칠 ctx.fillRect( nx + i * SMALL_BLOCK_SIZE, ny + j * SMALL_BLOCK_SIZE, SMALL.. 2019. 8. 27.

티스토리툴바