Chrome Dinosaur Game (1)

 

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

 

 

HA2가 끝나고 Solo Day가 이틀 있어서 이전의 페어분들과 함께 게임을 구현해보았습니다.

코드스테이츠에서 다루지 않는 부분을 접해볼 수 있다는 점에서 좋은 기회였던 것 같습니다!

또한 HTML, CSS, JS 만으로 간단하게라도 이런 게임을 만들 수 있다는 게 재밌네요ㅎㅎ

 

이번 글에서는 오늘 게임을 절반정도 구현하면서 새로 알게된 것들과 팁으로 써먹으면 좋을 것 같은 것들을 정리해보려고 합니다.

 

 

 

<canvas> 태그

<canvas>태그는 처음 본 태그였습니다. 웹페이지 상에서 그림을 그릴 때 자주 사용되는 태그입니다. 원, 박스, 이미지 등의 요소를 추가하고 그래픽 요소를 사용하고 싶을 때 사용된다고 하네요!

HTML에서의 <canvas> 태그를 JS에서 사용하기 위해서는 아래와 같이 기본적인 세팅이 필요합니다. 코드를 세부적으로 더 살펴보도록하겠습니다.

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');

canvas.width = window.innerWidth-100;
canvas.height = window.innerHeight-100;

 

 

HTMLCanvasElement.getContext( )

getContext의 인자는 contextType, contextAttributes를 받습니다.

코드 상에서는 getContext("2d")로 되어있는데, 2차원 요소의 객체를 대표하는 CanvasRenderingContext2D를 만들어주는 역할을 하는 것입니다.

이렇게 만들고나면 다양한 Method를 사용해서 여러 모형을 만들 수 있습니다.

fillRect, moveTo, clearRect등을 사용할 수 있습니다.

더 자세한 설명은 아래 MDN을 참고하시면 될 것 같습니다.

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D

 

CanvasRenderingContext2D - Web APIs | MDN

Global Object

global object는 global scope에서 항상 존재하는 객체입니다. 브라우저에서의 global object는 window라고 합니다.

크롬 게임 영상에서는 window 객체를 가지고 canvas의 범위를 정해주었습니다.

window.innerWidth / window.innerHeight

위 그림과 같이 window.innerHeight는 탭, 북마크바 등의 요소를 불포함한 부분을 일컫습니다. inner라는 단어가 있길래 outerHeight도 있나 궁금해서 찾아봤는데 outerHeight는 탭, 북마크바까지 포함한 전체 브라우저 크기의 높이를 말하는 것이었습니다. 코드를 보면 canvas의 크기를 innerHeight와 innerWidth를 통해 지정해준 것입니다.

 

 

 

Dinosaur와 Cactus 만들기

Dinosaur와 Cactus와 같은 요소들은 여러 속성을 지니고 있기 때문에 객체를 따로 선언해준 후에 사용하는 것이 속성 관리에 더욱 간편합니다. 

또한 각각의 객체의 메소드들도 관리해주기 편리해집니다.

나중에 게임 프로젝트를 제대로 진행할 때 너무 큰 규모가 아니라면 간단하게 객체로 관리해주기 좋겠다고 생각했습니다.

이 영상에서는 dino라는 객체를 만들고, cactus라는 클래스를 만들어주었습니다.

Cactus의 경우, 여러 선인장들이 지속적으로 나와야 하기 때문에 클래스를 선언하고 인스턴스를 생성하는 방식으로 진행됩니다.

class Cactus {
  constructor() {
    this.x = 800;
    this.y = 200;
    this.width = 50;
    this.height = 50;
  }
  draw() {
    ctx.fillStyle = 'pink';
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
}