Thumbnail
개발 · 프로그래밍 게임 개발
웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT
(4.8)
5개의 수강평 ∙ 61명의 수강생
88,000원

월 17,600원

5개월 할부 시
지식공유자 : 깡코딩
총 55개 수업˙총 8시간 54분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
폴더에 추가 137 공유
초급자를 위해 준비한
[게임 개발, 프론트엔드] 강의입니다.

웹게임도 만들고, 프론트엔드 웹 개발 스킬도 배우는 1석 3조 수업! 독자적인 아이디어로 JavaScript, CSS, HTML을 활용해 게임을 만들 수 있는 방법을 수업으로 만들었습니다!

✍️
이런 걸
배워요!
게임을 만들며 자연스럽게 웹 애니메이션, 인터렉티브 웹 구현 원리 습득!

게임도 만들고, FE 웹개발 스킬도 익히고! 

강의 소개

웹게임 플레이 영상

다양한 모션을 만들어보고!

키에 반응하는 히어로의 여러 가지 동작과 몬스터, 수리검, 데미지 이펙트 등 다양한 모션을 만들어봅니다.

몰려오는 몬스터를 막아라!

충돌 기능을 구현하고 몰려오는 몬스터를 막는 게임 스테이지를 구현해 봅니다. 무한으로 반복되는 스테이지를 만들어보고, 개발자가 직접 지정하는 2가지 게임 스테이지를 만들어 봅니다.

NPC와 대화를 나누고 퀘스트 수행!

게임 퀘스트를 만들어보고 NPC와 대화하는 기능을 만들어봅니다. 그리고 퀘스트를 완료하면 보상을 받습니다.

레벨업과 히어로 스탯 조정!

히어로의 체력과 경험치를 관리해 레벨업 기능을 만들어보고 히어로의 스탯도 변경해봅니다.

수업 특징

  • 수업은 바닐라JS로 진행합니다.
  • 섹션을 최대한 쪼개서 지루하지 않고 이해하기 쉽도록 만들었습니다.
  • 순차적으로 함께 만들어가며 배웁니다.
  • 게임을 만들며 진행하는 수업이라 재미있습니다.
  • 배열, 오브젝트, 반복문을 많이 다룹니다.
  • 게임을 만들며 프론트엔드 개발에서 사용하는 다양한 웹 스킬을 배울 수 있습니다.
  • 캔버스로 게임을 만드는 원리와 비슷합니다. 하지만 HTML/CSS를 함께 사용하여 접근이 더 쉽습니다.
  • 약 9시간 분량! 최대한 자세하게 설명합니다. (총 52개 수업)
  • 여러분의 연봉을 올려주는 다양한 스킬을 배워보세요.

알아두세요

  • JavaScript ES6 문법을 사용합니다.
  • 오픈소스 라이브러리를 사용하지 않습니다.
  • 수업에 관련된 궁금증은 언제든 질문과 답변에 올려주세요! 든든한 지원군이 있습니다.
  • 정식 출시를 목표로 하는 게임을 만드는 강의는 아닙니다. HTML, CSS, JavaScript를 활용하여 간단하게 웹에서 즐길 수 있는 웹 게임을 만들어봅니다.
  • HTML, CSS, JavaScript 기초를 알고 있어야 합니다. 수업에서 기초 문법에 대한 설명은 하지 않습니다
  • 기초 문법을 제외한 구현 원리는 순차적으로 만들어보며 최대한 자세히 설명합니다.
  • 수업 비중은 자바스크립트 약 80%, HTML/CSS 약 20%로 구성되어 있습니다.
  • 수업에서 나오는 코드를 무료로 배포하는 것을 금지합니다.
  • 게임은 시스템, 브라우저 환경에 따라 약간의 차이가 있을 수 있습니다.

예상 질문 Q&A

Q. 어떤 브라우저에서 동작하나요?
A. 수업에서 만든 게임은 최신 버전의 크롬, 사파리, 오페라, 파이어폭스, EDGE에서 테스트 되었습니다.
Q. 시스템 환경과 브라우저에 따라 어떤 차이가 있나요?
A. 브라우저에서 동작하는 게임이다보니 미세한 스무스함의 차이가 있을 수 있습니다.
Q. 비전공자도 들을 수 있나요?
A. HTML, CSS, JavaScript 기초 문법을 알고 있다면 비전공자도 충분히 들을 수 있을 거라 생각합니다.

