로그인

웹 게임 개발 자바스크립트

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

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

소스 코드는 https://github.com/zerocho/webgame-lecture

 

 학습 목표

  • 자바스크립트로 웹 게임을 개발할 수 있다.

 도움이 되는 분들

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

조현영님이 만든 다른 강의

node.js

Node.js 교과서 - 기본부터 프로젝트 실습까지

4.4
가격 옵션 +
329

지식공유자 소개

조현영

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

강좌 평가

5

1 개의 수강평
  • 5 점1
  • 4 점0
  • 3 점0
  • 2 점0
  • 1 점0
  1. Break Day (Day Break)의 프로필 사진

    역시 제로초님..

    5

    이런 멋진 강좌를 무료로 풀어주시다니…
    너무 감사합니다.

    열심히 보겠습니다!

강좌 교육과정

자바스크립트 기초와 끝말잇기
자바스크립트 프로그래밍이란?학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:10:40
값: 숫자, 문자, 불린학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:07:54
연산자학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:09:40
비교 연산자학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:07:20
변수(var)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:14:35
null, undefined학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:10:52
조건문(if)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:09:08
반복문(while)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:12:23
복습 & 연산자 심화학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:10:03
함수학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:10:24
문자열 심화학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:05:21
else if학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:08:18
반복문(for)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:14:52
끝말잇기 구현학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:21:27
객체 기본과 구구단 게임
반복문 연습: 별찍기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:21:54
객체 기본학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:10:18
객체의 속성학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:12:28
배열 기본학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:12:09
구구단 구현학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:19:50
웹 화면 구현
window 객체학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:12:12
document 객체와 DOM학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:05:14
script 태그 사용법학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:10:23
JS로 HTML 태그 만들기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:10:30
끝말잇기 화면에 표시하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:12:21
이벤트 리스너 맛보기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:10:13
구구단 화면 만들기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:10:15
숫자야구
비동기 & 숫자야구 순서도학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:12:36
배열 push, pop, shift, unshift학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:09:05
배열 splice학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:09:57
배열 split & join학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:13:05
indexOf & 숫자야구 구현학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:14:06
리팩토링 & 개념 복습학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:04:41
틱택토
틱택토 순서도 & 화면학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:15:19
이차원 배열학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:12:41
e.target과 parentNode학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:13:00
틱택토 구현학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:16:28
forEach와 중첩 반복문학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:13:26
로또 추첨기
로또추첨기 Array & fill학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:10:12
배열 map 메서드학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:10:52
배열 slice & sort학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:10:55
JS로 HTML 태그 선택하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:10:18
JS로 CSS 조작하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:14:02
로또추첨기 마무리 & querySelector학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:10:22
가위바위보
가위바위보(이미지 스프라이트)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:13:32
딕셔너리 자료구조학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:08:06
Object, entries, find, findIndex학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:12:44
setTimeout, clearTimeout학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:11:16
가위바위보 규칙 찾기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:08:43
변수를 사용해 중복 제거하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:10:14
지뢰찾기
지뢰찾기 기본 화면학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:11:26
지뢰 심기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:17:33
우클릭으로 깃발 꼽기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:20:17
target vs e.currentTarget학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:03:24
물음표 기능과 중간 정리학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:10:01
주변 지뢰 개수 세기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:11:24
스코프학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:12:57
스코프 체인학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:07:44
렉시컬 스코프학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:15:10
클로저학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:17:40
클로저 문제 해결법학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:11:18
주변 칸 한 번에 열기(재귀)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:11:35
재귀 코드 효율 개선하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:09:37
에러 잡아내기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:11:08
데이터 딕셔너리로 정리학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:10:21
남은 버그 해결하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:09:16
반응속도 테스트
반응속도 테스트학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:11:04
시간 체크와 예약어학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:15:58
호출 스택(call stack)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:16:19
타이머 제거학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:10:52
재귀, 비동기와 호출 스택학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:10:09
틱택토 심화
틱택토(컴퓨터의 턴)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:14:37
틱택토 리펙토링학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:08:40
승리와 무승부 메시지학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:07:39
카드 짝맞추기 게임
카드 뒤집기 구현학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:09:47
카드 색 부여하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:07:02
카드 짝 맞추기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:08:00
게임 초기화학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:08:39
참조와 복사학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:07:05
복사하는 방법학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:12:16
깊은 복사학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:09:02
팩토리 패턴과 프로토타입학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:12:22
프로토타입을 쓰는 이유학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:07:03
Object.create()학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:06:56
자스스톤
call by value, call by reference, call by sharing학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:14:41
생성자와 new학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:10:58
자스스톤 화면 세팅학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:15:06
자스스톤 스크립트 초기 세팅(진입점)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:14:55
cloneNode와 생성자 활용학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:09:10
리팩토링과 진입점 함수의 중요성학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:07:05
쫄병카드 코스트에 맞춰 뽑기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:17:15
턴 넘기기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:17:08
리팩토링과 삼항연산자학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:14:17
필드 카드 선택과 턴 오버학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:15:36
카드끼리 치고 받고 싸우기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:16:08
죽은 카드 정리하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:09:14
자스스톤 마무리와 최종 리팩토링학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:11:25
코드 깔끔하게 작성하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:07:05
2048 게임
2048 게임 기본 세팅학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:08:51
mousedown, mouseup, mousemove학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:08:35
드래그 방향 판단하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:10:45
드래그에 따라 숫자 이동하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:17:26
숫자 합쳐서 두 배로 만들기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:24:33
게임 오버와 핵심 정리학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:06:33
테트리스
테트리스 세팅과 switch문학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:09:07
keyup, keydown, keypress학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:03:48
테트리스 블록 데이터 만들기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:08:55
테트리스 블록 화면에 표시학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:09:19
내려가는 테트리스 만들기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:16:30
호출 스택과 이벤트 루프학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:18:41
ES2015 const, let, 화살표 함수학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:14:19
테트리스 블록 생성, 그리기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:13:49
한 칸씩 내리기, 다 찬 줄 지우기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:15:38
테트리스 좌우 이동, 내리기, 회전학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:09:13
테트리스 및 웹게임 강좌 마무리학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:07:02
  • 무료
  • 평생
  • 114개 강의, 총 22 시간 3 분
  • 위시리스트

실시간 인기 강좌

우리는 성장기회의 평등을 추구합니다. 🎄

경제적, 시간적 제약없는 양질을 교육으로 누구나에게 성장 기회를 균등하게 주는 것. 그것이 우리의 목표입니다.

지식공유참여 고객센터
top
(주)인프랩 | 대표자:이형주 | TEL:070-4178-0406 | E-MAIL: course@inflearn.com | 사업자번호:499-81-00612
주소:성남시 분당구 삼평동 대왕판교로 645번길 12 경기창조경제혁신센터 8층 R19 | 개인정보보호책임자:이형주
통신판매업:2017-서울강남-01544 | ©INFLAB. ALL RIGHTS RESERVED