패밀리 서비스

전체

루트 공지사항 Q&A

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

'끝말잇기'부터 '테트리스'까지! 실제로 동작하는 웹 게임을 개발하며 쉽고 재밌게 자바스크립트를 배울 수 있는 강의입니다.

클래스 소개

난이도

쉬움

카테고리

웹 프로그래밍 - 프로그래밍

태그

자바스크립트

수료증

발급 가능

추천 학습대상

- 자바스크립트를 처음 접하는 입문자분들
- 초보자에게 유용한 자바스크립트 꿀팁을 알고 싶은 누구나
- 자바스크립트를 활용해 웹 게임을 개발하고 싶은 누구나
- 자바스크립트라는 새로운 언어를 좀 더 쉽고 빠르게 배우고 싶은 분
- 지루한 이론보다 유용한 꿀팁을 많이 챙기고 싶은 분

🎮Node.js 교과서 저자 ZeroCho 님과 함께 하는 자바스크립트 웹 게임 개발🎮

- 게임 좋아하면 Pick! 쉽게 배울 수 있는 자바스크립트 -

🤔자바스크립트?

🧚‍♀작고 가볍지만 웹을 풍부하게 만들어주는 요정 같은 언어 자바스크립트! 자바스크립트는 미국 넷스케이프 커뮤니케이션즈에서 개발한 스크립트 언어입니다. 스크립트 언어는 컴파일이 필요하지 않아요. 그렇기 때문에 자바스크립트로 작성한 스크립트를 HTML 웹 페이지에 삽입하기만 해도 다양한 기능들이 동작합니다.

💖최근에는 구글과 마이크로소프트에서 지원하는 프레임워크 AngularJs, 영미권 개발자들의 견고한 사랑을 받고 있는 라이브러리 React와 중화권의 떠오르는 프레임워크 vue.js까지 다양하게 확장되고 사랑받고 있습니다. 서버측 자바스크립트인 node.js와 자바스크립트에 친화적인 데이터베이스인 MongoDB까지 겸한다면 오로지 자바스크립트 하나로 웹을 구현할 수 있죠.

🙌웹 사이트, 웹앱뿐만 아니라 모바일 앱, 데스크탑 프로그램까지 만들 수 있도록 성장하고 있는 자바스크립트! 점차 활용도가 높아지는 자바스크립트를 웹 게임 개발과 함께 시작해보시겠어요?

📑수업 소개

🎳본 강의는 동영상 강의로 진행되는 자바스크립트 웹 게임 개발 강좌입니다. 본 강의을 끝까지 수강하시면, 자바스크립트 사용법을 배울 수 있을 뿐만 아니라 실제로 동작하는 여러 가지 웹 게임을 개발할 수 있습니다.

🐣프로그래밍에 대한 기초 지식이 부족한 분들도 무리 없이 수강할 수 있도록 입문자의 눈높이에 맞춰 진행되는 강좌입니다. 수강자들과 소통하며 강좌를 진행하는 ZeroCho 님과 함께 자바스크립트의 기초를 다져보세요. 쉬운 이론 설명과 다양한 질문 답변을 통해 나만의 웹 게임을 만들어보세요!

✍강의자 소개

조현영

前 바리엘 그리에이티브 프론트엔드 개발자
前 myFit 개발 총괄 CTO
node.js 교과서 저자 (길벗출판사)
오픈소스와 자바스크립트가 미래라고 외치는 강의자 현영 님은 누구보다도 공부와 개발을 즐깁니다. 블로그(www.zerocho.com)의 디자인부터 개발까지 모두 직접 하셨을 뿐만 아니라 GitHub을 통한 오픈소스 공유, 도서 집필 등 왕성한 활동을 이어오고 있습니다.

체험하기

모두 펼치기

01
1. 자바스크립트 기초와 끝말잇기

1-1. 자바스크립트란?

체험하기

1-2. 값: 숫자, 문자, 불린

체험하기

07
7. 가위바위보

7-1. 가위바위보(이미지 스프라이트)

체험하기

10
10. 틱택토 심화

10-1. 틱택토(컴퓨터의 턴)

체험하기

12
12. 자스스톤

12-3. 자스스톤 화면 세팅하기

체험하기

교육 과정

모두 펼치기

01
1. 자바스크립트 기초와 끝말잇기

1-1. 자바스크립트란?

체험하기

1-2. 값: 숫자, 문자, 불린

체험하기

1-3. 연산자

1-4. 비교 연산자

1-5. 변수(var)

1-6. null, undefined

1-7. 조건문(if)

1-8. 반복문(while)

1-9. 복습 & 연산자 심화

1-10. 함수

1-11. 문자열 심화

1-12. else if

1-13. 반복문(for)

1-14. 끝말잇기 구현

02
2. 객체 기본과 구구단 게임

2-1. 반복문 연습: 별찍기

2-2. 객체 기본

2-3. 객체의 속성

2-4. 배열 기본

2-5. 구구단 구현하기