52강 약 9시간 분량의 알찬 커리큘럼!
아래에서 확인하세요.

지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
UI/UX에 관심 많은 분들!
특별한 포트폴리오를 만들고 싶은 취준생 분들!
웹애니메이션! 인터렉션에 관심이 많은 분들!
다양한 프론트엔드 스킬을 배우고 싶은 분들!
스킬을 늘려 연봉 올리고 싶은 분들!
📚
선수 지식,
필요한가요?
JAVASCRIPT, CSS, HTML

안녕하세요
깡코딩 입니다.
깡코딩의 썸네일

안녕하세요. 백엔드 개발자로 시작해 프론트엔드 개발자로 전향해서 UI 개발에 푹 빠져있는 깡코딩입니다. :)

 

10여 년 동안 다수의 기업 홈페이지와 쇼핑몰 SI 소상공인 홈페이지를 제작하며 알게 된 UI/UX 제작 기법 노하우 등을 공유하기 위해 이 강의를 시작하게 되었습니다. 국내 여러 대기업 프로젝트를 경험했고 소상공인에게 초점을 맞춘 홈페이지 제작 사업도 하였습니다.

 

저는 가끔 국내 코딩관련 커뮤니티에서 취미로 만든 애플 인터렉션과 창작 인터렉션을 공유하며 재밌는 기술을 소개했었는데요

많은 분들의 관심을 주셔서 이렇게 강의까지 만들게 되었습니다.

 

제가 만들어갈 강의는 표준 브라우저를 고려하고 실무에서 사용 가능한 감탄사가 절로 나오는 다양하고 멋진 인터렉션과 모션그래픽을 만드는 방법들을 알려드릴 예정이고 프론트 개발자나, 웹퍼블리셔가 솔루션을 이용해 홈페이지, 쇼핑몰 등을 바닥부터 만들 수 있는 강의도 만들 예정입니다.

 

그럼 강의에서 뵙겠습니다 :)

