Table of Contents

즐기면서 배우는 자바스크립트 게임 개발

자바스크립트로 게임 만들기


const canvas=document.getElementById("canvas");
const ctx=canvas.getContext("2d");
const ballRadius=10;
let x=canvas.width/2;
let y=canvas.height-30;
let dx=2;
let dy=-2;

function drawBall(){
  ctx.beginPath();
  ctx.arc(x, y, ballRadius, 0, Math.PI*2);
  ctx.fillStyle="#0095DD";
  ctx.fill();
  ctx.closePath();
}

function draw() {
  ctx.clearRect(0,0, canvas.width, canvas.height); //화면 지우기
  drawBall();
  x += dx;
  y += dy;
}
setInterval(draw, 10); //0.01초마다 실행

위 코드는 HTML의 캔버스 요소에 자바스크립트를 이용해 공을 그리는 코드입니다. dx와 dy 값을 이용해 공이 이동하도록 하고 색상을 지정합니다.

이벤트 처리하기


document.addEventListener("keydown", keyDownHandler);

function keyDownHandler(e){
  if(e.keyCode == 39){
    dx = 7; //오른쪽 화살표키를 누르면 공이 오른쪽 방향으로 이동
  }
  else if(e.keyCode == 37){
    dx = -7; //왼쪽 화살표키를 누르면 공이 왼쪽 방향으로 이동
  }
}

document.addEventListener("keyup", keyUpHandler);

function keyUpHandler(e) {
  if(e.keyCode == 39 || e.keyCode == 37) {
    dx = 0;
  }
}

자바스크립트 이벤트를 활용하여 오른쪽 방향키와 왼쪽 방향키를 눌렀을 때 공이 이동하는 코드입니다. 이벤트 리스너를 등록하여 키보드 입력을 받고, keyCode를 이용해 키를 구분합니다.

게임 동작 추가하기


let paddleHeight=10;
let paddleWidth=75;
let paddleX=(canvas.width-paddleWidth)/2;  
let rightPressed=false;
let leftPressed=false;

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

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

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

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

function draw() {
  ctx.clearRect(0,0, canvas.width, canvas.height);
  drawBall();
  drawPaddle();
  if(x + dx < ballRadius || x + dx > canvas.width-ballRadius) {
    dx = -dx; //공이 좌우 벽에 닿으면 방향 반전
  }
  if(y + dy < ballRadius || y + dy > canvas.height-ballRadius) {
    dy = -dy; //공이 천장 또는 패들에 닿으면 방향 반전
  }
  if(rightPressed && paddleX < canvas.width-paddleWidth) {
    paddleX += 7; //오른쪽 방향키를 누르면 패들을 오른쪽으로 이동
  }
  else if(leftPressed && paddleX > 0) {
    paddleX -= 7; //왼쪽 방향키를 누르면 패들을 왼쪽으로 이동
  }
  x += dx;
  y += dy;
}

setInterval(draw, 10);

위 코드는 공과 패들을 동시에 그리고 패들을 조작할 수 있도록 변경한 코드입니다. 벽면과 패들과 공이 닿을 때마다 방향을 반전시켜 튕기도록 설정하였습니다.