Web game that lets you learn by following along

Name: Web game that lets you learn by following along
Price: 60500 KRW
Rating: 4 (7 reviews)

This course will teach you how to develop web games.

(4.0) 7 reviews

120 learners

Level Intermediate

Course period Unlimited

John Ahn

React

Reviews from Early Learners

4.0

5.0

응애 나 아기 개발자

78% enrolled

I took this course because I wanted to learn more interesting things after only learning js and react. You teach really well and I learned a lot. Thank you.

5.0

seungwan

24% enrolled

Please make more playcanvas lectures~~

5.0

김언석

37% enrolled

Teacher! You are a great lecturer. I understand it well, so I think I will use it somewhere. It has been a long time since I felt that listening to a lecture is this enjoyable.

What you will gain after the course

React
webgl
game engine
playcanvas
nakama server

Web games made with JavaScript!
Even if it's your first time playing a web game, just follow along 🦾

If you follow along, you can play web games in no time? 🎮

Attention those who want to try something new and unfamiliar! Here's a course that teaches you how to create web games using JavaScript. Web games require enormous traffic and complex logic. Expand your development horizons by creating web games.

Drawing on my development experience with projects like Korbit Town and Shinhan Metaverse, I wanted to create a course that anyone can learn by building web games . In this course, you'll learn how to leverage 3D assets built with web technologies to create games. Even if you don't have any prior experience building web games, anyone familiar with JavaScript and React should be able to follow along without much difficulty.

A service example created using this technology in practice (participated as a full-stack main developer)
Cobit Town
https://www.youtube.com/watch?v=sV1WR0mlXxE
Shinhan Metaverse:
https://www.youtube.com/watch?v=MXSMwHA6pBM

This course's unique features ✨

Source code line by line
Write while interpreting!

Even if it's your first time playing a web game
Detailed explanations you can follow !

To help students understand
A variety of visual aids!

I recommend this to these people 🙋‍♀️

Beyond web development with JavaScript
For those who want to try something else

How web games are made
Anyone who wants to know the process

I have never developed a web game before.
Those who are wondering if they can do it

What you'll learn 📚

Section 1. Configuring the Project

We'll take a look at what configuration you'll be building your game app with and install what you need.

Section 2. Implementing a Simple React & PlayCanvas Application

Implement a single player application using React and PlayCanvas.

Section 3. Nakama Client Integration

We will install and run the Nakama server and database using Docker, and install the Nakama Client using npm to enable communication between the two.

Section 4. Nakama Server Integration

Using the Nakama server and client installed in Section 3, create a match on the Nakama server and join that match.

Section 5. Controlling Multiplayer User Spawn and Movement

Let's implement a feature that makes the user appear in my browser when someone else logs in.
I'm implementing a feature that will show people who logged in before me and allow me to see other people's movements in real time.

Expected Questions Q&A 💬

Q. I've never developed a web game before. Is it okay for me to take this course?

Yes, that's fine. However, you should have some familiarity with JavaScript and React to be able to take the course without any difficulty.

Q. I have never used LuaScript before. Will it be okay?

LuaScript is used in many gaming apps, including Roblox and Minecraft, and its usage is similar to JavaScript. Therefore, even if you have no prior experience with LuaScript, you should be able to build apps with it without any problems. We'll explain LuaScript line by line, comparing it to JavaScript.

Recommended for
these people

Who is this course right for?

Anyone who wants to create a web game using JavaScript
For those who want to use JavaScript in a wider range of fields

Need to know before starting?

javascript
react

Hello
This is

85,146

Learners

2,768

Reviews

2,430

Answers

4.8

Rating

Courses

Hello.

I am a developer who enjoys the process of development.

I hope I can be of great help to you in the future.

- Author of "Learning Docker and CI Environments by Following Along"
- FE Instructor for Kakao New Employee Recruitment
- Instructor at Fast Campus and Goorm
- Corporate Development Training for Hyundai Motor Company
- Full-stack development for Shinhan Bank Metaverse and Korbit Town
- Full-stack development for various public institution SNS platforms

Curriculum

All

51 lectures ∙ (8hr 5min)

Course Materials:

Lecture resources

Section 1. Lecture materials

2 lectures

1. Source code
2. Chart data

Section 2. Organizing a project

7 lectures ∙ (1hr 15min)

3. Preparation & Overall Structure
05:40
4. Starting the frontend setup (React & PlayCanvas)
08:12
5. Check out the Point and Click Project
04:00
6. Moving a character (1)
19:43
7. Moving the character (2)
16:39
8. Connecting React and PlayCanvas
09:11
9. What happens when you start Play Canvas
12:18

