JavaScript 2D Game Tutorial (with physics)
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: https://www.udemy.com/course/build-an...
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):
https://www.skillshare.com/en/r/profi...
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: https://www.frankslaboratory.co.uk/do...
Background: https://www.frankslaboratory.co.uk/do...
Overlay: https://www.frankslaboratory.co.uk/do...
Player: https://www.frankslaboratory.co.uk/do...
Obstacles: https://www.frankslaboratory.co.uk/do...
Egg: https://www.frankslaboratory.co.uk/do...
Toad single: https://www.frankslaboratory.co.uk/do...
Larva: https://www.frankslaboratory.co.uk/do...
Toads: https://www.frankslaboratory.co.uk/do...
Bonus images, environmental art, HQ separate pieces in PSD format etc: https://www.frankslaboratory.co.uk/do...
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:
• JavaScript Game Development Masterclass 2022
⭐️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 / code_laboratory
👍 Check out some of my source code on CODEPEN https://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
In questa pagina del sito puoi guardare il video online JavaScript 2D Game Tutorial (with physics) della durata di ore minuti seconda in buona qualità , che l'utente ha caricato Franks laboratory 03 febbraio 2023, condividi il link con amici e conoscenti, su youtube questo video è già stato visto 45,919 volte e gli è piaciuto 1.2 mille spettatori. Buona visione!
