Uploaded February 2023 | Updated September 2026, 1 week ago
EXTENDED class with BONUS lessons and more free sprite sheets, full source code from 6 different stages as we progress with the project, HQ image source files and more:
🍄 Udemy: udemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650B
What makes a great game? Is it about beautiful, polished visuals or about gameplay that feels good and responsive? Is it about unique ideas, or maybe it's the little details, special secrets and Easter eggs? What are the ingredients in a perfect game development recipe?
Let's explore fantasy mushroom forest theme and learn all the techniques you need to make your own 2D games with vanilla JavaScript, HTML5, CSS3 and HTML Canvas. Have fun!
🍄 Skillshare (free 1 month trial that includes all my extended classes including this one):
skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=on
1
The pace and techniques in this course are beginner friendly. Existing knowledge of HTML, CSS & JavaScript is needed to follow the course. If you understand JavaScript basics and know what functions, for loops and arrays are, you will be able to get the maximum value out of this class.
🎨 Download Project Art assets 🎨
** All art assets for this class were made by me or by artists I hired, there is NO copyright, you can download and use these freely for any project you want! Click the LIKE on the video if you want more free game art soon! :D
All project images: frankslaboratory.co.uk/downloads/109/all_project_images.zip
Background: frankslaboratory.co.uk/downloads/109/background.png
Overlay: frankslaboratory.co.uk/downloads/109/overlay.png
Player: frankslaboratory.co.uk/downloads/109/bull.png
Obstacles: frankslaboratory.co.uk/downloads/109/obstacles.png
Egg: frankslaboratory.co.uk/downloads/109/egg.png
Toad single: frankslaboratory.co.uk/downloads/109/toad.png
Larva: frankslaboratory.co.uk/downloads/109/larva.png
Toads: frankslaboratory.co.uk/downloads/109/toads.png
Bonus images, environmental art, HQ separate pieces in PSD format etc: frankslaboratory.co.uk/downloads/109/bonus_image_source_files.zip
Today we will learn:
- How to implement a very simple AI to make the creatures feel alive
- How to control the FPS of our game and how to measure time to trigger periodic events
- How to restart the game by pressing a button
- How to apply collision detection, resolve collisions and use that to simulate physics
- How to use the built-in drawImage method to draw randomised game environments and animated characters from a sprite sheet
- How to capture mouse position and animate an 8 directional sprite sheet based on the relative position between the mouse and the player character
- How to use HTML5, CSS3 and plain vanilla JavaScript to build a game from scratch. We will write and understand every line of code, we will not rely on any external frameworks or libraries
... and much more
For more vanilla JavaScript GAME DEVELOPMENT check out this playlist:
youtube.com/playlist?list=PLYElE_rzEw_uryBrrzu2E626MY4zoXvx2
⭐️Tutorial Contents ⭐️
00:00:00 Intro
00:00:45 Basic setup
00:04:35 Object oriented programming in JavaScript
00:08:58 Drawing the player
00:16:08 Mouse controls
00:22:08 Making the player move
00:29:48 Creating obstacles
00:36:21 Non-overlapping obstacles
00:42:56 Randomised images from a sprite sheet
00:48:11 Positioning rules
00:54:10 Reusable collision detection method
00:58:15 Let's add physics
01:06:22 8-directional sprite animation
01:10:36 Animation angles
01:17:42 Debug mode
01:21:15 Player movement boundaries
01:24:04 FPS
01:33:43 Egg class
01:38:36 Periodically adding new eggs
01:45:35 Egg physics
01:51:10 Draw order
01:59:28 Enemy class
02:10:47 Larva class
02:14:14 Egg hatching
02:24:12 Larva sprites and collisions
02:28:50 Gaining score points
02:31:31 Particle effects
02:40:26 Particle motion
02:47:30 Randomized enemy skins
02:51:53 Win and lose condition
03:02:25 Restart game
Let's be friends
👍 You can message me on TWITTER twitter.com/code_laboratory
👍 Check out some of my source code on CODEPEN codepen.io/franksLaboratory
The description of this video may contain affiliate links, which means that if you buy one of the products that I recommend, I'll receive a small commission without any additional cost for you. This helps to support the channel and allows me to continue making videos like this. Thank you for the support!
#frankslaboratory
EXTENDED class with BONUS lessons and more free sprite sheets, full source code from 6 different stages as we progress with the project, HQ image source files and more:
🍄 Udemy: udemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650B
What makes a great game? Is it about beautiful, polished visuals or about gameplay that feels good and responsive? Is it about unique ideas, or maybe it's the little details, special secrets and Easter eggs? What are the ingredients in a perfect game development recipe?
Let's explore fantasy mushroom forest theme and learn all the techniques you need to make your own 2D games with vanilla JavaScript, HTML5, CSS3 and HTML Canvas. Have fun!
🍄 Skillshare (free 1 month trial that includes all my extended classes including this one):
skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=on
1
The pace and techniques in this course are beginner friendly. Existing knowledge of HTML, CSS & JavaScript is needed to follow the course. If you understand JavaScript basics and know what functions, for loops and arrays are, you will be able to get the maximum value out of this class.
🎨 Download Project Art assets 🎨
** All art assets for this class were made by me or by artists I hired, there is NO copyright, you can download and use these freely for any project you want! Click the LIKE on the video if you want more free game art soon! :D
All project images: frankslaboratory.co.uk/downloads/109/all_project_images.zip
Background: frankslaboratory.co.uk/downloads/109/background.png
Overlay: frankslaboratory.co.uk/downloads/109/overlay.png
Player: frankslaboratory.co.uk/downloads/109/bull.png
Obstacles: frankslaboratory.co.uk/downloads/109/obstacles.png
Egg: frankslaboratory.co.uk/downloads/109/egg.png
Toad single: frankslaboratory.co.uk/downloads/109/toad.png
Larva: frankslaboratory.co.uk/downloads/109/larva.png
Toads: frankslaboratory.co.uk/downloads/109/toads.png
Bonus images, environmental art, HQ separate pieces in PSD format etc: frankslaboratory.co.uk/downloads/109/bonus_image_source_files.zip
Today we will learn:
- How to implement a very simple AI to make the creatures feel alive
- How to control the FPS of our game and how to measure time to trigger periodic events
- How to restart the game by pressing a button
- How to apply collision detection, resolve collisions and use that to simulate physics
- How to use the built-in drawImage method to draw randomised game environments and animated characters from a sprite sheet
- How to capture mouse position and animate an 8 directional sprite sheet based on the relative position between the mouse and the player character
- How to use HTML5, CSS3 and plain vanilla JavaScript to build a game from scratch. We will write and understand every line of code, we will not rely on any external frameworks or libraries
... and much more
For more vanilla JavaScript GAME DEVELOPMENT check out this playlist:
youtube.com/playlist?list=PLYElE_rzEw_uryBrrzu2E626MY4zoXvx2
⭐️Tutorial Contents ⭐️
00:00:00 Intro
00:00:45 Basic setup
00:04:35 Object oriented programming in JavaScript
00:08:58 Drawing the player
00:16:08 Mouse controls
00:22:08 Making the player move
00:29:48 Creating obstacles
00:36:21 Non-overlapping obstacles
00:42:56 Randomised images from a sprite sheet
00:48:11 Positioning rules
00:54:10 Reusable collision detection method
00:58:15 Let's add physics
01:06:22 8-directional sprite animation
01:10:36 Animation angles
01:17:42 Debug mode
01:21:15 Player movement boundaries
01:24:04 FPS
01:33:43 Egg class
01:38:36 Periodically adding new eggs
01:45:35 Egg physics
01:51:10 Draw order
01:59:28 Enemy class
02:10:47 Larva class
02:14:14 Egg hatching
02:24:12 Larva sprites and collisions
02:28:50 Gaining score points
02:31:31 Particle effects
02:40:26 Particle motion
02:47:30 Randomized enemy skins
02:51:53 Win and lose condition
03:02:25 Restart game
Let's be friends
👍 You can message me on TWITTER twitter.com/code_laboratory
👍 Check out some of my source code on CODEPEN codepen.io/franksLaboratory
The description of this video may contain affiliate links, which means that if you buy one of the products that I recommend, I'll receive a small commission without any additional cost for you. This helps to support the channel and allows me to continue making videos like this. Thank you for the support!
#frankslaboratory