Section 3. Implementing a simple application using React & PlayCanvas (Single Play)

6 lectures ∙ (1hr 2min)

10. #2-1 Collision, Triggers, RigidBody(1)
13:11
11. #2-2 Collision, Triggers, RigidBody(2)
10:07
12. #2-3 Collision, Triggers, RigidBody(3)
10:51
13. #2-4 Interacting with React and PlayCanvas (window.postMessage)
20:06
14. #2-5 Playcanvas Communication(app.fire)
04:55
15. #2-6 Add Playcanvas Extension
02:53

Section 4. Nakama Client Integration

5 lectures ∙ (55min)

Section 5. Nakama Server Integration

5 lectures ∙ (58min)

Section 6. Multiplayer User Spawn and Movement Controls (Multi Play)

15 lectures ∙ (2hr 48min)

Section 7. [Appendix] Docker Basics

11 lectures ∙ (1hr 5min)

Published:

Last updated:

Reviews

All

7 reviews

4.0

7 reviews

mnb91391854
Reviews 19
∙
Average Rating 5.0
5
78% enrolled
I took this course because I wanted to learn more interesting things after only learning js and react. You teach really well and I learned a lot. Thank you.
- johnahn
  Instructor
  Baby Developer ~ Thank you for your good review.
seungwan
Reviews 3
∙
Average Rating 5.0
5
24% enrolled
Please make more playcanvas lectures~~
rhgiddp1034
Reviews 8
∙
Average Rating 5.0
5
37% enrolled
Teacher! You are a great lecturer. I understand it well, so I think I will use it somewhere. It has been a long time since I felt that listening to a lecture is this enjoyable.
gudwls92331736
Reviews 2
∙
Average Rating 5.0
5
100% enrolled
This is something I've always been interested in, so thank you for the great lecture.
dokebi5704
Reviews 1
∙
Average Rating 2.0
2
51% enrolled
A course that does not have the information necessary for practical work. 3D work is done in PlayCanvas and then downloaded and connected to React every time? This is an impossible method that cannot be used in practical work. I do not work alone, and UI and 3D objects do not operate separately every time. In the explanation of the connection process, some files are connected in the head and some in the body, but the explanation of such important information is too sloppy, and parts that can be explained in one word or one line are explained too long, making it boring and a waste of time.

$47.30

John Ahn's other courses

Check out other courses by the instructor!

Learn JavaScript A-Z by Following Along

John Ahn

You can learn JavaScript from basic to intermediate, which is the foundation of web development.

Beginner

JavaScript

Learn JavaScript A-Z by Following Along

John Ahn

Learn React Native Basics by Following

John Ahn

Through this course, you will be able to develop applications using React Native.

Basic

React Native, React, expo

Learn React Native Basics by Following

John Ahn

Node and React series that you can learn by following - Creating a movie site

John Ahn

Through this course, you will learn not only concepts such as React and Node, but also how to practically create a website.

Basic

React, Node.js, Web Application

Node and React series that you can learn by following - Creating a movie site

John Ahn

Node and React series that you can learn by following - Creating a chatbot site

John Ahn

In this course, you will learn how to create a chatbot using the API provided by Google.

Basic

React, Node.js

Node and React series that you can learn by following - Creating a chatbot site

John Ahn

Node and React series that you can learn by following - Basic lecture

John Ahn

In this course, you will learn the basics of how to use React and Node.

Basic

React, Node.js

Node and React series that you can learn by following - Basic lecture

John Ahn

TypeScript A-Z: Learn by Following

John Ahn

In this course, you will learn about TypeScript.

Basic

TypeScript, JavaScript

TypeScript A-Z: Learn by Following

John Ahn

Learn HTML and CSS by following along

John Ahn

Through this course, you can learn the basics of HTML and CSS.

Beginner

HTML/CSS

Learn HTML and CSS by following along

John Ahn

Node and React series that you can learn by following - Creating a Reddit site (NextJS) (Pages Router)

John Ahn

In this course, you will be able to create a Reddit website from scratch, step by step.

Basic

Clone Coding, Node.js, React

Node and React series that you can learn by following - Creating a Reddit site (NextJS) (Pages Router)

John Ahn

Learning React A-Z by Following Along [Version 19 반영]

John Ahn

In this course, you will learn React from basic to intermediate level. This single course is designed to help you learn the concepts, practice them, and acquire most of the knowledge you need for React all at once.

Basic

React, Next.js, TypeScript

Learning React A-Z by Following Along [Version 19 반영]

John Ahn

