Multi-room Platformer Game Tutorial with JavaScript and HTML Canvas
Vložit
- čas přidán 13. 05. 2024
- Thank you INTO THE AM for the tees! Get yours now and get 10% off site-wide when you click this link: intotheam.com/chriscourses
Game Assets: drive.google.com/drive/u/0/fo...
GitHub Source Code: github.com/chriscourses/kings...
Kings and Pigs Asset Pack by PixelFrog: pixelfrog-assets.itch.io/king...
Get 76 more hours of tutorial content only at chriscourses.com/
0:00 What we're building
0:40 Sponsor: Into the AM
1:18 Project setup
9:49 Create a player
26:49 Gravity
32:27 Player movement
45:59 Background sprite
55:38 Collision blocks
1:18:52 Collision detection
1:39:28 Sprite animation
1:55:32 Hitbox implementation
2:08:17 Sprite swapping
2:20:43 Entering doors
2:38:41 Change levels
3:02:38 Finished product
3:02:59 Next steps
#intotheam
Big thanks to INTO THE AM for supporting the creation of this video. Help support them and get 10% off sitewide using intotheam.com/chriscourses
@@delanataylor people don't search for "I'm doing stuff and you just watch," they search for "tutorial." SEO matters in business, including CZcams.
Hey I have a question I’m jumping way too fast and can’t figure out how to make it jump a bit slower
Edit: nvm turned out I didn’t add a space😅
all i did was fall asleep for 40 mins...
Yeah but I falled asleep for the whole video
Lmao frr
What I like the most is your code improvement over each game. Awesome staff!
Hey I wanted to say that your tutorials are awesome. Structure of these videos is very cool for me because you divide it into sections - for example "Collision detection", "Collision blocks". I like to pause right after you end explaining what you are about to code and I code it in my own way. Thanks for beeing an inspirational creator. Have a good day and greetings from Poland.
great tutorial as a beginner I appreciate how you explain what you are doing and don't just code through as fast as you can, it is nice to see what is working and why something "breaks".
Chris! Awesome course! Thanks for your knowledge and thanks for sharing this knowledge with us!
Also if I forgot to upload any assets, just let me know here. Will be sure to add anything that's missing 👍
Excuse me! I have a question, this was the very thing I was looking for, but I'm also wondering how you would be able to add a grid map?
what about the beautiful background music and sounds 😢
Chris, I'd like to thank you for your awesome work. This is the best channel of 2022 I found this year. Top of the top.
Yes, i totally second this.
+1❤
This is gonna be the year I get into coding, and this channel is straight up gonna be the reason for it. Top notch content and all for free, much appreciated!
How did it go?
@@kynshra8960 its been a slow process but I've noticed some improvement in other areas, JavaScript aside, I can now work with config files and make super basic websites!
@@kynshra8960they died of ketamine overdose may them rest in peace
Awesome! It feels like you've coded this exact thing maaany many times, because you do it flawlessly :)
Love these videos definitely want to support you making more
You make the videos i need to improve my programming skills. Thank you so much for the effort that you put on this tutorials. A hidden gem indeed. 💎👑
Superb as always 👍
Another amazing tutorial! Your pace and clarity are just incredible. Your latest videos totally deserve more views!
the pace of 0.4 tortoises
Very well done Chris
Great tutorial as usual! You're awesome 😎
This is one of the best tutorials i've ever seen.
The presentation on these videos really sets them apart from the average CZcams programming tutorial. Clean quality audio recording and clear, well spoken instructions elevates the final product. Great job.
Thank you for the Tutorials!
I am totally jaw dropped. You are incredible in JS coding.
You are the best. Thank you so much for this course !!
Here's a little css to enhance the graphics a little bit:
canvas {
image-rendering: pixelated;
}
You can also want to center the game:
body {
background: black;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
Do you know the name of the program he uses at the end to add the doors?
this tutorial was incredible, thank you!! I'm surprised at how well I was able to follow along and understand. However, I can never imagine being able to come up with how to do this on my own because it is SO complex lol.
Can u ask u smthn? Abt the tiles im not sure why it won’t show the same as how it shows on he’s end 57:21 If u know how to fix it pls lmk
Great content, chris, thank you very much!
I’ve programmed with python and attempted swift. But the tutorials for swift were not great and I really struggled. I never thought I’d pickup html and js, but your videos showed up on my feed. I don’t think any previous channel I’ve followed has been able to show me so many important components of a language and also make it easy to understand! You’re killing it with these tutorials.
his voice is amazing and so is his concise and always clear way of explanation .
this tutorial its awesome,
thanks!!
yow you are a genius, I've learned alot! Thanks man for giving valuable tutorials 🔥
I am a HTML5 JavaScript Game dev myself and I learned best way to make "dynamic sprite processing" from this great tutorial! Thanks and love 🙏
this is a great tutorial. tyvm ✌I have been a web dev for 10 years but never fucked with canvas. you explain this so simply it should be pretty easy to get to grips with after this. implementing gravity like that reminds me of my first actionscript game. going to make something cool with this real soon lol. if i remember ill come back here and drop a link lol.
OMG, it really worked. Thank you so much!!
Thank you for the video it's informative for someone like me who is basically a beginner! Very clear and easy to understand I like the step by step!
That's great! Thank you so much!
THIS IS THE MOST USEFUL VIDEO I SEEN
thank you straight to the point
Man, u r awesome. Keep doing what you're doing! And greetings from Belarus🎉
are u serious? THIS IS SOOOOOO COOOOLLLL BY FAR THE BESTTTT PROJECT U HAVE DONE SO FAR!!! In the start itself I can tell its gonna be a bit advance JS for a high-school student like me lmaoo but i will try my best to gain knowledge from this amazing tutorial!!!!
I found the kings and pigs tileset a couple weeks ago and really wanted to turn it into a game for a 16-bit console, but I couldn't get the damn tiles to fit together like yours and his preview images, and then I just stumbled across this video thumbnail like a sign from God.. AND YOU HAVE THE LEVEL PRE-MADE?! 😤
Thanks for all this content. Your tutorials are the best 🔥
The most fluent and understandable explanation I have ever watched, thank you very much.
on the same era, with javascript game, there are no other contents like this bro! i already bought your subscription for 1year. make good contents more!!thx
Thank you! Really appreciate that support on the yearly sub. Hope you've enjoyed some of the premium content over there, I finally have the rest of the Pacman course in the works 🥲
great!!! ❤
Great tutorial, thanks. I see that you have an aversion to semi-colons. I 'd recommend highly always using semi-colons. Avoids some potential nasty pitfalls later on.
Thanks for your mind-blowing work, Chris! It would be an awesome idea if you recreate Icy Tower with javascript.
Bro, muchas gracias de verdad !!!!
Good Work, especially u explain every single step u are doin , abo, membership + Thumbs up
@Chris Courses Happy to see you using object literals for sprite swapping :) One last note: be careful of attaching functions to animation data (either named such as image() or your own custom anonymous functions (such as the GSAP stuff). Often times animation data is stored in json files, and json cannot have things like functions set to them in the json file itself. To get around that, you load the json in, then dynamically attach additional functionality to them after its loaded in, or just dont alter it at all (this helps a lot of you plan on saving animation data to a file for a save game feature). I hope that makes sense.
Next up? Dynamically generated levels ala Binding of Isaac with maze like generation? Just an idea :) I learned quite a deal trying that out and could be an idea for you to try (google recursive backtracker) Cheers!
Long time no see man. Very nice tutorial 😇🙏
First thanks a lot for all those tutorials thay help me a lot !
I just pointed an issue about player movement when we press multiple keys at the same time.
Press RIGHT then LEFT then release LEFT lets you go right then left then right, no problems it works.
Press LEFT then RIGHT, player keeps going to the left not reacting to the second press.
To solve this issue I did 2 things :
- In the event listeners, I toggle keys.X.pressed only if (!event.repeat).
- In index.js I put a variable called lastDir. It's set to 'none' by default when player is not moving, to 'left' if only LEFT is pressed, to 'right' only if RIGHT is pressed. Then before checking if a sole key is pressed I check if both LEFT and RIGHT are pressed. If so I make player go the opposite direction told my lastDir + I don't update lastDir.
Don't really know why it works but it does 😅
Thx bro,the best拾
You are my hero ❤
Thank you soooooo much!
1:24:00 you can use 'every' method for this. It will stop iterating when falsy value is returned from callback
BRO U ARE SOO SMARTT
Your channel is lit bro...
Thanks a lot 🛐
thank you so much~~
It is pretty good but it could hang for larger maps like in pokemon or metroidvenias instead you should use images and create a for loop for collisons with middle image it means you will need three images drawed on top of each other and need to check collision with middle image it can make game little blurry but it will make your game smooth fast and low on space
Great tutorial, I have few questions, how can multiple doors be applied into one level? and if I go to a previous level how can I spawn into a new position instead of the same position it was before in that level?
Hey chris, quick question If I am building a game from one of your tutorials and I want to make the game a full stack development project', I was wondering if you have any tutorials on how to integrate something like node, or node.js into the project for lets say a sign in page, or like a statistical point tracker?
Loving your tutorials - incredible stuff! Anyone know the following:
How to make the player spawn on Level 3 to the idleLeft position instead of the default idleRight?
How to solve the double jumping situation when holding down 'w'?
Experimenting with both, but haven't quite got it working.
Thank you for the Tutorials!
Do you plan to make a game based on ECS, without using third-party libs?
;v esta muy bueno saludos bro 👍😎
Tyy bang, sehat selalu!
Really appreciate your job here man. Could you be so kind in telling me the difference between coding this in JS and in Python Py game? Doing so, are both possible to create an .exe file to start the game or it would only run on a browser? Thank you and I wish you much success! Regards from Italy.
Nice one
You are a miracle.
you can make a walkthrough of platform game, NES style games, lode runner, nuts and milk, wrecking crew, etc. Where the game scenario is built dynamically by blocks
great teacher
Nice one :)
NIIICE!
My best developer uses my fav Javascript!
Chris, my superman🤣
I am attempting to follow along but I do not want to use the "w" key to jump and instead want to use space. I figured out I could type case ' ': to simulate the space but when you enter the const, there are no single quotes. I am unsure of how to set the const to use the space key.
I can't get oncomplete in gsap to stop looping. Any suggestions?
amazing!! how do i make the character have a swingable hammer??
Hi what text editor do you use?
AMESOME ! but how can you go back to the previous level ?
u are a boss👍
Not hating… just curious…
Why go through all the extra work to convert the collisions data into a 2d array? 2D Position in 1D array is y*width+x. I also wonder why it is necessary to create all of these collisionBlock objects? It seems 2 methods drawCollisionBlocks (would allow rendering the red boxes where they should be for debugging) and a quick lookup in the collision data to see if the value at the position of the current sprite location is 292 or not, would have taken much less work and created less overhead… so I’m curious as to weather this was necessary and why? Or what benefits come with doing it this way? My guess is that it is a style choice?
How would you recommend turning something like this into a desktop game? Electron?
hey, I am sorry , I am a newbie at web dev, can you tell me if this is a dynamic website ? I am making a project for uni, we have been assigned to make a dynamic website , I am assuming a video game would be pretty dynamic, right?
one and only easy and working method
Bro can you please give the whole tiles set in PNG. Cause I want to make my own custom and larger map. 😢 I appreciate all of your effort. Thanks
I'm still a little confused why you're using && operators for collisions around 1:27:09 . wouldn't that if statement only run if *all* sides are colliding at the same time? I see that it doesn't work that way, I'm curious why it works with && and not OR
It basically checks whether its colliding on both sides at the same time which cant be achieved using OR
anyone else having issues with the onComplete method ??
This is some awesome tutorials and I love learning from you. but I hit some roadblocks every now and then xD
Edit: nevermind xD i figured it out
did you have an endless loop? If so, how did you solve it?
How would I go about adding enemies to this? I tried so much but I couldn't implement anything with this system
I ran into a problem when separating my Player class into its own file, where I got an error saying "Uncaught ReferenceError: c is not defined". "c" is our canvas context variable which doesn't exist in the Player.js file, so to fix it I had to add "c" as a parameter to the constructor class, and pass it in when instantiating a new Player. My question is, what did you do differently such that your code still worked even though you don't pass in "c" as a parameter to the Player class's constructor?
Player class might be imported after "c" is defined. If that's the case, things should still work when importing files via a script tag into a global namespace. Passing through via function like you're doing it though is the "correct" way since you'll be able to tell where certain variables are coming from
Awesome)
around 38:40 you can jump infinitely by just holding down the 'w' key
Bruda u r th bst
nc bro
guys hello when i put the code for the animation my "red square" doesn't move can anyone help me fix this
hey man you should create a game engine in javascript, good job!!
I have a question, is Javascript and HTML canvas good for large scale indie games?
Where do you get the soundtrack and sound effects from?
GOD bless you
OMFG- thank you for your work ! I can t wait to go back home and start this project to night, but mister Chris, please, please have mercy upon us ... we need a tutorial of javascript about an inventory system, add and drop is enough and hide the inventory via a button, there is ONLY ONE tutorial about inventory-js from poth programming and it is more of a walkthrough code not a learning brick by brick process like you teach, pothonprogramming shared his github repo with community but his tutorial is absolutely useless because I cant replicate that in a way where i would be confident to include info from him into a personal project of mine, please, please once again, if you find a bit of time to show us an how to inventory, would be great !!!!
Hmm maybe I could add this into an RPG course. I can't guarantee it, but I'll definitely keep it in mind for some of the next vids I have comin out 🙌
Instead of using "event.key" at 35:00 , I think it is much better to use "event.code" Which is for w key case is KeyW. Key codes are global, no matter what language is your code it's gonna be the same. event.code are based on the physical key. So let's say by accident someone had caps lock on. the Eevent.key would be capital W, meanwhile we are listening for small w. the event.code gonna be the same.
Great tip, I was wondering how to get around this. Thanks, it turned out great!
All your courses on your website are free?! So what is the pricing for? Which course is a paid course???
wat program were you using to type your code?
sublime text