Javascript로 게임 만들기

허규남

왜 javascript를 사용할까?

• 쉬운 난이도

• 범용성(크롬만 있으면 어디서든 사용가능)

• 대부분의 웹게임에는 javascript가 들어갔다고 보면 됨

목차

1. CodingNinja(발표자가 만든 게임)

2. 기본 문법 설명

3. HTML 접근 방법

4. 그리기

5. 반복 그리기

6. 제작자가 사용한 툴

1. CODING NINJA

발표자 본인이 JS를 통해 직접 만든 게임

Coding Ninja

• https://codingninja-1bdda.firebaseapp.com/

2. 기본 문법 설명

함수, 객체 선언법

Javascript로 함수 선언하기

• https://www.w3schools.com/js/tryit.asp?filename=tryjs_functions

function 함수이름(매개변수) {return 반환값;

}

Javascript로 객체선언하기

• https://www.w3schools.com/js/tryit.asp?filename=tryjs_objects_object

var 변수이름 = {변수속성:변수값};

디버깅하기

• Console.log(원하는값)

• ‘…’ -> 도구더보기 -> 개발자도구 -> console탭

3. HTML 접근 방법

Id를 통해 태그에 접근

• https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_document_getelementbyid

Document.getElementById(태그id)

시작 함수

• https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onload

• 시작 시 해당 함수를 실행하도록 함

키 입력 함수

• https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onkeydown

• 키 입력 시 해당 함수 출력

4. 그리기

Javascript로 그림그리기

• https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_drawimage

• canvas태그 내에서 그림을 그린다

태그 없이 그림그리기

• http://stackoverflow.com/questions/18907504/javascript-image-doesnt-load-or-draw

• 이미지를 로드하는 데 시간이 걸려서 생기는문제

• Image.onload = 그림그리는함수

5. 반복그리기

타이머를 사용한다

Timer(=Thread)

• 매 초마다 특정 함수를 실행하게 함.

Timer 사용해보기

• https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_setinterval

• var timerID=setInterval("update()", 500);

• clearInterval(timerID);//timer 종료

6. 제작자가 사용한 툴

메모장에서 작업 후 크롬으로 실행

그 외 기타 툴

• Notepad++

• Eclipse