본문 바로가기

html17

[테트리스] 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.
[테트리스] 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.
[테트리스] 2. 벽면 경계 처리, 0.5초간격 떨어지는 블럭 2018. 7. 24. // 캔버스 경계 구하기 var canvas = document.getElementById('game'); const WIDTH = canvas.clientWidth; const HEIGHT = canvas.clientHeight; const CANVAS_LEFT = canvas.clientLeft; const CANVAS_RIGHT = canvas.clientLeft + WIDTH; const CANVAS_TOP = canvas.clientTop; const CANVAS_BOTTOM = canvas.clientTop + HEIGHT; // 5초 간격으로 아래로 움직이는 블럭 setInterval(function(){ nowBlock.drawBlock(nowBlock.x, nowB.. 2019. 8. 27.

티스토리툴바