[💬] 순수 자바스크립트만으로 웹게임을 만들자! -2편-

[전혀(jenjenp)]

지난편에서는 자바스크립트를 사용한 웹 게임 프로그래밍에 대한 소개와

개발을 시작하기 위한 준비과정에 대하여 설명하였다, 이번 편 부터는 본격적으로

자바스크립트를 사용한 웹 게임 프로그래밍 기법에 대하여 다뤄보겠다

4.그래픽 자원 가져오기 및 참조권한 생성

우선 게임에 사용할 그래픽 자원들을 프로그램에 가져오는 작업을 실행하도록 하자

온니 텍스트 게임을 만들게 아닌 이상 게임 프로그램에 그래픽 자원은 반드시 필요하기

때문이다 우선 빈 폴더를 하나 만들고 그곳에 지난번에 작성했던 html 파일과

사용하고싶은 이미지 파일(png 형식을 권장) 하나를 넣어놓자

<image_3>

그 후 html 문서의 연결 프로그램을 사용할 텍스트 에디터로 바꾸고

해당 html 문서의 코드 편집창을 열어서 아래의 코드를 추가시켜주자

붉게 표시한 부분이 새로 추가되는 코드이다

<image_4>

해당 코드를 추가한 html 파일을 열면 위의 사진처럼 이미지가 창 안에 표시되는 것을

확인할 수 있을것이다, 이제 추가한 두 줄의 코드를 자세하게 살펴보자

위의 코드는 html5 코드이다 이처럼 웹 프로그램에 사용될 이미지 자원을 가져오는 역할

또한 html5가 담당한다. 위의 html5코드에서는 해당 그래픽 자원을 자바스크립트로 참조할 때

사용되는 img id값과 경로를 명시하는 src값, 부가적인 특성을 지정하는 style값,x좌표값을

표시하는 vspace 값을 설정하고 있다  style에 설정된 " absolute" 값은 해당 그래픽

자원이 다른 그래픽 자원의 위치에 상관 없이 자유롭게 배치될 수 있도록 해준 설정이며

가져올 모든 그래픽 자원의 style값을 전부 "postion: absolute"로 설정한 경우에만 유효하므로

이미지 자원을 가져올때는 반드시 style 값을 위의 코드와 같이 지정해주어야 한다

vspace값은 앞서 말하였듯이 해당 그래픽 자원의 x좌표값과 관련된 속성이다, 참고로 y좌표값과

관련된 속성은 "hspace"이다

스크립트 구역에 새로 넣은 자바스크립트 코드에서는

ex_img1_1속성을 선언하고 그 속성의 값을 두커멘트의 getElementByld

함수를 "ex_img"를 인자로 하여 호출한 반환값으로 지정하고 있다

풀어 말하자면 ex_img1 속성을 통하여 위의 코드에서 설정한 그래픽 자원을

참조하고 활용할 수 있도록 만들었다는 뜻이다, 다음 편에서는 그래픽 자원들과

특정 함수들을 활용하여 애니메이션적인 표현을 구현하는 방법에 대하여 다뤄보겠다

[고고퍼(110.8)]

이런 식보단 캔버스를 써야하지 않을까요...

[정뮤(whdrjs1)]

내가 엔진없이 웹게임 간단하게 만들어봤는데 그냥 삽질이더라.... - dc App

[익명(124.60)]

그래서 1편에서 리무브는 사실 머엿조?