Skip to main content
CourseFlix

Build Animated Physics Game with JavaScript

3h 29m 27s
English
Paid

What makes a great game? Is it about beautiful, polished visuals or engaging gameplay that feels responsive? Could it be about unique ideas, special secrets, and Easter eggs? This course explores the essential ingredients of a perfect game development recipe.

Course Overview

In this class, we will dive deep into sprite animation, interactivity, and 2D physics. You'll learn 10 important techniques every game developer needs to know, applying them in a real project. By the end of this course, you'll have a solid foundation in game development.

Course Materials

Students will receive a wealth of 2D professional high-resolution game art for free. This includes environmental and character art assets as ready-to-use sprite sheets. You'll also get source files with separate pieces, perfect for editing colors, creating your own mushrooms and creatures, or rigging your own animations.

What You'll Learn

  • How to implement a simple AI to make creatures feel alive.
  • Ways to control the FPS of your game and measure time to trigger periodic events.
  • Methods to restart the game by pressing a button.
  • Techniques for applying collision detection to resolve collisions and simulate physics.
  • Using the built-in drawImage method to create randomized game environments and animate characters from a sprite sheet.
  • Capturing mouse positions to animate an 8-directional sprite sheet based on the relative position between the mouse and the player character.
  • Building a game from scratch using HTML5, CSS3, and plain vanilla JavaScript without relying on external frameworks or libraries. You'll write and understand every line of code.
  • ... and much more!

Prerequisites

This course is beginner-friendly, but existing knowledge of HTML, CSS, and JavaScript is needed. If you understand JavaScript basics and are familiar with functions, for loops, and arrays, you'll gain maximum value from this class.

Have fun and start creating your own games today! :)

About the Author: udemy

udemy thumbnail

Udemy is a global online marketplace for teaching and learning. It connects students with instructors who share skills in many fields.

Who Uses Udemy

Millions of learners use Udemy to gain skills for work and personal growth. Companies, governments, and nonprofits also use Udemy to train their teams.

What Udemy Offers

Udemy provides a curated set of business and technical courses. These courses help teams build practical skills and support ongoing learning at work.

Watch Online 36 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 36 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Introduction
All Course Lessons (36)
#Lesson TitleDurationAccess
1
Introduction Demo
00:47
2
Basic setup
03:52
3
Object Oriented Programming in JavaScript
04:22
4
Drawing the player
07:11
5
Mouse controls
06:00
6
Making the player move
07:40
7
Creating obstacles
06:34
8
Non-overlapping obstacles
06:36
9
Randomized images from a sprite sheet
05:15
10
Positioning rules
06:00
11
Reusable collision detection method
04:05
12
Physics
08:08
13
8 directional sprite animation
04:14
14
Animation angles
07:06
15
Debug mode
03:34
16
Player movement boundaries
02:57
17
FPS
09:40
18
Egg class
04:54
19
Periodically adding new eggs
07:00
20
Egg physics
05:35
21
Draw order
08:18
22
Enemy class
11:20
23
Larva class
03:27
24
Egg hatching
09:59
25
Larva sprites and collisions
04:38
26
Gaining score points
02:41
27
Particle effects
08:56
28
Particle motion
07:05
29
Randomised enemy skins
04:25
30
Win and lose condition
10:32
31
Restart game
06:32
32
Extending enemy class
05:56
33
Simple fullscreen mode
03:08
34
Player sprite sheet full animation
02:37
35
Larva sprite sheet full animation
01:44
36
Enemies sprite sheet full animation
06:39
Unlock unlimited learning

Get instant access to all 35 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Related courses

  • Youtube clone thumbnail

    Youtube clone

    Sources: Nomad Coders
    Learn to create a comprehensive YouTube clone covering front-end and back-end with JavaScript, Node.js, and MongoDB. Enhance your developer skills by building
    15 hours 41 minutes 20 seconds 5 / 5
  • Grokking JavaScript Fundamentals thumbnail

    Grokking JavaScript Fundamentals

    Sources: DesignGurus.io
    Start learning JavaScript from scratch. This course is ideal for those who want to master programming and web development without any prior experience.
  • JavaScript Algorithms and Data Structures Masterclass thumbnail

    JavaScript Algorithms and Data Structures Masterclass

    Sources: udemy
    This course crams months of computer science and interview prep material into 20 hours of video. The content is based directly on last semester of my in-person coding bootcamps…
    21 hours 47 minutes 46 seconds 5 / 5
  • Build a Podcast Player with JavaScript, CSS and Node.js thumbnail

    Build a Podcast Player with JavaScript, CSS and Node.js

    Sources: zerotomastery.io
    Learn to create a full-stack podcast player using JavaScript, CSS, and Node.js. Develop skills in web development and add a project to your portfolio.
    8 hours 30 minutes 51 seconds
  • Full-Stack Web Developer Bootcamp with Real Projects thumbnail

    Full-Stack Web Developer Bootcamp with Real Projects

    Sources: udemy
    This Course covers full process of web development from scratch till deployment with domain name. We will use Node, Express, MongoDB to build Server side which
    22 hours 11 minutes 13 seconds
  • Modern JavaScript thumbnail

    Modern JavaScript

    Sources: ui.dev (ex. Tyler McGinnis)
    This is a 'living' course which updates as JavaScript does. If you haven't taken a look at the latest versions of JavaScript the last few years you've been missing out. From…
    3 hours 4 minutes 3 seconds