강의

N
챌린지

멘토링

N
클립

커뮤니티

BEST
게임 개발

/

게임 프로그래밍

[JS] Phaser 게임 제작 - 뱀파이어 서바이벌 클론

Phaser 3를 사용하여 한 때 유행했던 뱀파이어 서바이벌과 비슷한 게임을 만들어봅시다! 실제 뱀파이어 서바이벌도 phaser로 만들어졌답니다. 한 번 만들어보시면 원하시는 게임도 만드실 수 있을 거예요! :)

(4.8) 수강평 19개

수강생 308명

난이도 중급이상

수강기한 무제한

클론코딩
클론코딩
강의자료
강의자료
실습 중심
실습 중심
html5
html5
phaser
phaser
JavaScript
JavaScript
클론코딩
클론코딩
강의자료
강의자료
실습 중심
실습 중심
html5
html5
phaser
phaser
JavaScript
JavaScript

먼저 경험한 수강생들의 후기

수강 후 이런걸 얻을 수 있어요

  • Phaser 3를 활용한 게임 제작

  • JavaScript를 활용한 게임 제작

쉽게 배워 빠르게 써먹을 수 있는 Phaser 3!
🎮<뱀파이어 서바이벌> 게임을 함께 만들어요🎮

함께 만들어보아요!👇

"Save The Weniv World!"

 

제코베 세계관의 종점?!
Save The Weniv World🎮

이런 걸 만들 수 있어요!🎮

 👉 (클릭) 직접 게임해보러 가기 👈 

 

캐릭터 무빙, 공격 등 다양한 기본 기능 구현하기 
무기 추가 기능 구현하기

 

아이템 획득, 레벨 업 기능 구현하기
보스몹 등장시키기

이 강의의 특징 ✨

1. 경험을 통한 학습

게임을 제작해 보며 Phaser 3의 주요 개념부터 제공되는 다양한 메소드를 다룹니다.

2. 다양한 기능 구현 실습

Phaser 3를 통해 캐릭터 이동, 효과 추가, 공격 기능 등 다양한 기능을 구현해 볼 수 있습니다.

3. 게임 제작 에셋 제공

게임 제작에 필요한 이미지, 폰트, 사운드 트랙 등의 에셋을 제공합니다.

4. 풍부한 강의 자료 제공

강의자료(Notion page)와 GitHub에서 챕터별 코드를 제공합니다. 

이런 분들께 추천해요 🙋

'나도 이런 게임을 만들고 싶다!'
생각이 드신 분

JavaScript로 프로젝트를
만들어보고 싶으신 분

쉽고 빠르게 게임 개발 과정을
맛보고 싶으신 분

예상 Q&A 📝

Q. 어떤 선수지식이 필요한가요?

JavaScript의 기본 지식이 필요합니다. JavaScript를 처음 하시는 분들에게는 추천드리지 않습니다.

Q. 게임 개발을 한 번도 안 해봤는데 이 강의를 들어도 괜찮을까요?

물론입니다! 강의에서 구현하는 이동, 공격, 효과 추가 기능이 복잡하지 않아 게임 개발을 한 번도 해보지 않았어도 충분히 강의 및 수업 자료를 보고 이해하실 수 있습니다. 🙂

Q. 뱀파이어 서바이벌 클론과 다른 점이 있나요?

해당 강의의 게임은 게임 제작을 쉽게 하기 위해 난이도 조절과 스토리 조절, 아이템 선택 등의 기능이 빠져있습니다.

Q. 해당 게임의 디자인과 코드를 수정/재배포해도 되나요?

해당 게임은 스팀게임 출시 에셋에 포함되어 있어 재배포가 안됩니다.

지식공유자 소개💙

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • JavaScript로 게임을 만들어보고 싶으신 분

  • 게임 개발을 해보고 싶으신 분

선수 지식,
필요할까요?

  • JavaScript (ES6+)

안녕하세요
입니다.

105,005

명

수강생

2,726

개

수강평

163

개

답변

4.8

점

강의 평점

80

개

강의

소개 이미지.png.webp

 

🧙‍♂ 안녕하세요. 제주코딩베이스캠프입니다.

제주코딩베이스캠프란?

 

 

