[무료] 웹 게임을 만들며 배우는 자바스크립트 - 인프런

BEST 개발 · 프로그래밍 게임 개발

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

(4.8)67개의 수강평 ∙ 7449명의 수강생

조현영

JavaScript 게임개발

무료

지식공유자 : 조현영

총 114개 수업˙총 22시간 3분

평생 무제한 수강

수료증 미발급 강의

입문 초급 대상 중급이상

이 강의는 멘토링 신청이 가능합니다.

멘토링은 수강 신청과 별개로 운영되며, 수강생이 아니어도 신청할 수 있습니다.

내 목록 추가

초급자를 위해 준비한
[게임 개발, 프로그래밍 언어] 강의입니다.

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

웹 게임 개발 자바스크립트

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

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

학습 목표

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

도움이 되는 분들

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

지식공유자 소개

조현영

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

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

– 글로벌SW전담개발자

이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.

섹션 0. 자바스크립트 기초와 끝말잇기 14강 ∙ 2시간 32분

자바스크립트 프로그래밍이란? 미리보기 10:40 값: 숫자, 문자, 불린 미리보기 07:54

연산자 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강 ∙ 1시간 16분

반복문 연습: 별찍기 미리보기 21:54 객체 기본 미리보기 10:18

객체의 속성 12:28

배열 기본 12:09

구구단 구현 19:50

섹션 2. 웹 화면 구현 7강 ∙ 1시간 11분

window 객체 미리보기 12:12 document 객체와 DOM 미리보기 05:14

script 태그 사용법 10:23

JS로 HTML 태그 만들기 10:30

끝말잇기 화면에 표시하기 12:21

이벤트 리스너 맛보기 10:13

구구단 화면 만들기 10:15

섹션 3. 숫자야구 6강 ∙ 1시간 3분

비동기 & 숫자야구 순서도 12:36

배열 push, pop, shift, unshift 09:05

배열 splice 09:57

배열 split & join 13:05

indexOf & 숫자야구 구현 14:06

리팩토링 & 개념 복습 04:41

섹션 4. 틱택토 5강 ∙ 1시간 10분

틱택토 순서도 & 화면 15:19

이차원 배열 12:41

e.target과 parentNode 13:00

틱택토 구현 16:28

forEach와 중첩 반복문 13:26

섹션 5. 로또 추첨기 6강 ∙ 1시간 6분

로또추첨기 Array & fill 미리보기 10:12 배열 map 메서드 미리보기 10:52

배열 slice & sort 10:55

JS로 HTML 태그 선택하기 10:18

JS로 CSS 조작하기 14:02

로또추첨기 마무리 & querySelector 10:22

섹션 6. 가위바위보 6강 ∙ 1시간 4분

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

딕셔너리 자료구조 08:06

Object, entries, find, findIndex 12:44

setTimeout, clearTimeout 11:16

가위바위보 규칙 찾기 08:43

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

섹션 7. 지뢰찾기 16강 ∙ 3시간 10분

지뢰찾기 기본 화면 미리보기 11:26 지뢰 심기 미리보기 17:33

우클릭으로 깃발 꼽기 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강 ∙ 1시간 4분

반응속도 테스트 11:04

시간 체크와 예약어 15:58

호출 스택(call stack) 16:19

타이머 제거 10:52

재귀, 비동기와 호출 스택 10:09

섹션 9. 틱택토 심화 3강 ∙ 30분

틱택토(컴퓨터의 턴) 14:37

틱택토 리펙토링 08:40

승리와 무승부 메시지 07:39

섹션 10. 카드 짝맞추기 게임 10강 ∙ 1시간 28분

카드 뒤집기 구현 미리보기 09:47 카드 색 부여하기 미리보기 07:02

카드 짝 맞추기 08:00

게임 초기화 08:39

참조와 복사 07:05

복사하는 방법 12:16

깊은 복사 09:02

팩토리 패턴과 프로토타입 12:22

프로토타입을 쓰는 이유 07:03

Object.create() 06:56

섹션 11. 자스스톤 14강 ∙ 3시간

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강 ∙ 1시간 16분

2048 게임 기본 세팅 08:51

mousedown, mouseup, mousemove 08:35

드래그 방향 판단하기 10:45

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

숫자 합쳐서 두 배로 만들기 24:33

게임 오버와 핵심 정리 06:33

섹션 13. 테트리스 11강 ∙ 2시간 6분

테트리스 세팅과 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년 01월 16일 (마지막 업데이트일 : 2019년 02월 07일)

수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.

4.8

67개의 수강평

5점

4점

3점

2점

1점

VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순

일반적인 책으로 언어를 공부하면 딱 언어에 대한 지식까지만 얻을 수 있는데, 이 강의는 자바스크립트로 내가 무엇을 할 수 있는지 배울 수 있습니다. 실제 결과물을 만들면서 공부하니 지루하지도 않고 재밌게 공부할 수 있습니다.

2019-12-27

역시 제로초님.. 이런 멋진 강좌를 무료로 풀어주시다니... 너무 감사합니다. 열심히 보겠습니다!

2019-01-20

자바스크립트 문법 강의 듣고 뭘 만들지? 어떻게 활용하지? 를 모를때 듣기좋은 강의 입니다.

2021-01-25

아직 절반밖에 보지않아, 완벽한 수강평을 남길 수는 없으나, 너무 감사해서 이렇게 먼저 수강평 남깁니다. 본래 3개월가량 생활xx에서 HTML - CSS- JS - Node - Express - DB 까지 사이클 돌면서 공부했습니다. 그리고 취업지원, 중급자바스크립트 서적들을 찾아보기 시작했습니다. 그러면서 깨닿게 되었는데, 아직 자바스크립트를 기초문법만 '이해만' 하는 수준 이더군요. "아직도 내가 기초도 잘 모르는 수준이라니.."하면서 꽤나 좌절했습니다. 소질이없나? 하고서요. 포기하려던 찰나, 제로초님 강의를 보게되었습니다. 많은 게임들을 만들며 배우니, 개념만 어느정도 이해를 가지고 있던게 이제 제 것이 되는 느낌을 확 받습니다. 생활xx에서 학습 하면서 코딩에 입문을하고 , 전체적인 맥락, 그리고 좁게나마 시야를 가질 수 있었다면, 제로초님 강의에서는 그것을 정말 내가 요리사가되어, 조리하는 법을 강의에서 배우고 있다는 느낌을 받습니다. "친한 친구, 형, 동생처럼 날 알려줄 사람은 없으려나?" "왜 내 코딩 실력이 안늘지?" "아는데 왜 못쓰지?" 하는 분들께 정말 좋은 강의가 될 것 같습니다. 아, 한가지 아쉬운 점은 유튜브에 있는 ES6 2020 강의와, 이 강의중 어떤걸 수강할지 처음 많이 고민했었는데 이 점 명확히 표기해주시면 더 좋을 것 같습니다.

2020-10-13

진호

다른 JS 강의도 10시간 이상이라 어떤걸 들어야하나 고민되었는데 좋은 후기 때문에 정하기 쉬워졌네요 고맙습니다

2020-11-21 0