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

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

(4개의 수강평)
1367명의 수강생

무료

조현영
평생
초급
114개 수업, 총 22시간 3분
조현영의 다른 강좌들
 

웹 게임 개발 자바스크립트

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

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

 학습 목표

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

 도움이 되는 분들

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

지식공유자 소개

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

지식공유자 소개

조현영

교육과정

자바스크립트 기초와 끝말잇기
자바스크립트 프로그래밍이란?
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
객체 기본과 구구단 게임
반복문 연습: 별찍기
21 : 54
객체 기본
10 : 18
객체의 속성
12 : 28
배열 기본
12 : 09
구구단 구현
19 : 50
웹 화면 구현
window 객체
12 : 12
document 객체와 DOM
05 : 14
script 태그 사용법
10 : 23
JS로 HTML 태그 만들기
10 : 30
끝말잇기 화면에 표시하기
12 : 21
이벤트 리스너 맛보기
10 : 13
구구단 화면 만들기
10 : 15
숫자야구
비동기 & 숫자야구 순서도
12 : 36
배열 push, pop, shift, unshift
09 : 05
배열 splice
09 : 57
배열 split & join
13 : 05
indexOf & 숫자야구 구현
14 : 06
리팩토링 & 개념 복습
04 : 41
틱택토
틱택토 순서도 & 화면
15 : 19
이차원 배열
12 : 41
e.target과 parentNode
13 : 00
틱택토 구현
16 : 28
forEach와 중첩 반복문
13 : 26
로또 추첨기
로또추첨기 Array & fill
10 : 12
배열 map 메서드
10 : 52
배열 slice & sort
10 : 55
JS로 HTML 태그 선택하기
10 : 18
JS로 CSS 조작하기
14 : 02
로또추첨기 마무리 & querySelector
10 : 22
가위바위보
가위바위보(이미지 스프라이트)
13 : 32
딕셔너리 자료구조
08 : 06
Object, entries, find, findIndex
12 : 44
setTimeout, clearTimeout
11 : 16
가위바위보 규칙 찾기
08 : 43
변수를 사용해 중복 제거하기
10 : 14
지뢰찾기
지뢰찾기 기본 화면
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
반응속도 테스트
반응속도 테스트
11 : 04
시간 체크와 예약어
15 : 58
호출 스택(call stack)
16 : 19
타이머 제거
10 : 52
재귀, 비동기와 호출 스택
10 : 09
틱택토 심화
틱택토(컴퓨터의 턴)
14 : 37
틱택토 리펙토링
08 : 40
승리와 무승부 메시지
07 : 39
카드 짝맞추기 게임
카드 뒤집기 구현
09 : 47
카드 색 부여하기
07 : 02
카드 짝 맞추기
08 : 00
게임 초기화
08 : 39
참조와 복사
07 : 05
복사하는 방법
12 : 16
깊은 복사
09 : 02
팩토리 패턴과 프로토타입
12 : 22
프로토타입을 쓰는 이유
07 : 03
Object.create()
06 : 56
자스스톤
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
2048 게임
2048 게임 기본 세팅
08 : 51
mousedown, mouseup, mousemove
08 : 35
드래그 방향 판단하기
10 : 45
드래그에 따라 숫자 이동하기
17 : 26
숫자 합쳐서 두 배로 만들기
24 : 33
게임 오버와 핵심 정리
06 : 33
테트리스
테트리스 세팅과 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

수강 후기

5.0
4개의 수강평
 이상효 1달 전
개념으로만 보는것 보다 이해가 쉽고 결과물이 있으니 재밌습니다 HTML과 CSS를 먼저 학습하시고 보시면 좀 더 많은 도움이 될 것 같습니다!
 냉면 1달 전
인프런 내, 혹은 타 플랫폼 내 자바스크립트 기본강좌 구매하실 필요 없습니다. 이 강의가 최고입니다. 중간중간에 타 유료 강의에서나 들을 수 있는 설명들과 많은 실습을 통해 발전할 수 있습니다.
 kyunghee song 1달 전
정말 정말 도움이 많이됩니다! 직겁 자바스크립트 코드를 작성하는게 많이 힘들었는데 강의 들으면서 어느 정도 정리가 되어가는 것 같습니다! 학원에서 배우는 것보다 훨씬 도움이 됩니다!!
 Break Day (Day Break) 5달 전
역시 제로초님.. 이런 멋진 강좌를 무료로 풀어주시다니... 너무 감사합니다. 열심히 보겠습니다!