웹 게임 개발 자바스크립트

자바스크립트 게임 개발! 자바스크립트는 컴퓨터에 명령할 때 사용하는 언어 중 하나입니다. 과거에는 웹사이트를 만드는 데에만 국한되었다면 현재는 웹앱, Desktop 프로그램을 만드는 데에도 활용되고 있습니다. 인스타그램과 페이스북 등의 앱 일부를 만드는 데에도 활용됩니다.

본 강의에서는 자바스크립트를 배우며 프로그래밍하는 연습을 할 것입니다. 웹 게임인 구구단을 시작으로 끝말잇기, 숫자 야구, 틱택토, 로또 추첨기, 가위바위보, 지뢰 찾기, 카드 짝맞추기 게임, 자스스톤, 2048 게임, 테트리스까지 함께 만들어봅시다. 소스 코드는 https://github.com/zerocho/webgame-lecture

학습 목표

자바스크립트 문법을 배운다.
프로그래밍 사고를 갖춘다.

도움이 되는 분들

Javascript 개발 입문자
웹 프론트엔드 개발 입문자
Javascript를 활용해 웹 게임을 개발하고 싶은 분

지식공유자 소개

조현영

– Node.js교과서 저자 – ZeroCho.com 운영자 – 스타트업 CTO

지식공유자 소개

조현영

– Node.js교과서 저자
– ZeroCho.com 운영자
– 현재 유튜브에서 ZeroChoTV로 방송중
– 전 스타트업 CTO

교육과정

모두 펼치기 114 강의 22시간 3분

섹션 0. 자바스크립트 기초와 끝말잇기

14 강의 152 : 57

연산자

09 : 40

비교 연산자

07 : 20

변수(var)

14 : 35

null, undefined

10 : 52

조건문(if)

09 : 08

반복문(while)

12 : 23

복습 & 연산자 심화

10 : 03

함수

10 : 24

문자열 심화

05 : 21

else if

08 : 18

반복문(for)

14 : 52

끝말잇기 구현

21 : 27

섹션 1. 객체 기본과 구구단 게임

5 강의 76 : 39

객체의 속성

12 : 28

배열 기본

12 : 09

구구단 구현

19 : 50

섹션 2. 웹 화면 구현

7 강의 71 : 08

script 태그 사용법

10 : 23

JS로 HTML 태그 만들기

10 : 30

끝말잇기 화면에 표시하기

12 : 21

이벤트 리스너 맛보기

10 : 13

구구단 화면 만들기

10 : 15

섹션 3. 숫자야구

6 강의 63 : 30

비동기 & 숫자야구 순서도

12 : 36

배열 push, pop, shift, unshift

09 : 05

배열 splice

09 : 57

배열 split & join

13 : 05

indexOf & 숫자야구 구현

14 : 06

리팩토링 & 개념 복습

04 : 41

섹션 4. 틱택토

5 강의 70 : 54

틱택토 순서도 & 화면

15 : 19

이차원 배열

12 : 41

e.target과 parentNode

13 : 00

틱택토 구현

16 : 28

forEach와 중첩 반복문

13 : 26

섹션 5. 로또 추첨기

6 강의 66 : 41

배열 slice & sort

10 : 55

JS로 HTML 태그 선택하기

10 : 18

JS로 CSS 조작하기

14 : 02

로또추첨기 마무리 & querySelector

10 : 22

섹션 6. 가위바위보

6 강의 64 : 35

가위바위보(이미지 스프라이트)

13 : 32

딕셔너리 자료구조

08 : 06

Object, entries, find, findIndex

12 : 44

setTimeout, clearTimeout

11 : 16

가위바위보 규칙 찾기

08 : 43

변수를 사용해 중복 제거하기

10 : 14

섹션 7. 지뢰찾기

16 강의 190 : 51

우클릭으로 깃발 꼽기

20 : 17

target vs e.currentTarget

03 : 24

물음표 기능과 중간 정리

10 : 01

주변 지뢰 개수 세기

11 : 24

스코프

12 : 57

스코프 체인

