[Toyproject] 자바스크립트로 슈팅게임 만들기!

학원 수업이 끝나고 휴식과 예비군등 바쁘게 지내면서 시간이 지나고,
그리고 계속 걸리고 싶지 않았던 코로나에 걸리면서 일주일동안 고생을 하고 나니....
컨디션이 올라오지않고 계속해서 쉬고 싶은 마음이 강했습니다.

그래도 다시 일어나서 시작을 해야하니까, 예전에 유튜브 "코딩 알려주는 누나" 채널에서
미뤄두었던 자바스크립트 슈팅게임 만들기를 해보고자 컴퓨터를 켰습니다.

자바스크립트 슈팅게임!

1. 폴더 구조

2. JavaScript

let canvas;
let ctx;

canvas = document.querySelector("canvas");
ctx = canvas.getContext("2d");
canvas.width = 400;
canvas.height = 700;

게임에서의 움직임을 자연스럽게 표현하기 위해서 canvas API를 이용하여 작업을 하였습니다.

let backgroundImage, spaceShipImage, bulletImage, monsterImage, gameOverImage;

function loadImage() {
  backgroundImage = new Image();
  backgroundImage.src = "images/background.gif";

  spaceShipImage = new Image();
  spaceShipImage.src = "images/spaceship.png";

  bulletImage = new Image();
  bulletImage.src = "images/bullet.png";

  monsterImage = new Image();
  monsterImage.src = "images/monster.png";

  gameOverImage = new Image();
  gameOverImage.src = "images/gameover.png";
}

function renderImage() {
  // drawImage(image, dx, dy, (dwidth, dheight))
  ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);
  ctx.drawImage(spaceShipImage, spaceShipX, spaceShipY);
}

function main() {
  update();
  renderImage();
  requestAnimationFrame(main);
}

모든 이미지들을 자바스크립트 코드로 불러오고, canvas에 render하여 그려주었습니다.
function main()에서 requestAnimationFrame(main)를 이용하여 계속해서 main함수를 반복하여 그려주게 하였습니다.

window.requestAnimationFrame()은 브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출하게 합니다. 이 메소드는 리페인트 이전에 실행할 콜백을 인자로 받습니다.

let keysDown = {};
function setupKeyboardListener() {
  document.addEventListener("keydown", (event) => {
    keysDown[event.key] = true;
  });

  document.addEventListener("keyup", (event) => {
    delete keysDown[event.key];
  });
}

addEventListener("keydown")으로 키보드가 눌리는 값을 가져오고, keysDown에 그 값을 저장하여 읽도록 해주며,
addEventListener("keyup")로 키보드를 눌렀던 손이 떨어지면 값을 저장해뒀던 keysDown의 값을 지워주는 것으로
초기화를 시켜주었습니다.

우주선 움직임 제어

// 우주선 좌표
let spaceShipX = canvas.width / 2 - 32; // canvas의 중앙배치
let spaceShipY = canvas.height - 64; // 바닥에 배치

우주선이 좌측로 움직이려면 spaceShipX의 값이 감소하여야 하고,
우주선이 우측으로 움직이려면 spaceShipX의 값이 증가하여야 합니다.

function update() {
  if ("ArrowRight" in keysDown) {
    spaceShipX += 3;
    // right
  }

  if ("ArrowLeft" in keysDown) {
    spaceShipX -= 3;
    // left
  }
}

"코딩 알려주는 누나"에서는 우주선의 좌우 움직임만 작업을 하셨는데,
저는 실제 게임처럼 위,아래로도 움직이게 하고 싶어서 아래 코드를 추가하였습니다.

  if ("ArrowRight" in keysDown) {
    spaceShipX += 3;
    // right
  }

  if ("ArrowLeft" in keysDown) {
    spaceShipX -= 3;
    // left
  }

여기서 문제점은 우주선이 위,아래,왼쪽,오른쪽으로 이동할때 경기장의 끝으로 이동하면 멈춰야 하는데 넘어간다는 점입니다.

그래서 아래 if문 코드로 조건을 추가함으로 인하여 그 문제점을 해결하였습니다.

// 우주선의 좌표값이 경기장 안에서만 있게 하는 법
if (spaceShipX <= 0) {
  spaceShipX = 0;
} else if (spaceShipX >= canvas.width - 64) {
  spaceShipX = canvas.width - 64;
}

if (spaceShipY <= 0) {
  spaceShipY = 0;
} else if (spaceShipY >= canvas.height - 64) {
  spaceShipY = canvas.height - 64;
}

출처

• 코딩알려주는 누나 - 코딩으로 게임만들기 1탄
• 코딩알려주는 누나 - 코딩으로 게임만들기 2탄
• https://developer.mozilla.org/ko/docs/Web/API/Window/requestAnimationFrame