인프런 업데이트 소식 🔨👷🏼‍♂️
웹 게임을 만들며 배우는 자바스크립트

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

(8개의 수강평)

2176명의 수강생

무료

평생
초급
114회 수업, 총 22시간 3분
 

웹 게임 개발 자바스크립트

자바스크립트 게임 개발! 자바스크립트는 컴퓨터에 명령할 때 사용하는 언어 중 하나입니다. 과거에는 웹사이트를 만드는 데에만 국한되었다면 현재는 웹앱, 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
자바스크립트 프로그래밍이란?
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 강의 76 : 39
반복문 연습: 별찍기
21 : 54
객체 기본
10 : 18
객체의 속성
12 : 28
배열 기본
12 : 09
구구단 구현
19 : 50
섹션 2. 웹 화면 구현
7 강의 71 : 08
window 객체
12 : 12
document 객체와 DOM
05 : 14
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
로또추첨기 Array & fill
10 : 12
배열 map 메서드
10 : 52
배열 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
지뢰찾기 기본 화면
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 강의 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
카드 뒤집기 구현
09 : 47
카드 색 부여하기
07 : 02
카드 짝 맞추기
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년 6월 7일)

수강 후기

5.0
8개의 수강평
Break Day (Day Break) 8달 전
역시 제로초님.. 이런 멋진 강좌를 무료로 풀어주시다니... 너무 감사합니다. 열심히 보겠습니다!
ChannyQ 1달 전
실제로 프로그램을 만들어가면서 배우니까 성취감도 생기는 좋은 강의