07 : 44

렉시컬 스코프

15 : 10

클로저

17 : 40

클로저 문제 해결법

11 : 18

주변 칸 한 번에 열기(재귀)

11 : 35

재귀 코드 효율 개선하기

09 : 37

에러 잡아내기

11 : 08

데이터 딕셔너리로 정리

10 : 21

남은 버그 해결하기

09 : 16

섹션 8. 반응속도 테스트

5 강의 64 : 22

반응속도 테스트

11 : 04

시간 체크와 예약어

15 : 58

호출 스택(call stack)

16 : 19

타이머 제거

10 : 52

재귀, 비동기와 호출 스택

10 : 09

섹션 9. 틱택토 심화

3 강의 30 : 56

틱택토(컴퓨터의 턴)

14 : 37

틱택토 리펙토링

08 : 40

승리와 무승부 메시지

07 : 39

섹션 10. 카드 짝맞추기 게임

10 강의 88 : 12

카드 짝 맞추기

08 : 00

게임 초기화

08 : 39

참조와 복사

07 : 05

복사하는 방법

12 : 16

깊은 복사

09 : 02

팩토리 패턴과 프로토타입

12 : 22

프로토타입을 쓰는 이유

07 : 03

Object.create()

06 : 56

섹션 11. 자스스톤

14 강의 180 : 03

call by value, call by reference, call by sharing

14 : 41

생성자와 new

10 : 58

자스스톤 화면 세팅

15 : 06

자스스톤 스크립트 초기 세팅(진입점)

14 : 55

cloneNode와 생성자 활용

09 : 10

리팩토링과 진입점 함수의 중요성

07 : 05

쫄병카드 코스트에 맞춰 뽑기

17 : 15

턴 넘기기

17 : 08

리팩토링과 삼항연산자

14 : 17

필드 카드 선택과 턴 오버

15 : 36

카드끼리 치고 받고 싸우기

16 : 08

죽은 카드 정리하기

09 : 14

자스스톤 마무리와 최종 리팩토링

11 : 25

코드 깔끔하게 작성하기

07 : 05

섹션 12. 2048 게임

6 강의 76 : 43

2048 게임 기본 세팅

08 : 51

mousedown, mouseup, mousemove

08 : 35

드래그 방향 판단하기

10 : 45

드래그에 따라 숫자 이동하기

17 : 26

숫자 합쳐서 두 배로 만들기

24 : 33

게임 오버와 핵심 정리

06 : 33

섹션 13. 테트리스

11 강의 126 : 21

테트리스 세팅과 switch문

09 : 07

keyup, keydown, keypress

03 : 48

테트리스 블록 데이터 만들기

08 : 55

테트리스 블록 화면에 표시

09 : 19

내려가는 테트리스 만들기

16 : 30

호출 스택과 이벤트 루프

18 : 41

ES2015 const, let, 화살표 함수

14 : 19

테트리스 블록 생성, 그리기

13 : 49

한 칸씩 내리기, 다 찬 줄 지우기

15 : 38

테트리스 좌우 이동, 내리기, 회전

09 : 13

테트리스 및 웹게임 강좌 마무리

07 : 02

공개 일자

2019년 1월 15일 (마지막 업데이트 일자 : 2019년 2월 7일)

수강 후기

5.0

9개의 수강평

5점

4점

3점

2점

1점

ChannyQ 2달 전

실제로 프로그램을 만들어가면서 배우니까 성취감도 생기는 좋은 강의

YJ Ginter 2달 전

자바스크립트를 그동안 그냥 문법만 배워서 어떻게 활용해야할지 막막했는데 이 강의 듣고 자바스크립트 문법 뿐만 아니라 프로그래밍적으로 사고하는 방법이랑 자바스크립트 문법을 활용하는 법을 가르쳐줍니다.

웹 게임을 만들며 배우는 자바스크립트

웹 게임 개발 자바스크립트

학습 목표

도움이 되는 분들

지식공유자 소개

지식공유자 소개

조현영

교육과정

공개 일자

수강 후기

9개의 수강평