JhsK
163
2020-11-03 14:39:10
3
254

자바스크립트 캔버스로 미니 게임을 만들때


자바스크립트와 캔버스를 이용해서 미니 게임을 만들려고 합니다.


스프라이트 캐릭터 이미지를 통해서 캐릭터가 뛰는 모습을 drawImage와 setInterval 함수를 통해서 구현을 했습니다.

그리고 캐릭터가 뛰고 있는 동안 바위같은 장애물을 캔버스에 그리고 싶은데 캐릭터 뛰는 모습을 구현하는 장면에서 clearRect가 사용되어서 계속 장애물을 그려도 소용이 없는데 혹시 이러한 비슷한 게임들은 어떻게 구현하는건가요 ??

0
  • 답변 3

  • 캐티
    2k
    2020-11-03 16:38:46

    웹에서는 모든 영역을 비우고 다시 안 그려도되빈다. 투명 캔버스를 여러개 곂쳐버리면 되빈다.

    웹브라우저에 프로세스는 단일 쓰레드 이다보니까 여러가지 처리부분에 많은 부분을 생략하도록 로직을 하여야하빈다.

  • 마샤와곰
    213
    2020-11-03 17:47:38

    2가지 방법이 있습니다.

    1. 캔버스를 2개활용하는 방법

     - 캐릭터가 움직이는 캔버스를 생성합니다.

     - 장애물이 지나가는 캔버스를 생성 합니다.


    2. 캔버스 1개를 활용하는 방법

     - 전체를 계속 지우고 그리기를 병행합니다.


    캔버스는 아시다시피, 객체(Object) 가 존재하지 않습니다.

    순수한 그림으로써의 영역만 존재합니다.

    그러므로 모든 이벤트, 데이터는 각종 객체 및 배열로 관리 되어야 합니다.

    아래 블로그를 참조하시면 캔버스 이벤트와 관련된 내용을 좀 더 쉽게 적용할 수 있습니다.

    https://lts0606.tistory.com/273

  • JhsK
    163
    2020-11-08 12:12:16

    @마샤와곰

    아.. 그렇군요 캔버스2개를 활용하는 방법은 왜 생각을 못 했을까요 ㅠㅠ

    배열로 관리 되어야 한다는 말씀 명심하면서 알려주신 블로그도 잘 참고하겠습니다. 

    도움주셔서 감사합니다!

  • 로그인을 하시면 답변을 등록할 수 있습니다.