Learn React Testing by Following [Updated November 2023]

John Ahn

In this course, you will learn how to test React applications.

Basic

React, React Context, Web Application

Learn React Testing by Following [Updated November 2023]

John Ahn

Learn NestJS by following along

John Ahn

In this course, you will learn about NestJS.

Basic

NestJS, PostgreSQL, TypeORM

Learn NestJS by following along

John Ahn

Learn React and Firebase by following along - Creating a Chat Application [Renewed in December 2023]

John Ahn

In this course, you will learn how to create a chat application using React and Firebase.

Basic

React, Firebase, Web Application

Learn React and Firebase by following along - Creating a Chat Application [Renewed in December 2023]

John Ahn

TDD Development by Following [Updated in November 2023]

John Ahn

In this course, you will create a Node.js application using test-driven development (TDD).

Basic

TDD, Node.js, Express

TDD Development by Following [Updated in November 2023]

John Ahn

Learn Docker and CI environment by following [2023.11 update]

John Ahn

Through this course, you can learn about Docker and set up a CI environment.

Basic

GitHub, AWS, Docker

Learn Docker and CI environment by following [2023.11 update]

John Ahn

DENO - Learn by Following - Basic Course

John Ahn

Deno, which has been receiving a lot of attention even before its release, has finally been released. In this lecture, you can learn how Deno is different from Node and how to handle Deno.

Basic

Deno

DENO - Learn by Following - Basic Course

John Ahn

Learn by Following Along Node, React Series - Building a Shopping Mall Site [Complete Renewal]

John Ahn

Through this lecture, you can create a shopping mall website from scratch step by step.

Intermediate

React, Redux, Node.js

Learn by Following Along Node, React Series - Building a Shopping Mall Site [Complete Renewal]

John Ahn

Node and React series that you can learn by following - Creating a YouTube site

John Ahn

In this course, you will not only learn the concepts of React and Node, but also learn how to practically create a website.

Basic

React, Redux, Node.js

Node and React series that you can learn by following - Creating a YouTube site

John Ahn

Similar courses

Explore other courses in the same field!

Applying TypeScript to React while learning while making web games

zerocho

Let's use React and TypeScript together by adding TypeScript to a web game made with React and React Router, Redux, and MobX.

Intermediate

React, TypeScript

Applying TypeScript to React while learning while making web games

zerocho

Learn React Testing by Following [Updated November 2023]

John Ahn

In this course, you will learn how to test React applications.

Basic

React, React Context, Web Application

Learn React Testing by Following [Updated November 2023]

John Ahn

Learning React while making web games

zerocho

Learn React through web games. Get familiar with Classes and Hooks, and learn additional things like Context API, React Router, Webpack, and Babel.

Basic

React

Learning React while making web games

zerocho

Web Network Communication - From Basics to HTTP, SSE, WebSocket, and WebRTC P2P Communication

sir24is

Learning about various communication techniques and understanding their differences helps you develop the ability to select and implement the most appropriate communication method.

Beginner

JavaScript, React, Java

Web Network Communication - From Basics to HTTP, SSE, WebSocket, and WebRTC P2P Communication

sir24is

Learn React and Firebase by following along - Creating a Chat Application [Renewed in December 2023]

John Ahn

In this course, you will learn how to create a chat application using React and Firebase.

Basic

React, Firebase, Web Application

Learn React and Firebase by following along - Creating a Chat Application [Renewed in December 2023]

John Ahn

Node and React series that you can learn by following - Creating a chatbot site

John Ahn

In this course, you will learn how to create a chatbot using the API provided by Google.

Basic

React, Node.js

Node and React series that you can learn by following - Creating a chatbot site

John Ahn

Building Your Own Company Website with React, Node.js, MongoDB: Complete Guide

dakgangjung123

This is a practical course where you can learn how to build a company website yourself using React, Node.js, and MongoDB. Let's build a full-stack project together with a basic background in React and Node.js!

Intermediate

React, Node.js, MongoDB

Building Your Own Company Website with React, Node.js, MongoDB: Complete Guide

dakgangjung123

Node and React series that you can learn by following - Creating a movie site

John Ahn

Through this course, you will learn not only concepts such as React and Node, but also how to practically create a website.

Basic

MongoDB, React, Node.js

Node and React series that you can learn by following - Creating a movie site

John Ahn

Creating and Monetizing a Toss Game App with AI

cosart

How to easily create games with AI and monetize by launching your game on the Toss app with 30 million users

Beginner

AI, React, ChatGPT

Creating and Monetizing a Toss Game App with AI

cosart

