[WEB] HTML/CSS/JS로 게임 만들기 1

오늘은 HTML / CSS / JS로 게임을 만들어 볼 것이다.

게임은 어렸을 때 많이 했던 갤러그이다.

이 게임은 적군이 아래로 다가오는데

다가오는 적군에 총을 쏴서 없애는 게임이다. 

물론 위 게임처럼 완벽하게 만들 수는 없겠지만 최대한 비슷하게 만들어볼 예정이다.

---

1. 캔버스 세팅하기

JS에서 캔버스를 생성해 주어서 게임을 진행할 화면을 세팅해줘야 한다.

canvas(캔버스) - HTML문서 내부에 그림을 그릴 수 있는 일종의 컨테이너 요소이다. JS를 통해 애니메이션과 이벤트를 처리할 수 있다.

//캔버스 세팅
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d"); // 2d로 보여줄 것이다.
canvas.width = 400; // 캔버스의 가로 길이 설정
canvas.height = 700; // 캔버스의 세로 길이 설정
document.body.appendChild(canvas); // 이것을 body 안에 붙이겠다.

---

2. 이미지 준비 & 가져오기

무료로 받을 수 있는 곳에서 이미지를 준비해 준다.

이미지에는

1. 게임 뒷 배경

2. 내 우주선

3. 적군 우주선

4. 총알

5. 게임 오버 화면

정도 준비해주면 될 것 같다.

이제 이 이미지들을 가져와야 한다.

//이미지 가져오기
let backgroundImage, spaceshipImage, bulletImage, enemyImage, gameOverImage; // 이미지를 가져오기 위한 변수 선언
const loadImage=()=>{
    backgroundImage = new Image();
    backgroundImage.src = "images/background.jpg";

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

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

    enemyImage = new Image();
    enemyImage.src = "images/enemy.png";

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

이렇게 하면 변수들에 우리가 구해온 이미지들이 들어가게 된다.

---

3. 배경화면 보여주기

그렇다면 이 이미지들을 보여주기 위해서는 어떻게 해야할까?

우선 이미지를 보여주기 위한 함수 render()를 만들어준다.

//이미지 보여주기
const render=()=>{
    ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);
}

지금 render라는 함수 안에 ctx.drawImage가 있다.

drawImage는 캔버스에 다양한 이미지를 그려주는 역할을 한다.

drawImage(image, dx, dy, dWidth, dHeight)

위와 같은 형식으로 사용할 수 있는데

drawImage image: 어떤 이미지를 그릴건지 dx: x좌표의 어디에 그릴 건지 dy: y좌표의 어디에 그릴 건지 dwidth: 가로의 크기는 어떻게 할 것인지 dHeight: 세로의 크기는 어떻게 할 것인지

* 우리의 코드를 살펴보면

ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);

background 이미지를 (0,0)에 그리며 

가로는 캔버스의 가로 길이만큼, 세로는 캔버스의 세로 길이만큼 그릴 것이다.

라는 뜻이 된다. 

---

이렇게 작성을 하고 나서 함수를 호출한 후 실행 시키면 

화면에 보여져야되는데 화면에 보이지 않는다.

그 이유는 무엇일까?

그 이유는 캔버스에 있다.

캔버스는 이미지를 계속 호출해야 화면에 보이게 된다.

1번만 호출하게 되면 보이지 않는다는 뜻이다. 

그러니까 우리 코드로 보면 render 함수를 계속 호출해야 화면에 보인다는 것이다.

render 함수를 계속 호출해주기 위해 함수 하나를 더 만들어 준다.

// 계속 호출해주는 함수 만들기
const main=()=>{
    render();
    requestAnimationFrame(main);
}

loadImage();
main();

main이라는 함수에 render 함수를 넣고 

requestAnimationFrame( );를 호출 시킨다.

requestAnimationFrame( );는 애니메이션을 계속 호출해주는 역할을 한다. 

우리 코드를 보면 main을 계속 호출하게 된다. 

main을 계속 호출한다는 뜻은 main 안에 있는 render를 계속 호출한다는 뜻이 된다.

---

4. 우주선 보여주기

우주선 보여주는 방법도 별로 다르지는 않다.

우선 render 함수에 뒷 배경 보여주듯이 한다.

const render=()=>{
    ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);
    ctx.drawImage(spaceshipImage, ?, ?);
}

지금 spaceshipImage를 그려주라고 하긴 했는데 이를 어떤 좌표에 그려줘야할까?

우주선의 초기 위치는 게임 화면의 맨 아래의 가운데있어야 한다.

우리는 게임화면을 400px, 700px로 설정해 놓은 상태이고 우주선의 크기는 64x64이다.

우주선이 하단의 가운데 놓일 X좌표는 

canvas.width/2 - 우주선의 크기/2가 되고

Y좌표는 

canvas.height - 64가 된다.

이것을 따로 변수로 만들어 drawImage에 넣어주면 끝이다.

 

// 우주선 좌표
let spaceshipX = canvas.width/2-32;
let spaceshipY = canvas.height-64;

//이미지 보여주기
const render=()=>{
    ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);
    ctx.drawImage(spaceshipImage, spaceshipX, spaceshipY);
}

---

지금까지 결과

(CSS로 살짝 더 꾸며주었다.)

---

참고한 영상

https://www.youtube.com/watch?v=TJmvuyt6tT8