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