이날은 우분투와 고군분투를 하느라 사실 별로 한 게 없다 ㅠㅠ 윈도우를 포맷하고, 파티션을 우분투한테 좀 나눠주고… 우분투 설치하고… 적응하고..또르륵..
여튼…! 이번 포스팅은 굉장히 짧다. 어쩔수없다~ 다음 번 포스팅은 좀 더 알찬 내용을 업데이트 할것이다!
게임만들기 미션 목록 두둥!
- 바탕화면 깔기
- 히어로를 가운데서시작하도록
- 키이벤트 -> 좌우 누를때 히어로 움직이게
- 바탕화면 끝 도달하면 더이상 움직이지 않도록
- 아래는 아마 추가미션?
- 귀신 하늘에서 시작하도록
- 랜덤한 x의 위치에서 나와야죠
- 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('DOMcontentLoaded', init())event가 걸리는 대상은 캔버스 이미지이지만, 엉뚱하게 document를 소환했다.
-
3차시도
bgImg.addEventListener('load', init)드디어 성공쓰!
위치는 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) 값을 집어 넣어주면 된다!
이미지를 js파일에 곧바로 불러오는 방법이 궁금했는데 이런 방법이 있었다니!! 이제 용사를 불러와야 하는데.. 나의 용사는 머리가 넷이다.. 이미지를 잘라서 하나로 만들어줘야한다 그래서 얘를 잘라주려면 또 신박한 방법을 써야 하는데.. 그것은 다음번 포스팅에 이어서…☆
번외편 : css - background
css는 진짜 파면 팔수록 너무 신기한 기능들이 많다! 나만 몰랐을수도 있지만… 나의 동기 가마니쓰가 한 방법도 한번 써보았다.
.bg{
background: url('./images/bg.png')
};이런 식으로 css에서 url을 불러오고 여기에 크기 설정 등등도 할 수 있다. 여태 html img 태그로 가져오는 방법만 알았는데 넘 신기쓰!!!!!
사실 우분투와 고군분투는 이 날 바로 끝나지 않았다.. 화요일에 외장하드에 파일 옮기고, 윈도우 다시 깔고, 우분투도 깔고 했다 ㅎ