JavaScript 2D Game Tutorial (with physics)

Показать описание

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!

🍄 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:
🍄 Skillshare (free 1 month trial that includes all my extended classes including this one):
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

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:

⭐️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

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, HQ image source files and more:
🍄 Skillshare (free 1 month trial):

Frankslaboratory

Uncanny timing Frank. I was literally going to contact you today to say I hadn't seen or heard from you for a couple of months. Now I know why. Thanks for the upload.

nicklansbury

Thank you for doing this, I've been really hungry to learn, and am thankful that you made this so I pass time and learn something.

yop

I did it!! first time I ever get involved in videogames development, thank you so much Frank you are great!!

alejandrodiez

It`s awesome when old things reappears in new videos. It was year or two ago when was published video about circular collision. And here all objects are like this)

mister_i_

I'm a front end developer; and I ALwas struggled with javascript which seems hard for me to use cause I have a poor understanding of it's advanced concepts. but since I discovered this channel I fell that I'm being more confortable with it; and I fell that I enjoy while learning. Thank you for The big effort you put in these videos.

DevBoy-hdkr

Thanks Franks.. you're tutorials always motivates me to learn more about JS

codingphil

Absolutely the best! Great tutorial and I like the visual part btw! Awesome art style ;)

rrahll

Hey man. I was a game developer for many years. I am liking watching a lot of your tutorial vids. Mostly stuff I know but picking up a few tips here and there and its all inspirational. Cool stuff!

jasonboyd

YEEESSSS! MORE FRANK! Missed you, man. And thanks for more amazing content!

c__beck

wow! unbelievable, thanks so much for this Art 🎉

mohammedabujayyab

So good on so many levels. I use JavaScript only a little for smaller projects but never really got too familiar with ES6. So it was really great to see this. And all the game mechanIcs... I mean what shall I say what hasn't been already said in the comment section. Super mega thanks for the efforts put into this, Frank! Must have taken quite a long time! Much appreciated.
Did add "R" reset only on gameOver = true,
Didn't notice any difference when playing with FPS on my MacBook. May be I did something wrong here. Anyways, loved the mechanics. Really helps as a dive into game development.

hannesrahmer

This looks like an awesome course to learn all the techniques you need to make your own 2D games with JavaScript. Can't wait to check it out!

LifeCodeGame

This looks like awesome fun! And thanks for doing a promotion, that's a sweet bonus for fans of the channel. I find it very inspiring to watch your videos even if I'm not a beginner but a dev too. Your focus on pure JS without frameworks and generative art are both spot on for me.

ViktorSarge

A very nice long video showing that for many simple games you do not need a game engine. Html, CSS and Javascript is more than enough really. It is more enjoyable creating these components as you make your game over puzzling over some object hierarchy and dropdowns to connect stuff in game frameworks imo. You can also package this game as a standalone executable by using for example NWJS or some other tool. Btw, I'd likely make a common class abstraction for any object in the game as they had so many common things with only some parameterized variations in how they displayed from their sprite sheet + collision circle. Could reduce code size by quite a bit and would develop the first somewhat generic object type that could be then reused for any other type of game you wanted to make. It is also possible to make these games without canvas even, but by just moving e.g. DIV elements around with images inside them (can use a sprite sheet just as well for this by setting background image and offset for example). CSS has a lot of powerful effect stuff even to simplify anything from drop shadows to display effects, and triggering these is as simple as giving the element in question a class.

jcl