Multi-room Platformer Game Tutorial with JavaScript and HTML Canvas
2024 ж. 22 Мам.
202 193 Рет қаралды
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 KZhead.
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.
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❤
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!
Awesome! It feels like you've coded this exact thing maaany many times, because you do it flawlessly :)
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. 💎👑
Love these videos definitely want to support you making more
Another amazing tutorial! Your pace and clarity are just incredible. Your latest videos totally deserve more views!
the pace of 0.4 tortoises
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.
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
Superb as always 👍
The presentation on these videos really sets them apart from the average KZhead programming tutorial. Clean quality audio recording and clear, well spoken instructions elevates the final product. Great job.
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?
Great tutorial as usual! You're awesome 😎
I am totally jaw dropped. You are incredible in JS coding.
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
his voice is amazing and so is his concise and always clear way of explanation .
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?! 😤
yow you are a genius, I've learned alot! Thanks man for giving valuable tutorials 🔥
This is one of the best tutorials i've ever seen.
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!
You are the best. Thank you so much for this course !!
Very well done Chris
Great content, chris, thank you very much!
Thanks for all this content. Your tutorials are the best 🔥
Thank you for the Tutorials!
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!!!!
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!!
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 🙏
Long time no see man. Very nice tutorial 😇🙏
thank you straight to the point
this tutorial its awesome, thanks!!
The most fluent and understandable explanation I have ever watched, thank you very much.
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?
THIS IS THE MOST USEFUL VIDEO I SEEN
That's great! Thank you so much!
Good Work, especially u explain every single step u are doin , abo, membership + Thumbs up
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?
Thanks for your mind-blowing work, Chris! It would be an awesome idea if you recreate Icy Tower with javascript.
1:24:00 you can use 'every' method for this. It will stop iterating when falsy value is returned from callback
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.
Thank you for the Tutorials! Do you plan to make a game based on ECS, without using third-party libs?
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 😅
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.
@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!
amazing!! how do i make the character have a swingable hammer??
Bro, muchas gracias de verdad !!!!
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.
How would I go about adding enemies to this? I tried so much but I couldn't implement anything with this system
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?
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!!! ❤
How would you recommend turning something like this into a desktop game? Electron?
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.
Where do you get the soundtrack and sound effects from?
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
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 😢
Thank you soooooo much!
Your channel is lit bro...
Thanks a lot 🛐
AMESOME ! but how can you go back to the previous level ?
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
Thx bro,the best拾
Hi what text editor do you use?
I can't get oncomplete in gsap to stop looping. Any suggestions?
You are a miracle.
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
You are my hero ❤
guys hello when i put the code for the animation my "red square" doesn't move can anyone help me fix this
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
around 38:40 you can jump infinitely by just holding down the 'w' key
I have a question, is Javascript and HTML canvas good for large scale indie games?
BRO U ARE SOO SMARTT
Can anyone tell me if we need graphic card for game development or not?
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?
great teacher
Which code editor you used
thank you so much~~
Nice one
Tyy bang, sehat selalu!
My best developer uses my fav Javascript!
one and only easy and working method
wat program were you using to type your code?
sublime text
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
All your courses on your website are free?! So what is the pricing for? Which course is a paid course???
Chris, my superman🤣
;v esta muy bueno saludos bro 👍😎
Nice one :)
Awesome)
u are a boss👍
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!
Bruda u r th bst
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 🙌
NIIICE!
Never seen anyone do < -0 before, shouldn't that just be < 0?
hey man you should create a game engine in javascript, good job!!