방금 전에 게임 배경화면 띄우기 성공해서 기분 좋아져서 쓰는 블로그~
하면서 중간중간 정리를 해줘야 나중에 고생을 안 할거 같아서 미리미리 써봅니다 룰루~♬

게임만들기 미션 목록 두둥!

  1. 바탕화면 깔기
  2. 히어로를 가운데서시작하도록
  3. 키이벤트 -> 좌우 누를때 히어로 움직이게
  4. 바탕화면 끝 도달하면 더이상 움직이지 않도록
  • 아래는 아마 추가미션?
  1. 귀신 하늘에서 시작하도록
  2. 랜덤한 x의 위치에서 나와야죠
  3. setinterval로 귀신 시작한 위치에서 y를 아래로 내려주시면 됩니다

html : canvas

canvas는 js로 그래픽을 그려주는 html 요소.
html파일을 살펴보면 canvas는 width와 height 두 가지 속성만 가지고 있다! 이렇게 뙇~
<canvas id="canvasBg" width="800" height="600"></canvas>
(처음에 속성을 정의해주지 않으면 기본 사이즈는 300*150 이라고 한다~)

캔버스 부분은 쪼꼼 복잡해서 게임 만들기 과제에선 이미 양식이 주어졌다!
내가 첫번째로 미션은 캔버스의 이미지를 불러오는 것..!

bgImg.src = "images/bg.png";
let bgImg = new Image();

기본 설정 js 파일을 살펴보면 bgImg의 파일을 src로 불러오고, 선언자를 이용해 new Image() 함수를 불러왔다.

function init() {
  //canvas에 배경이미지 그려주기
  ctxBg.drawImage(bgImg, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight);

  initEnemies();

  //매 frame 마다 사용할 함수를 호출합니다.
  requestAnimFrame(loop);
}

이 함수에 이벤트를 연결해서 이미지를 띄우는게 첫번째 미션!
아직 이벤트 부분이 약해서.. 여러 번의 시도 끝에 성공쓰!

canvas와 js 이벤트를 이어주기 위해선 순서가 중요하다.

Note: You cannot call the drawImage() method before the image has loaded. To ensure that the image has been loaded, you can call drawImage() from window.onload() or from document.getElementById("imageID").onload.

그리하여 시작된 이상한 시도들..

  • 1차시도
    window.onload = init()
    보통 사람들이 하는 방식대로 해봤는데.. 저건 익명함수가 아니라서 저 방식은 안되고...!
  • 2차시도
    document.addEventListener('load', init) document.addEventListener('DOMcontentLoaded', init())
    event가 걸리는 대상은 캔버스 이미지이지만, 엉뚱하게 document를 소환했다.
  • 3차시도
    bgImg.addEventListener('load', init)
    드디어 성공쓰!
    게임게임.PNG
    위치는 init의 위나 아래나 딱히 상관 없는것 같다.

앗 나의 실수! 이게 아니라 다른 게임이 과제였다

쓴 게 아까우니까 저건 일단 냅둬야겠다 ㅎ 언젠간 캔버스 기능을 쓸때가 있겠지~
조금 더 쉬워진 이미지 불러오기! html에 png 파일을 불러서 js에서 body에 붙여버렸다!

let bg_img = document.getElementsByClassName('bg_img')[0]
document.body.appendChild(bg_img)

--> html에 bg_img로 이미 이미지를 불러왔을때! (이미 이미지 라임 굿)

그러면 이렇게 배경화면이 뙇! 다른 방법도 있다 사실..

js - new Image()

let bg_img = new Image()
bg_img.src = './images/bg.png'
document.body.appendChild(bg_img)

나는 이미 길이가 (800,600)으로 주어진 이미지를 불러오는 거라서 빈 괄호로 했지만
크기를 바꾸고 싶다면 괄호 안에 (width, height) 값을 집어 넣어주면 된다!
랄랄라.PNG

이미지를 js파일에 곧바로 불러오는 방법이 궁금했는데 이런 방법이 있었다니!!
이제 용사를 불러와야 하는데.. 나의 용사는 머리가 넷이다.. 이미지를 잘라서 하나로 만들어줘야한다
그래서 얘를 잘라주려면 또 신박한 방법을 써야 하는데..
그것은 다음번 포스팅에 이어서...☆

우분투 까는걸 시도하는데... 내 그램이 자꾸 용량은 충분하지만 축소할 용량이 없다고..
포맷을 하는 방법밖에 없어서 너무너무너무 속상하다 지금 ㅠㅠ
포맷한지 얼마 안되서 자료는 별로 없지만 또다시 지워야 한다니 힘빠진다 ㅜㅜㅠ

클래스 정리 해놓은건 아쉽지만 다음 기회에!

Reference

https://www.w3schools.com/tags/canvas_drawimage.asp (W3school)
https://blog.teamtreehouse.com/learn-asynchronous-image-loading-javascript (누구블로그)
https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image (MDN)
https://developer.mozilla.org/ko/docs/Web/HTML/Canvas/Tutorial/Basic_usage (MDN)