자바스크립트로 게임만들기 #1.시작하기

[ 개요 ]

VSCode와 Chrome브라우저를 이용하여

웹게임만들기를 시작해보자.

* 순수 자바스크립트를 지향합니다.

(HTML/CSS/JS(es6)만 알아도 됨)

* 최대한 코드를 script태그에서 작성합니다.

(CSS조차도 불가피한것이 아니면 script에서 작성)

---

[ 진행과정 ]

1. 원하는 위치에 폴더를 생성한 후,

주소(경로)영역에 cmd를 입력하고 enter를 누른다.

2.cmd에서 code . 을 입력하고 enter를 누르면

VSCode가 실행되고,

해당 경로의 폴더를 초기위치로 잡는다.

3. 위와 같은 경고창이 표시되면,

"Yes, I trust the authors"를 누른다.

이후, Welcome 페이지는 닫는다.

* No를 누르면 기능이 제대로 동작하지 않음

4. 왼쪽 영역에서 아이콘을 클릭하여

"새로운 파일을 생성"한다.

(파일이름은 원하는이름.html으로 해준다.)

5. 코드입력이 완료되면, F5를 눌러서 실행한다.

* 처음 실행하면, debugger를 고르라고 하는데

원하는 브라우저를 선택해준다.

6. 실행이 완료되면 위와 같이 되는데

보통 사용하는 브라우저와 다른

별도의 브라우저로 실행하게 된다.

6-2. 또는 html파일을 사용하는 브라우저에

드래그&드랍(끌어다놓기)하여 실행되게 할 수 있다.

(* 그냥 끌어다놓으면 바로 실행되므로 훨씬 간편함)

7. 추가로 F12(개발자도구)를 통해서

코드 오류나 값 확인 등으로 작업을 보조할 수 있다.

8. VSCode에서 코드를 작성 완료하면

ctrl+s 단축키를 눌러서 저장하고,

브라우저에서 F5(새로고침)을 해주면

수정사항이 반영된다.

---

[ 코드 ]

(코드해석)

---

[ 추가자료 ]

링크1(curryyou.tistory.com)

→ Canvas 자동완성 관련

링크2(inpa.tistory.com)

→ VSCode 단축키 모음

링크3(namu.wiki) : Vanilla JS