커리큘럼 총 55 개 ˙ 8시간 54분의 수업
이 강의는 영상, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 1. 기본 작업, 히어로 만들기
게임 기본 설정 미리보기 11:29
캐릭터 기본 모션 만들기 12:16
캐릭터 기본 모션 키에 반응하도록 만들기 11:06
이미지 사전 로드 기법 03:41
캐릭터가 이동하도록 만들기 08:38
캐릭터 위치값 알아내기 11:35
수리검을 화면에 추가하기 13:46
수리검이 이동하도록 만들기 12:19
수리검이 화면을 벗어날 때 사라짐 처리, 공격 키를 누르고 있을때 히어로 모션 정지 시키기 07:20
수리검 방향 전환 처리 08:42
캐릭터, 수리검 사이즈 조절, resize 이벤트 추가 07:36
게임 배경 만들기, 배경 이동처리 16:17
캐릭터 모션 속도 조절 04:12
섹션1 버그 수정 06:10
섹션 2. 몬스터 만들기, 충돌 & 데미지 처리
몬스터 만들기 06:06
몬스터 클래스 생성 04:50
몬스터 공격시 수리검 충돌 처리, 수리검 배열 제거 처리(메모리 관리) 12:08
몬스터 체력 만들기, 몬스터 체력, 위치 조정 07:15
몬스터 공격시 몬스터 체력 관리, 캐릭터 공격 데지미 추가 05:23
전체 몬스터 배열처리 04:39
몬스터가 사라지도록 만들기 08:48
몬스터 체력 PROGRESS로 디자인 하기 10:05
몬스터가 이동하도록 만들기, 화면 끝을 넘어가지 않도록 만들기 18:47
게임 정보 인터페이스 만들기 07:03
몬스터와 캐릭터 충돌시 캐릭터 에너지 관리 17:03
캐릭터가 죽는 모션과 충돌 모션 만들기 12:05
GAME OVER 게임 종료 처리하기 08:20
데미지 시각화 처리, 데미지 위치 랜덤으로 나타나도록 만들기 20:56
데미지 확률 변경하기 06:26
섹션 3. 게임 스테이지 만들기
몬스터 종류별로 만들기(object 처리) 11:41
보스 몬스터 만들기, 몬스터 대량 소환하기 13:14
STAGE LEVEL START, 몬스터 소환기능 구현하기 12:05
STAGE LEVEL CLEAR 몬스터 무한 소환 기능구현 17:06
스테이지에 해당하는 몬스터 생성. 스테이지를 CLEAR하면 히어로 스탯 조정하기 13:17
게임 점수 카운트하기 08:22
첫번째 게임 완성! 몰려오는 몬스터를 막는 게임!! 플레이!! 03:56
섹션1~3을 마치며. 30초 간단 정리 02:04
섹션 4. 추가 기능 만들기
캐릭터 슬라이드 모션 , 기능 만들기 19:37
캐릭터 레벨업 디자인 10:33
캐릭터 레벨업 기능 구현, 캐릭터 공격력 올리기 26:37
레벨업을 할 때 캐릭터 체력 회복 UPDATE HP 메소드 리팩토링 06:57
STAGE CUSTOM 특정 위치에 STAGE 몬스터를 소환하도록 만들기 16:14
섹션 5. 응용편 - NPC 퀘스트 만들기(섹션5 대부분의 내용들은 1~4까지 배운 내용을 응용하기 때문에 빠르게 진행합니다)
NPC 디자인 08:06
NPC 클래스 만들기, 충돌 구현 10:39
NPC 모달 디자인 14:27
NPC 퀘스트 디자인 04:35
NPC 모달에 퀘스트 내용 추가 04:32
NPC 퀘스트 클리어 기능 구현 13:58
NPC 퀘스트 프로퍼티 분리. 오브젝트 처리하기 07:52
NPC 퀘스트 추가로 만들어보기 09:26
섹션 6. 추가 기능 만들기2
최종보스 좀비킹 만들기, 스테이지 추가하기 07:27
버그 수정, 마무리하며 03:35
강의 게시일 : 2021년 08월 19일 (마지막 업데이트일 : 2021년 08월 17일)
수강평 총 5개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
4.8
5개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
dksdmlwjd1 thumbnail
좋았습니다
2021-11-19
지식공유자깡코딩
안녕하세요 :) 소중한 수강평 감사합니다.
2021-11-19
휴고 강 thumbnail
알아도 쓰기힘든 개념을 게임을통해서 재밋게 익히는데 너무 좋은 수업이네요 감사합니다.
2021-11-24
지식공유자깡코딩
안녕하세요. :) 도움이 되었다니 다행입니다. 소중한 수강평 감사합니다.
2021-11-24
코르테스 thumbnail
완강~ 배열 오브젝트 반복문을 다양하게 활용하는 방법을 배워서 좋았고 애니메이션과 그 외 몰랐던 것들도 배울수있어서 좋았습니다^^
2021-11-07
지식공유자깡코딩
소중한 수강평 감사합니다:D
2021-11-07
연봉올리기 thumbnail
설명을 자세하게 해주셔서 좋습니다. 한 강의당 길어봤자 15분 내외라서 더 좋구요. 사실 Object 와 Class 를 써본적이 별로 없는데, 이 기회에 어떻게 사용하는지 알게 됐습니다. 개인적으로 느꼈던 점은 강사님께서 선언하시는 JS 방식이 굉장히 깔끔합니다. Object 와 Class 를 많이 사용해보고 싶다면 추천합니다.
2021-10-23
지식공유자깡코딩
안녕하세요 :) 조금 더 알기 쉽게 설명하려다 보니 생략한 부분도 있지만 도움이 되었다니 기쁘네요 :D 소중한 수강평 감사합니다.
2021-10-24
dgh12 thumbnail
안녕하세요~ 드디어 완강을 하고 수강 평을 적습니다. 정말 제이 쿼리나 라이브러리 사용 없이 오로지 바닐라 js로만 강의하셔서 좋았습니다. 언급하신 대로 설명도 차근차근 잘 설명해주시고, 영상도 깔끔하고 좋았습니다. 물론 지속적으로 봐야 하며 더 소화할 시간은 필요하지만 영상도 길지 않게 편집도 잘 해주셨고 만족스러웠습니다 감사합니다 :)
2021-10-14
지식공유자깡코딩
안녕하세요 :) 첫번째 수강평인데 정성스레 남겨주시니 감동입니다. 소중한 수강평 감사합니다 :D
2021-10-14
88,000원

월 17,600원

5개월 할부 시
폴더에 추가 137 공유
지식공유자 : 깡코딩
총 55개 수업˙총 8시간 54분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
수강 전 궁금한 점이 있나요?
문의하기
문의
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스