03
3. 웹 화면 구현

3-1. window 객체

3-2. document 객체와 DOM

3-3. script 태그 사용법

3-4. JS로 HTML 태그 만들기

3-5. 끝말잇기 화면에 표시하기

3-6. 이벤트 리스너 맛보기

3-7. 구구단 화면 만들기

04
4. 숫자야구

4-1. 비동기 & 숫자야구 순서도

4-2. 배열 push, pop, shift, unshift

4-3. 배열 splice

4-4. 배열 split & join

4-5. indexOf & 숫자야구 구현하기

4-6. 리팩토링 & 개념 복습

05
5. 틱택토

5-1. 틱택토 순서도 & 화면

5-2. 이차원 배열

5-3. e.target과 parentNode

5-4. 틱택토 구현하기

5-5. forEach와 중첩 반복문

06
6. 로또 추첨기

6-1. 로또추첨기 Array & fill

6-2. 배열 map 메서드

6-3. 배열 slice & sort

6-4. JS로 HTML 태그 선택하기

6-5. JS로 CSS 조작하기

6-6. 로또추첨기 마무리 & querySelector

07
7. 가위바위보

7-1. 가위바위보(이미지 스프라이트)

체험하기

7-2. 딕셔너리 자료구조

7-3. Object, entries, find, findIndex

7-4. setTimeout, clearTimeout

7-5. 가위바위보 규칙 찾기

7-6. 변수를 사용해 중복 제거하기

08
8. 지뢰찾기

8-1. 지뢰찾기 기본 화면

8-2. 지뢰 심기

8-3. 우클릭으로 깃발 꼽기

8-4. target vs e.currentTarget

8-5. 물음표와 중간 정리

8-6. 주변 지뢰 개수 세기

8-7. 스코프

8-8. 스코프 체인

8-9. 렉시컬 스코프

8-10. 클로저

8-11. 클로저 문제 해결법

8-12. 주변 칸 한 번에 열기(재귀)

8-13. 재귀 코드 효율 개선하기

8-14. 에러 잡아내기

8-15. 데이터 딕셔너리로 정리

8-16.잔여 버그 해결하기

09
9. 반응속도 테스트

9-1. 반응속도 테스트

9-2. 시간 체크와 예약어

9-3. 호출 스택(call stack)

9-4. 타이머 제거하기

9-5. 재귀, 비동기와 호출 스택

10
10. 틱택토 심화

10-1. 틱택토(컴퓨터의 턴)

체험하기

10-2. 틱택토 리펙토링

10-3. 승리와 무승부 메시지

11
11. 카드 짝맞추기 게임

11-1. 카드 뒤집기 구현

11-2. 카드 색 부여하기

11-3. 카드 짝 맞추기

11-4. 게임 초기화

11-5. 참조와 복사

11-6. 복사하는 방법

11-7. 깊은 복사

11-8. 팩토리 패턴과 프로토타입

11-9. 프로토타입을 사용하는 이유

11-10. Object.create()

12
12. 자스스톤

12-1. call by value, call by reference, call by sharing

12-2. 생성자와 new

12-3. 자스스톤 화면 세팅하기

체험하기

12-4. 자스스톤 스크립트 초기 세팅하기(진입점)

12-5. cloneNode와 생성자 활용

12-6. 리팩토링과 진입점 함수의 중요성

12-7. 쫄병카드 코스트에 맞춰 뽑기

12-8. 턴 넘기기

12-9. 리팩토링과 삼항연산자

12-10. 필드 카드 선택과 턴 오버

12-11. 카드끼리 치고 받고 싸우기

12-12. 죽은 카드 정리하기

12-13. 자스스톤 마무리와 최종 리팩토링

12-14. 코드 깔끔하게 작성하기

13
13. 2048

13-1. 2048 게임 기본 세팅하기

13-2. mousedown, mouseup, mousemove

13-3. 드래그 방향 판단하기

13-4. 드래그에 따라 숫자 이동하기

13-5. 숫자 합쳐서 두 배로 만들기

13-6. 게임 오버와 핵심 정리

14
14. 테트리스

14-1. 테트리스 세팅과 switch문

14-2. keyup, keydown, keypress

14-3. 테트리스 블록 데이터 만들기

14-4. 테트리스 블록 화면에 표시

14-5. 내려가는 테트리스 만들기

14-6. 호출 스택과 이벤트 루프

14-7. ES2015 const, let, 화살표 함수

14-8. 테트리스 블록 생성, 그리기

14-9. 한 칸씩 내리기, 가득 찬 줄 지우기

14-10. 테트리스 좌우 이동, 회전, 하강하기

14-11. 테트리스 및 웹 게임 강의 마무리

마지막 업데이트|2019년 01월 22일

선생님 소개

조현영캡틴

안녕하세요. 구름에듀 캡틴 조현영입니다. 함께 학습을 시작해봐요!

클래스 후기

무료

평균평점

4.9

난이도

쉬움

학습기간

평생 무제한