제주에서 가장 핫한 개발자들이 모여 작당한 부트캠프! 열정있는 청년들에게 열정만큼 성장할 수 있는 기회를 제공합니다!

제주코딩베이스캠프는 제주에서 가장 큰 ICT 교육 행사로 카카오, 구름, 제주산학융합원 등 기업 지자체와 함께 진행하고 있습니다.


서비스 구축 성공 경험을 통해 이 취업난 시대에 자신감, 자존감, 성취감, 그리고 자립할 수 있는 능력을 배양해 보세요!

으라차차 청춘 화이팅입니다! 😀

 

 

▶︎ 제주코딩베이스캠프 로드맵

제코베 로드맵.png.webp

 

▶︎ 제주코딩베이스캠프 수료증 제도

 

- 1.png.webp

 

공동 지식공유자

커리큘럼

전체

46개 ∙ (3시간 58분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

전체

19개

4.8

19개의 수강평

  • 빈스님의 프로필 이미지
    빈스

    수강평 3

    ∙

    평균 평점 5.0

    5

    100% 수강 후 작성

    강의 내용을 상세하게 알려주셔서 쉽게 배울 수 있었어요

    • 박성민님의 프로필 이미지
      박성민

      수강평 8

      ∙

      평균 평점 4.5

      5

      100% 수강 후 작성

      고오급 이론들이 가득한 강의네요 재밋게 잘 봤습니다 다만, 제가 느끼기에 강의 흐름 자체가 순차적인 코드 설명 위주로 흐르고 있어서 뭔가 흐름이 끊기고 갑자기 이 변수는 왜 선언이 된거지? 하고 멍 때리다가 아 뒤에서 이렇게 쓰는 구나 하는 경우가 많아서 집중이 어렵네요 코드가 복잡하고, 어느정도 규모가 있는 프로덕트라 어쩔 수 없다고 생각합니다 세 번 정도 더 보면 눈에 더 잘 들어오겠죠 좋은 강의 다시 한번 감사합니다!

      • 수정님의 프로필 이미지
        수정

        수강평 2

        ∙

        평균 평점 5.0

        5

        26% 수강 후 작성

        처음부터 깊이 있게 시작하면 학습하는 입장에서 부담이 될 수 있지만 이 수업은 부담 없이 쉽게 쉽게 게임제작에 대한 흐름을 빠르게 파악 할 수 있어 좋았습니다.

        • 숲속님의 프로필 이미지
          숲속

          수강평 9

          ∙

          평균 평점 5.0

          5

          41% 수강 후 작성

          공유해주신 코드로 빠른 흐름으로 따라할 수는 있는데 제가 구현할 수 있을 지 모르겠어요. 시간을 들여 차근차근 완강해볼게요.

          • ACACIA님의 프로필 이미지
            ACACIA

            수강평 6

            ∙

            평균 평점 4.7

            5

            100% 수강 후 작성

            따라가기 쉽고 직관적입니다. 코드 스니펫이 많이 제공되어 편하지만 학습자는 코드를 충분히 이해해야 할 필요가 있다는 것을 명심해야 합니다. 탬포가 빠른 강의인 만큼 개선 사항은 분명 있습니다. 이건 학습자가 직접 시도할 수 있도록 열린 길로 보여 오히려 긍정적입니다. 직접 리팩토링 해보며 더 성장하는 시간 갖도록 하겠습니다. 좋은 강의 감사합니다.

            인프런 10주년! 사랑주간 전체 할인 중 (1일 남음)

            ₩38,500

            30%

            ₩55,000

            제주코딩베이스캠프님의 다른 강의

            지식공유자님의 다른 강의를 만나보세요!

            노션으로 구축하는 스타트업 업무 시스템

            제주코딩베이스캠프

            노션 하나로 효율적인 스타트업 업무 시스템을 구축하는 법🧑🏻‍💻 (실무진 작성한 업무 템플릿 제공)

            초급

            초급

            Notion, 경영노하우, 조직 관리

            노션으로 구축하는 스타트업 업무 시스템

            제주코딩베이스캠프

            아는 만큼 보이는 크롬 개발자 도구강의 썸네일

            아는 만큼 보이는 크롬 개발자 도구

            제주코딩베이스캠프

            프론트엔드 개발자를 위한 크롬 개발자 도구 강의입니다. 개발 작업 시에 활용하기 좋은 다양한 기능과 팁을 다루고 있습니다.

            입문

            입문

            Google Chrome, Chrome DevTools

            아는 만큼 보이는 크롬 개발자 도구강의 썸네일

            아는 만큼 보이는 크롬 개발자 도구

            제주코딩베이스캠프

            떠먹는 Three.js강의 썸네일

            떠먹는 Three.js

            제주코딩베이스캠프

            Three.js의 기초적인 개념을 학습하고, 이를 응용하여 '나만의 섬 만들기' 미니 프로젝트를 진행합니다. 프로젝트를 진행하면서 쉽고 가볍게 Three.js를 익힐 수 있습니다.

            초급

            초급

            Three.js, HTML/CSS, JavaScript

            떠먹는 Three.js강의 썸네일

            떠먹는 Three.js

            제주코딩베이스캠프

            공공데이터와 Folium(Python Library)으로 만드는 제주 오름 지도 안내 서비스강의 썸네일

            공공데이터와 Folium(Python Library)으로 만드는 제주 오름 지도 안내 서비스

            제주코딩베이스캠프

            공공데이터와 Folium(폴리움)으로 제주 오름 지도 안내 서비스를 만들어 봅시다! 나만 볼 수 있는 서비스가 아니라, 남들도 접속할 수 있는 서비스요! 파일로 가지고 있는 포트폴리오 아니라 남들도 들어오는 서비스요!

            초급

            초급

            웹앱, Folium, QGIS

            공공데이터와 Folium(Python Library)으로 만드는 제주 오름 지도 안내 서비스강의 썸네일

            공공데이터와 Folium(Python Library)으로 만드는 제주 오름 지도 안내 서비스

            제주코딩베이스캠프

            예제로 살펴보는 PyQt Tutorial강의 썸네일

            예제로 살펴보는 PyQt Tutorial

            제주코딩베이스캠프

            PyQt를 이용하여 Python GUI 프로그래밍 세계에 빠져봅시다! Python으로 계산기와 같은 프로그램을 만들 수 있는 강좌입니다! Googletrans 라이브러리를 활용한 번역기, 계산기, AI 기술을 결합한 이미지 인식 프로그램 등으로 재미있게 풀어냅니다. :)

            초급

            초급

            GUI, PyQT

            예제로 살펴보는 PyQt Tutorial강의 썸네일

            예제로 살펴보는 PyQt Tutorial

            제주코딩베이스캠프

            Notion 에센셜강의 썸네일

            Notion 에센셜

            제주코딩베이스캠프

            복잡한 협업 툴은 이제 안녕! 👋 마크다운부터 데이터베이스까지, 노션 하나로 끝내는 일잘러의 필수 스킬 🚀

            입문

            입문

            Notion, 협업 툴

            Notion 에센셜강의 썸네일

            Notion 에센셜

            제주코딩베이스캠프

            깔끔한 협업, 슬기로운 슬랙생활 시작하기강의 썸네일

            깔끔한 협업, 슬기로운 슬랙생활 시작하기

            제주코딩베이스캠프

            누구보다 빠르게 협업 프로세스 구성하기 슬슬 시작해볼까요? 구글 DOCS, Trello, Git ... 내가 쓰는 툴과 연동이 가능하다고? 슬기로운 슬랙 사용법 !

            입문

            입문

            Slack, 업무 생산성, 협업 툴

            깔끔한 협업, 슬기로운 슬랙생활 시작하기강의 썸네일

            깔끔한 협업, 슬기로운 슬랙생활 시작하기

            제주코딩베이스캠프

            FastAPI 실전편: JWT와 Redis로 완성하는 인증 시스템강의 썸네일

            FastAPI 실전편: JWT와 Redis로 완성하는 인증 시스템

            제주코딩베이스캠프

            토이 프로젝트는 이제 그만! 현업 개발자들이 실제로 사용하는 JWT와 Redis로 안전한 인증 시스템을 구축하는 모든 비밀을 공개합니다.

            초급

            초급

            FastAPI, Redis, JWT

            FastAPI 실전편: JWT와 Redis로 완성하는 인증 시스템강의 썸네일

            FastAPI 실전편: JWT와 Redis로 완성하는 인증 시스템

            제주코딩베이스캠프

            제주코딩베이스캠프 Code Festival: JavaScript 100제강의 썸네일

            제주코딩베이스캠프 Code Festival: JavaScript 100제

            제주코딩베이스캠프

            이 강좌를 통해 문법을 보다 명확하게 이해하시고, 문제 풀이에 대한 자신감을 얻으시길 바랍니다.

            초급

            초급

            JavaScript, 코딩 테스트

            제주코딩베이스캠프 Code Festival: JavaScript 100제강의 썸네일

            제주코딩베이스캠프 Code Festival: JavaScript 100제

            제주코딩베이스캠프

            미Chill듯 뽑아내는 디자이너 생성형 AI 실무강의 썸네일

            미Chill듯 뽑아내는 디자이너 생성형 AI 실무

            제주코딩베이스캠프

            디자이너의 생성형 AI 활용법🧙‍♂️ 캔바와 미드저니등 생성형 AI로 디자인 작업 효율을 극대화하는 실전 노하우를 공개합니다.

            입문

            입문

            AI 활용 (AX), ChatGPT, 인공지능(AI)

            미Chill듯 뽑아내는 디자이너 생성형 AI 실무강의 썸네일

            미Chill듯 뽑아내는 디자이너 생성형 AI 실무

            제주코딩베이스캠프

            Github Action을 활용한 크롤러 웹 페이지 만들기강의 썸네일

            Github Action을 활용한 크롤러 웹 페이지 만들기

            제주코딩베이스캠프

            Github 초급자도 가능! Python 초급자도 가능! Github Action를 활용하여 주기적인 크롤링을 하는 크롤링 웹 서비스를 제작합니다.

            초급

            초급

            GitHub, 웹 크롤링, CI/CD

            Github Action을 활용한 크롤러 웹 페이지 만들기강의 썸네일

            Github Action을 활용한 크롤러 웹 페이지 만들기

            제주코딩베이스캠프

            견고한 기본기 HTML&CSS강의 썸네일

            견고한 기본기 HTML&CSS

            제주코딩베이스캠프

            우리는 HTML, CSS를 잘 알아야 견고한 실력의 프론트엔드 개발자가 될 수 있다고 생각합니다.✍ HTML과 CSS의 종류부터 실무 활용까지, 이 강의로 언어를 올바르게 사용하는 방법을 배울 수 있습니다. 정성 들여 준비했으니 즐겨주세요 :)

            입문

            입문

            HTML/CSS

            견고한 기본기 HTML&CSS강의 썸네일

            견고한 기본기 HTML&CSS

            제주코딩베이스캠프

            직접 만드는 노션 템플릿 BEST 7선강의 썸네일

            직접 만드는 노션 템플릿 BEST 7선

            제주코딩베이스캠프

            메모혁신 노션(notion)의 기초부터 템플릿 제작까지 단 한 강좌로 노션 사용하기!

            입문

            입문

            업무 생산성, Notion, 협업 툴

            직접 만드는 노션 템플릿 BEST 7선강의 썸네일

            직접 만드는 노션 템플릿 BEST 7선

            제주코딩베이스캠프

            친절한 상사 능력 좋은 부하직원 모두 한큐에 with GPT와 Claude강의 썸네일

            친절한 상사 능력 좋은 부하직원 모두 한큐에 with GPT와 Claude

            제주코딩베이스캠프

            ChatGPT, Claude 등 다양한 생성형 AI의 원리와 실무 활용법, 생성형 AI를 효과적으로 도입하고 활용하기 위한 기본 학습서, 실전 가이드 입니다.

            입문

            입문

            AI 활용 (AX), ChatGPT, 프롬프트엔지니어링

            친절한 상사 능력 좋은 부하직원 모두 한큐에 with GPT와 Claude강의 썸네일

            친절한 상사 능력 좋은 부하직원 모두 한큐에 with GPT와 Claude

            제주코딩베이스캠프

            파이썬 클래스 톺아보기강의 썸네일

            파이썬 클래스 톺아보기

            제주코딩베이스캠프

            "왜 클래스가 필요할까?🤔" 라는 질문에 대답하실 수 있으신가요? 파이썬 개발자라면 알아야 할 파이썬 클래스의 모든 것을 담았습니다!

            중급이상

            중급이상

            Python, python-class, 객체지향

            파이썬 클래스 톺아보기강의 썸네일

            파이썬 클래스 톺아보기

            제주코딩베이스캠프

            3D 이모티콘 작가와 함께하는 Blender(블렌더) 3D 왕기초

            제주코딩베이스캠프

            Blender 3D 툴도 3D도 처음이라면? 카카오톡 3D 이모티콘 작가가 직접 알려주는 완전 초보 맞춤형 3D 입문 강의

            입문

            입문

            3d-modelling, Blender

            3D 이모티콘 작가와 함께하는 Blender(블렌더) 3D 왕기초

            제주코딩베이스캠프

            떠먹는 자바스크립트 비동기강의 썸네일

            떠먹는 자바스크립트 비동기

            제주코딩베이스캠프

            자바스크립트 동기/비동기 개념부터 Promise, async/await 등 최신 문법을 담은 비동기 처리 방식과 실전 HTTP 통신까지 체계적으로 학습하는 강의입니다.

            초급

            초급

            JavaScript, promise, async-await

            떠먹는 자바스크립트 비동기강의 썸네일

            떠먹는 자바스크립트 비동기

            제주코딩베이스캠프

            3분만에 만드는 깃헙 블로그강의 썸네일

            3분만에 만드는 깃헙 블로그

            제주코딩베이스캠프

            GitHub Fork만으로 손쉽게 나만의 블로그를 만들 수 있습니다! 학습 블로그(TIL)과 GitHub 잔디를 함께 관리할 수 있는 서비스입니다.

            입문

            입문

            GitHub, markdown, jupyter-notebook

            3분만에 만드는 깃헙 블로그강의 썸네일

            3분만에 만드는 깃헙 블로그

            제주코딩베이스캠프

            웹/네트워크/HTTP 베이스캠프 for developer강의 썸네일

            웹/네트워크/HTTP 베이스캠프 for developer

            제주코딩베이스캠프

            개발자라면 누구나 알아야 할 웹, 네트워크, 그리고 HTTP의 기초에 대해 코드 기반, 실제 이동하는 데이터 기반으로 학습합니다.

            초급

            초급

            네트워크, 프로토콜, https

            웹/네트워크/HTTP 베이스캠프 for developer강의 썸네일

            웹/네트워크/HTTP 베이스캠프 for developer

            제주코딩베이스캠프

            HTML/CSS 베이스캠프강의 썸네일

            HTML/CSS 베이스캠프

            제주코딩베이스캠프

            웹 페이지를 만들고 싶다면, HTML/CSS를 배워보세요. 웹 페이지의 구조를 정의하는 HTML과 웹 페이지의 스타일을 정의하는 CSS로 다양한 콘텐츠와 디자인을 구현할 수 있습니다.

            입문

            입문

            HTML/CSS

            HTML/CSS 베이스캠프강의 썸네일

            HTML/CSS 베이스캠프

            제주코딩베이스캠프

            비슷한 강의

            같은 분야의 다른 강의를 만나보세요!

            따라하며 만드는 지뢰찾기 with HTML/CSS/JS강의 썸네일

            따라하며 만드는 지뢰찾기 with HTML/CSS/JS

            은옥

            HTML, CSS, JS를 이용해 예전 윈도우에 기본적으로 설치되어 있던 지뢰찾기 게임을 만들어 봅시다.

            입문

            입문

            HTML/CSS, JavaScript, vanilla-javascript

            따라하며 만드는 지뢰찾기 with HTML/CSS/JS강의 썸네일

            따라하며 만드는 지뢰찾기 with HTML/CSS/JS

            은옥

            웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT

            깡코딩

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

            초급

            초급

            인터랙티브 웹, JavaScript, HTML/CSS

            웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT

            깡코딩

            게임으로 배우는 JavaScript강의 썸네일

            게임으로 배우는 JavaScript

            노마드크리에이터

            게임프로그램을 직접 만들어보면서 자바스크립트의 기본과 실전능력을 키우는 강의입니다.

            입문

            입문

            JavaScript

            게임으로 배우는 JavaScript강의 썸네일

            게임으로 배우는 JavaScript

            노마드크리에이터