Canvas을 사용하여 벽돌깨기 게임 만들기4 (Paddle과 키보드 컨트롤)

공을 치기 위한 paddle 정의

공을 치기 위한 paddle을 정의해보자

const paddleHeight = 10
const paddleWidth = 75
const paddleX = (canvas.width - paddleWidth) / 2

paddleX는 paddle의 왼쪽 끝 x좌표를 말한다.

 

paddle을 그리는 drawPaddle()을 추가해준다.

function drawPaddle() {
	ctx.beginPath()
	ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddHeight)
	ctx.fillStyle = "#222222"
	ctx.fill()
	ctx.closePath()
}

 

유저의 paddle 컨트롤

addEventListener()를 사용하여 key가 눌렸는지, 안눌렸는지 확인하는 함수를 만들자.

먼저 키가 눌렸는지 확인하는 boolean을 만든다.

let rightPressed = false
let leftPressed = false

 

addEventListener()로 keydown과 keyup를 잡아준다.

document.addEventListener("keydown", keyDownHandler, false)
document.addEventListener("keyup", keyUpHandler, false)

keyDownHandler()는 이제 정의해줄것이다.

 

addEventListener에서 사용할 함수들을 정의해준다.

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
	}
}

여기서 여기서 event에는 누른 키에 대한 정보가 들어오고 39번 code는 오른쪽 화살표, 37번 code는 왼쪽 화살표를 의미한다. keyDownHandler에서는 rightPressed와 leftpressed를 true keyUpHandler에서는 false를 넣어준다.

 

이제 각 rightPressed와 leftPressed를 체크하여 paddle을 이동시켜보자

if (rightPressed && paddleX < canvas.width - paddleWidth) {
	paddleX += 7
}
	if (leftPressed && paddleX > 0) {
	paddleX -= 7
}

7px만큼 이동시키기로 하자.

 

마지막으로 draw()에 drawPaddle()을 추가하자.

drawPaddle()

 

최종 코드는 아래와 같다.

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
// paddle
const paddleHeight = 10
const paddleWidth = 75
let paddleX = (canvas.width - paddleWidth) / 2
// event
let rightPressed = false
let leftPressed = false

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 = "#222222"
	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)
	drawBall()
	drawPaddle()
	// 공 체크
	if (y + dy < ballRadius || y + dy > canvas.height - ballRadius) {
		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
	y += dy
}
document.addEventListener("keydown", keyDownHandler, false)
document.addEventListener("keyup", keyUpHandler, false)

setInterval(draw, 10)

 

내 코드와 같다면 아래와 같은 결과물을 볼 수 있을 것이다.