재미있고 손쉬운 자바스크립트 미니게임 플레이법

프로그래밍을 처음 시작하는 사람들에게 자바스크립트는 적합한 선택입니다. 왜냐하면 자바스크립트는 배우기 쉽고, 강력한 기능을 갖추고 있기 때문이기 때문입니다. 이 블로그 포스트에서는 재미있고 손쉬운 자바스크립트 미니게임을 만드는 방법에 대해서 알려드리겠습니다.

1. 게임 기본 구조 작성하기

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

function draw() {
  // 게임 로직 작성
  requestAnimationFrame(draw);
}

draw();

우선 HTML에 <canvas> 요소를 추가하고, 자바스크립트에서 이를 가져와서 2D 컨텍스트를 생성합니다. 그리고 게임 로직을 작성할 draw 함수를 만들고, requestAnimationFrame을 사용하여 게임을 반복 실행합니다.

2. 게임 캐릭터 그리기

let x = canvas.width / 2;
let y = canvas.height - 30;
let dx = 2;
let dy = -2;

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

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawBall();

  // x, y 좌표 업데이트

  if (x + dx > canvas.width || x + dx < 0) {
    dx = -dx;
  }

  if (y + dy > canvas.height || y + dy < 0) {
    dy = -dy;
  }

  x += dx;
  y += dy;

  requestAnimationFrame(draw);
}

게임 캐릭터를 그리기 위해 drawBall 함수를 만듭니다. ctx.arc를 사용하여 원을 그리고, fill과 closePath를 호출하여 색상을 채웁니다. x, y 좌표가 캔버스 경계에 도달하면 공의 경로를 반전시킵니다. 마지막으로 x와 y 좌표를 업데이트하여 공을 움직입니다.

3. 게임 조작하기

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

let rightPressed = false;
let leftPressed = false;

function keyDownHandler(e) {
  if (e.key === "Right" || e.key === "ArrowRight") {
    rightPressed = true;
  } else if (e.key === "Left" || e.key === "ArrowLeft") {
    leftPressed = true;
  }
}

function keyUpHandler(e) {
  if (e.key === "Right" || e.key === "ArrowRight") {
    rightPressed = false;
  } else if (e.key === "Left" || e.key === "ArrowLeft") {
    leftPressed = false;
  }
}

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

function draw() {
  // 이전 코드 생략

  drawPaddle();

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

  requestAnimationFrame(draw);
}

키 입력을 받아 공을 조작하기 위해 keyDownHandler와 keyUpHandler 함수를 만듭니다. rightPressed와 leftPressed 변수를 사용하여 오른쪽과 왼쪽 키가 눌러지고 있는지 여부를 추적합니다. drawPaddle 함수를 만들어 패들을 그립니다. rightPressed가 true이고 패들이 오른쪽 경계를 벗어나지 않는 경우 paddleX 값을 증가시키고, leftPressed가 true이고 패들이 왼쪽 경계를 벗어나지 않는 경우 paddleX 값을 감소시킵니다.

4. 게임 충돌 감지하기

function collisionDetection() {
  if (x + dx > paddleX && x + dx < paddleX + paddleWidth && y + dy > canvas.height - paddleHeight) {
    dy = -dy;
  }
}

function draw() {
  // 이전 코드 생략

  collisionDetection();

  requestAnimationFrame(draw);
}

collisionDetection 함수를 만들어 공과 패들의 충돌을 감지합니다. 공이 패들 위에 있으면 dy 값을 반전시킴으로써 공이 튀어오르도록 할 수 있습니다.

5. 게임 시작하기

draw();

마지막으로 draw 함수를 호출하여 게임을 시작합니다.

자바스크립트를 활용하여 재미있고 손쉬운 미니게임을 만들 수 있습니다. 이 포스트에서는 게임 기본 구조 작성, 게임 캐릭터 그리기, 게임 조작하기, 게임 충돌 감지하기, 게임 시작하기 등 기본적인 개념을 다뤄보았습니다. 자바스크립트 미니게임은 프로그래밍 초보자에게도 적합하며, 배우기 즐겁고 유익한 경험이 될 것입니다.

키워드: 자바스크립트 미니게임