본문 바로가기

Project/테트리스23

[테트리스] 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.
[테트리스] 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.
[테트리스] 1. 사각형, 화살표 이동 2018. 7. 23. // 블럭 하나 관련 코드 // 블럭 타입 7가지 var blockType = [ {name : 'I', color : 'red'}, {name : 'L', color : 'green'}, {name : 'J', color : 'blue'}, {name : 'T', color : 'yellow'}, {name : 'O', color : 'skyblue'}, {name : 'S', color : 'gray'}, {name : 'Z', color : 'purple'}, ] // 새로운 블럭 세팅 var nowBlock; var BEGIN_X = 30; var BEGIN_Y = 50; var drawNewBlock = function(blockTypeIndex){ nowBlock = n.. 2019. 8. 27.

티스토리툴바