Hybrid App with Expo Framework to Increase Web Developer's Salary

codecamp

This course will help you develop mobile apps that can be serviced on Android and iOS using web development.

Basic

React, Next.js, expo

Hybrid App with Expo Framework to Increase Web Developer's Salary

codecamp

Complete Full-Stack Python Developer Roadmap: Learn FastAPI, React, Database Design API Architecture

IT s Dev

A Complete End-to-End Developer Journey — Build Lightning-Fast APIs, Modern Frontend Interfaces, Real Projects, Authentication Systems, Dashboards & Full Deployments Using FastAPI, React, and Vibe Coding Techniques.

Beginner

React, React Native, react.js

Complete Full-Stack Python Developer Roadmap: Learn FastAPI, React, Database Design API Architecture

IT s Dev

Next.js Full Course to Dip In (English Audio & Korean Subtitles)

ludgi

A full course of hands-on Next.js! Complete a real-world project with the latest technologies such as GraphQL, Redis, RabbitMQ, Prisma, TailwindCSS, Docker Compose, Cypress, Prometheus, and Grafana, and experience both the App Router and Page Router.

Intermediate

Next.js, React, GraphQL

Next.js Full Course to Dip In (English Audio & Korean Subtitles)

ludgi

# [Electron #1] Building a Timer App with Electron + React (With Zustand)

dakgangjung123

This is a practical course where you will directly create a timer app using React, Electron, and Zustand, and even deploy it to cross-platforms (Windows, macOS, Linux). Starting with familiar React web development, you can learn the entire flow of desktop app development, including global state management via Zustand and final GUI deployment!

Basic

React, Electron, GUI

# [Electron #1] Building a Timer App with Electron + React (With Zustand)

dakgangjung123

Building Your Own Emotional Diary Service with SpringAI + React

Neo

Building Your Own Emotional Diary Service with SpringAI + React This is the 4th project time creating together with Neo + Essential!

Basic

React, Kotlin, Spring Boot

Building Your Own Emotional Diary Service with SpringAI + React

Neo

SpringBoot & React Portfolio Project: Hands-on AWS Service Deployment for Beginners

ehtjd339667

A portfolio-focused course on directly deploying React frontend and SpringBoot backend to AWS cloud! This course is helpful for those who want to quickly deploy frontend and backend projects to their portfolio! You'll be able to practice step-by-step in a short period the knowledge needed for deployment, from server setup to Docker, Domain connection, Nginx, and HTTPS implementation!

Basic

React, Java, AWS

SpringBoot & React Portfolio Project: Hands-on AWS Service Deployment for Beginners

ehtjd339667

[VOD] 6-Week Complete! High-Concentration Vibe Coding for Development Practice (Cursor AI, Figma)

codecamp

Throw away those simple services you can make with vibe coding in just 10 minutes! You can learn 'real' practical vibe coding. Let's create advanced services at the level of actual services according to planning and design with Cursor AI NCOP. No Code, Only Prompt

Intermediate

React, Next.js, cursor

[VOD] 6-Week Complete! High-Concentration Vibe Coding for Development Practice (Cursor AI, Figma)

codecamp

Practical React Native for iOS/Android App Development - Basic

Wintho

The goal is to acquire basic knowledge of React Native for mobile app front-end development. This course is designed to enable non-experts to easily develop native mobile apps by utilizing languages/APIs with low entry barriers.

Basic

React Native, React, ES6

Practical React Native for iOS/Android App Development - Basic

Wintho

TypeScript Korea: React with TypeScript Seminar

woongjae

This course is about TypeScript and React.

Intermediate

React, TypeScript

TypeScript Korea: React with TypeScript Seminar

woongjae

[PROKIT] Frontend Project Kit: Building a Timer App

nybs

This is a mission content for a frontend project. We provide a PRD planning document, Figma design, and API endpoints so you can practice the project by implementing a timer app called DevTime yourself. Make the knowledge you've learned so far completely your own by implementing a project at a level similar to an actual service 🚀

Beginner

React

[PROKIT] Frontend Project Kit: Building a Timer App

nybs

Web game that lets you learn by following along

Reviews from Early Learners

4.0

What you will gain after the course

If you follow along, you can play web games in no time? 🎮

This course's unique features ✨

I recommend this to these people 🙋‍♀️

What you'll learn 📚

Expected Questions Q&A 💬

Recommended for these people

HelloThis is .css-1q3zd4q{text-decoration-line:underline;text-underline-position:under;text-underline-offset:1px;}

Curriculum

Reviews

John Ahn's other courses

Similar courses

Recommended for
these people

Hello
This is