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!
@@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!
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".
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.
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.
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.
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 🥲
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; }
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?! 😤
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.
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 😅
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.
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.
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
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?
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.
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?
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
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?
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.
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
@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!
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?
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.
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
It’s simply magical, going to sleep watching a minecraft vid and waking up to this at 4:57 AM
🤣🤣 fr
all i did was fall asleep for 40 mins...
Yeah but I falled asleep for the whole video
Lmao frr
same lol
me too
I woke up to this playing lmao
What I like the most is your code improvement over each game. Awesome staff!
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
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".
I am totally jaw dropped. You are incredible in JS coding.
I managed to follow this tutorial to the end! Thanks for making it clear and easy to understand!
I like the object-oriented approach. Good stuff!
his voice is amazing and so is his concise and always clear way of explanation .
Superb as always 👍
This is one of the best tutorials i've ever seen.
Chris! Awesome course! Thanks for your knowledge and thanks for sharing this knowledge with us!
Wow! This is an amazing tutorial- this is the first time I've watched JavaScript and it actually CLICKED and became easier to understand. Thank you ❤
Mr Chris, we love you man, thanks for this treasure
much love, thanks for watching 🙏
Very well done Chris
Another amazing tutorial! Your pace and clarity are just incredible. Your latest videos totally deserve more views!
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 THE MOST USEFUL VIDEO I SEEN
Great content, chris, thank you very much!
Bro, muchas gracias de verdad !!!!
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 🙏
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
Thank you for the Tutorials!
My subconscious is going to be such a good coder... To bad it can't just pass on all the information to me for when I finally arise from my slumber 😂
Fire course bro!!
Man, u r awesome. Keep doing what you're doing! And greetings from Belarus🎉
The most fluent and understandable explanation I have ever watched, thank you very 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!
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
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.
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!!!!
You are the best. Thank you so much for this course !!
yow you are a genius, I've learned alot! Thanks man for giving valuable tutorials 🔥
1:24:00 you can use 'every' method for this. It will stop iterating when falsy value is returned from callback
Great tutorial as usual! You're awesome 😎
OMG, it really worked. Thank you so much!!
Good Work, especially u explain every single step u are doin , abo, membership + Thumbs up
Damnnn
Why do I always land on this video when I wake up??
Long time no see man. Very nice tutorial 😇🙏
Thanks for all this content. Your tutorials are the best 🔥
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.
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!!! ❤
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. 💎👑
Your channel is lit bro...
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?
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?! 😤
That's great! Thank you so much!
thank you straight to the point
this tutorial its awesome,
thanks!!
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.
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 😅
You are a miracle.
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.
My best developer uses my fav Javascript!
You are my hero ❤
Tyy bang, sehat selalu!
BRO U ARE SOO SMARTT
wat program were you using to type your code?
sublime text
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.
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
Hi what text editor do you use?
How would I go about adding enemies to this? I tried so much but I couldn't implement anything with this system
Thx bro,the best拾
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?
Where do you get the soundtrack and sound effects from?
Chris, my superman🤣
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.
guys hello when i put the code for the animation my "red square" doesn't move can anyone help me fix this
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?
amazing!! how do i make the character have a swingable hammer??
Can you make a vid for attacks?
Where do you making maps?
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
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?
I can't get oncomplete in gsap to stop looping. Any suggestions?
one and only easy and working method
AMESOME ! but how can you go back to the previous level ?
How would you recommend turning something like this into a desktop game? Electron?
Thanks a lot 🛐
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!
great teacher
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
Can anyone tell me if we need graphic card for game development or not?
I have a question, is Javascript and HTML canvas good for large scale indie games?
@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!
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?
;v esta muy bueno saludos bro 👍😎
Nice one :)
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.
Which code editor you used
Nice one
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
Thanks for your mind-blowing work, Chris! It would be an awesome idea if you recreate Icy Tower with javascript.
Thank you for the Tutorials!
Do you plan to make a game based on ECS, without using third-party libs?
u are a boss👍
NIIICE!