Canvas을 사용하여 벽돌깨기 게임 만들기6 (벽돌 만들기)

벽돌에 대한 변수 설정하기

이제 벽돌을 만들어 보자. 벽돌은 2차원 배열로 제공이 될 것이며 벽돌에 대한 정보를 저장할 것이다.

let brickRowCount = 3
let brickColumnCount = 5
let brickWidth = 75
let brickHeight = 20
let brickPadding = 10
let brickOffsetTop = 30
let brickOffsetLeft = 30

brickRowCount는 열 수, brickColumnCount는 횡 수, brickWidth는 벽돌 너비, brickHeight는 벽돌 높이, brickPadding은 벽돌 사이의 간격, brickOffsetTop과 brickOffsetLeft는 캔버스의 모서리에 닿지 않게 할 변수이다.

 

각 벽돌을 2차원 배열로 관리하기 위해 초기화 해주자.

let bricks = []
for (let c = 0; c < brickColumnCount; c++) {
	bricks[c] = []
	for(let r = 0; r < brickRowCount; r++) {
		bricks[c][r] = { x: 0, y: 0}
	}
}

각 brick의 요소에는 x, y를 가진 객체가 저장된다.

 

이렇게 만들어진 bricks를 사용하여 벽돌을 그리는 함수를 만들자

function drawBricks() {
	for (let c = 0; c < brickColumnCount; c++) {
		for(let r = 0; r < brickRowCount; r++) {
			bricks[c][r].x = 0
			bricks[c][r].y = 0
			ctx.beginPath()
			ctx.rect(0, 0, brickWidth, brickHeight)
			ctx.fillStyle = "#0095DD"
			ctx.fill()
			ctx.closePath()
		}
	}
}

지금은 모든 벽돌의 좌표를 0, 0으로 잡아뒀다. 이 위치를 바르게 잡기 위하여 brickX, brickY변수를 설정하고 적용시켜보자

 

function drawBricks() {
	for (let c = 0; c < brickColumnCount; c++) {
		for(let r = 0; r < brickRowCount; r++) {
			let brickX = (c * (brickWidth + brickPadding)) + brickOffsetLeft // 추가
			let brickY = (r * (brickHeight + brickPadding)) + brickOffsetTop // 추가
			bricks[c][r].x = brickX // 수정
			bricks[c][r].y = brickY // 수정
			ctx.beginPath()
			ctx.rect(brickX, brickY, brickWidth, brickHeight) // 수정
			ctx.fillStyle = "#0095DD"
			ctx.fill()
			ctx.closePath()
		}
	}
}

인덱스 c, r을 이용하여 brickX와 brickY의 위치를 각각 조정하였다.

 

마지막으로 draw()의 drawBall() 위에 drawbricks()를 호출해주자.

drawBricks()

 

최종 코드를 진행하기 전 html파일에서 canvas태그에 캔버스 크기를 추가해주자.

<canvas id="canvas" height="320" width="480"></canvas>

원래 추가를 해줬어야 했는데 안해서 화면이 굉장히 작게 나타나고 있었다.

 

최종 코드

const canvas = document.querySelector("#canvas")
const ctx = canvas.getContext("2d")

let ballRadius = 10
let x = canvas.width / 2
let y = canvas.height - 20
let dx = 1
let dy = -1
let ballSpeed = 1.5
// paddle
const paddleHeight = 10
const paddleWidth = 75
let paddleX = (canvas.width - paddleWidth) / 2
// event
let rightPressed = false
let leftPressed = false
// 벽돌
const brickRowCount = 3
const brickColumnCount = 5
const brickWidth = 75
const brickHeight = 20
const brickPadding = 10
const brickOffsetTop = 30
const brickOffsetLeft = 30

let bricks = []
for (let c = 0; c < brickColumnCount; c++) {
	bricks[c] = []
	for(let r = 0; r < brickRowCount; r++) {
		bricks[c][r] = { x: 0, y: 0}
	}
}

function drawBricks() {
	for (let c = 0; c < brickColumnCount; c++) {
		for(let r = 0; r < brickRowCount; r++) {
			let brickX = (c * (brickWidth + brickPadding)) + brickOffsetLeft
			let brickY = (r * (brickHeight + brickPadding)) + brickOffsetTop
			bricks[c][r].x = brickX
			bricks[c][r].y = brickY
			ctx.beginPath()
			ctx.rect(brickX, brickY, brickWidth, brickHeight)
			ctx.fillStyle = "#0095DD"
			ctx.fill()
			ctx.closePath()
		}
	}
}

function keyDownHandler(event) {
	if (event.keyCode === 39) {
		rightPressed = true
	}
	else if (event.keyCode === 37) {
		leftPressed = true
	}
}

function keyUpHandler(event) {
	if (event.keyCode === 39) {
		rightPressed = false
	}
	else if (event.keyCode === 37) {
		leftPressed = false
	}
}

function drawPaddle() {
	ctx.beginPath()
	ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight)
	ctx.fillStyle = "rgba(50, 20, 20, 1)"
	ctx.fill()
	ctx.closePath()
}

function drawBall() {
	ctx.beginPath()
	ctx.arc(x, y, ballRadius, 0, Math.PI * 2, false)
	ctx.fillStyle = "blue"
	ctx.fill()
	ctx.strokeStyle = "red"
	ctx.stroke()
	ctx.closePath()
}

function draw() {
	ctx.clearRect(0, 0, canvas.width, canvas.height)
	drawBricks()
	drawBall()
	drawPaddle()
	// 공 체크
	if (y + dy < ballRadius) {
		dy = -dy
	} else if (y + dy > canvas.height - ballRadius) {
		alert("GAME OVER")
		document.location.reload()
		clearInterval(tmp)
	} else if (y + dy > canvas.height - ballRadius - paddleHeight &&
				x + dx > paddleX && x + dx < paddleX + paddleWidth) {
		dy = -dy
	}
	if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
		dx = -dx
	}
	
	// 키 체크
	if (rightPressed && paddleX < canvas.width - paddleWidth) {
		paddleX += 7
	}
	if (leftPressed && paddleX > 0) {
		paddleX -= 7
	}
	x += dx * ballSpeed
	y += dy * ballSpeed
}
document.addEventListener("keydown", keyDownHandler, false)
document.addEventListener("keyup", keyUpHandler, false)

let tmp = setInterval(draw, 10)

 

결과물