Thanks Tom, working hard on these, but have been a huge slacker on the Pacman course. Finishing the multiplayer one here on TH-cam then deciding what to hit hard next
OMG, you're the the best course marker that i've ever seen! I'm not from eng-speaking country, but your tutorials are really clear and full of information! And also your web-site is JUST OMG I WANNA LIVE THERE ! It's soooo comfortable and useful! Plan to watch, study and grow up as developer by your courses AND to donate to you of cause! Your channel is the best!
Awesome. For the movement/collision, remember how Pac-Man plays: if you move through an aisle to the right, you can already press up, and once you can move up, it will change the direction. You never need to hold keys in real Pac-Man, just give orders of direction up front with small nudges with the stick. If you want to make it even more realistic, make the velocity 1, but change the amount of updates per second for pac-man and the ghosts, so you can adjust the speed of player and enemy gradually when the game advances.
This is an awesome tutorial! Easy to understand and broke down into meaningful and clear steps. I've learned so much coding chapter by chapter along with you. Thanks a lot and keep it up! 🙌
I am so thankful that i've made the right choice by watching your video I'm at the 2:25:33 mark (Add win condition) - I appreciated every single seconds (also had to go backward a few times to understand things more clearly) I don't know what else to say, just thanks for that free video man
@@ChrisCourses trust me, you will. Im watching every single video in your channel (pressing like), and all of them are pure gold. Amazing skills, totally envy you if i had at least half of your knowledge i would be able to reach my dream. (Find a job in USA or Canada). Keep it up!
at the confusing bit 1:04:17 when you are done with the function it would be nice if you even checked everything, that would be easier to follow. It took me a while because I had an error and couldn't find it. But it is a great tutorial
just finished this video for a school project. I've been writing notes of everything you said and explained and wrote the whole code with many comments and all these stuff. I just want to say that you are really REALLY good at teaching and thank u so much for this tutorial!! Bcz of you i now have huge interest in js and it might be my first time ever liking programming that much!! Unfortunatly i dont have the ability to get the premium package but i will support you in otherways! Thank u so much again
I tried to write a game using functional programming and realized that OOP allows to have more abstract interaction with different objects. Thanks Chris for using the latest JS updates.
Dear Jedi Chris WOW and WHOA!! What an amazing display of using advanced JS, with object-oriented techniques. You have a superb ability to rapidly code and speak, super clean and super clear, while doing it simultaneously! Much appreciation Jedi C. Double Jedi for you.
Chris, that was the hardest project for me. I had to start from the beginning twice because I couldn't figure out the paddings myself. I also didn't use game assets and just used 'strokeStyle'. Anyway, you're my hero. Keep up the good work!
A more compact way to do input handling: const keys = {}; onkeydown=onkeyup=e=>e.repeat||(keys[e.key]=e.type=='keydown'?1:0); then do a check like this: if(keys.w)console.log('up is pressed'): checking if space is pressed: if(keys[" "])console.log('space is pressed')
Hey Chris! Can you help me?? I am having a problem with the collision detection. Once I added that in the pac man is just on a continuous movement. So, if I press 'd' it will just keep going right until I press another key. For some reason the code player.position.x = 0 & player.position.y = 0 in the if statement(circleCollidesWithRectangle) isn't being read. Do you know why that is happening?
Theres no magic trick. Start somewhere, set small goals and stay consistent. “Success is the sum of small efforts repeated day in and day out.” A little bit of commitment per day compounds over time. Good luck!
what would the problem be with setting the velocity like this: case 'w': player.velocity.y = -5; player.velocity.x = 0; console.log(player.velocity); break; I don't seem to be having any problems with this so far. I'm at 53:42
Guys help! I tried doing this project using reactJS and i keep getting stuck on the ghost collisions. After a few random movements the ghost keep looping left and right over a boundary. Please fuc**** help me, i cant find any damn mistakes
I watched the collisions part several times only to realize why you need to loop through that boundaries array and making that circle rectangle object. *Insert The wire realisation meme*
hello Chris, I would add a validation to avid the Boundaries to be created everytime it will blow up the memory and cpu, by using this below: if(boundaries.length === 0) { .... }
I love all your videos! I'm trying to learn to code games by myself, since in college all I do is websites. Your easy tutorials motivates me to learn to code, I did the pokemon game and I'm doing this pac-man right now! Lol I still have some inssues with the player going throught the paths xD I just need to see that part 10 times more until I figure out what I did wrong. Keep it up! ^^
You should not use this movement code for production. On many keyboards some keys don't register if a key is already pressed (I think they are grouped somehow).
Chris is the pacman premium game available I was looking to purchasing it on your website? by itself or do i have to pay the monthly to access it? Thanks for the courses you make bro!
Not available yet, I'm pretty behind on courses in general atm, but hope to have that fixed within the next month when I hire an editor. Sorry bout the delay!
I really liked the video, it taught me a lot, thanks for that. But I found one bug for ghost movement simulation, which is when the map is different, and ghost collision array might be empty, like no collision with walls, ghost can move in 4 directions, but the code doesn't handle that case
Tried everything and wrote same code lines frame by frame but i can not get my collision logs this logs are empty. Checked everywhere and asked to chat gpt but couldnt fix it the problem ? Any solutions ?
This is a very good tutorial, but I'm a little lost bc i've reached 17:15 in the video and my draw function isn't working. I've made no syntax errors that I can see. Anyone else struggling? I'm using vs Code.
How do you make the map stay inside a responsive canvas? I added a second "map" to the left so I have two, however trying to make it run on mobile, the map assets wont stay inside. They go out of the canvas. Their position is moved using a const x and y offset and have tried to modify this to make it stay in the canvas. (I made them lets when doing this, im aware consts cant change)
I have a question - how do you get more effect from rewriting code after the author? so that my knowledge is well-established, should I write a similar application after going through the lesson or redo an existing one ? what to do, please advise ?
Is it just me or does anyone else feel the controls are terribly difficult? So much so I would envision the average player giving up in five or ten seconds. It's the cornering and change of direction. We never really solved that problem where the controls don't easily allow the player to, for example, make a downward turn between two blocks.
I will give you some advice so that you can increase your subscribers and have more views... hire a person who can translate your videos into Spanish, American people are not really interested in programming BUT LATIN ONES ARE SO BELIEVE ME, GET A TRANSLATOR AND YOU WILL GET MORE SUBSCRIBERS
Chris just don't stop making
javascript game tutorials.we are all subscribing to you.
These are currently the best JS game tutorials. I'll have to subscribe to add the additional features - sound, etc.
Thanks Tom, working hard on these, but have been a huge slacker on the Pacman course. Finishing the multiplayer one here on TH-cam then deciding what to hit hard next
OMG, you're the the best course marker that i've ever seen!
I'm not from eng-speaking country, but your tutorials are really clear and full of information!
And also your web-site is JUST OMG I WANNA LIVE THERE ! It's soooo comfortable and useful! Plan to watch, study and grow up as developer by your courses AND to donate to you of cause! Your channel is the best!
How this guy has so few subs? Let's help to share his content everyone
Awesome.
For the movement/collision, remember how Pac-Man plays: if you move through an aisle to the right, you can already press up, and once you can move up, it will change the direction. You never need to hold keys in real Pac-Man, just give orders of direction up front with small nudges with the stick. If you want to make it even more realistic, make the velocity 1, but change the amount of updates per second for pac-man and the ghosts, so you can adjust the speed of player and enemy gradually when the game advances.
changing the velocity creates a constant movement how would i go about updating it per second ? player.velocity.y = 1
Excellent tutorial, explained perfectly. I appreciate the inclusion of mistakes and how to fix them.
I was looking for a html project to play with, this is awesome!
man, you're going off the grid this year!!!! Goodluck champ!!
Hi Chris, Great video so far! Please upload more of these
This was pretty fantastic. A great tutorial with much to learn along the way.
This is an awesome tutorial! Easy to understand and broke down into meaningful and clear steps. I've learned so much coding chapter by chapter along with you. Thanks a lot and keep it up! 🙌
I am so thankful that i've made the right choice by watching your video
I'm at the 2:25:33 mark (Add win condition) - I appreciated every single seconds (also had to go backward a few times to understand things more clearly)
I don't know what else to say, just thanks for that free video man
Your tutorials are the best!
I LOVE IT!!!!!!!!!! GOD dude, you should be at least top 5 in the youtuber list.
That would be pretty sick, maybe one day 👀
@@ChrisCourses trust me, you will. Im watching every single video in your channel (pressing like), and all of them are pure gold. Amazing skills, totally envy you if i had at least half of your knowledge i would be able to reach my dream. (Find a job in USA or Canada). Keep it up!
at the confusing bit 1:04:17 when you are done with the function it would be nice if you even checked everything, that would be easier to follow. It took me a while because I had an error and couldn't find it. But it is a great tutorial
Hello Chris! looking forward to more of these types of videos. A video related to your pokemon game would be great!
These canvas games are amazing Chris!
just finished this video for a school project.
I've been writing notes of everything you said and explained and wrote the whole code with many comments and all these stuff.
I just want to say that you are really REALLY good at teaching and thank u so much for this tutorial!!
Bcz of you i now have huge interest in js and it might be my first time ever liking programming that much!!
Unfortunatly i dont have the ability to get the premium package but i will support you in otherways!
Thank u so much again
do you have code, i am stuck at ghost random movement
I tried to write a game using functional programming and realized that OOP allows to have more abstract interaction with different objects. Thanks Chris for using the latest JS updates.
Dear Jedi Chris
WOW and WHOA!!
What an amazing display of using advanced JS, with object-oriented techniques.
You have a superb ability to rapidly code and speak, super clean and super clear, while doing it simultaneously!
Much appreciation Jedi C.
Double Jedi for you.
Chris, that was the hardest project for me. I had to start from the beginning twice because I couldn't figure out the paddings myself. I also didn't use game assets and just used 'strokeStyle'. Anyway, you're my hero. Keep up the good work!
Sou do Brasil e consegui acompanhar tranquilo! Só com as legendas, sem da também. Quem for BR e tiver na dúvida, pode assistir que você entende tudo!
Vou assistir agora espero que eu consiga
😊
😊
😊
😊
This was really useful for me thank you 🌸🌸🌸
A more compact way to do input handling:
const keys = {};
onkeydown=onkeyup=e=>e.repeat||(keys[e.key]=e.type=='keydown'?1:0);
then do a check like this:
if(keys.w)console.log('up is pressed'):
checking if space is pressed:
if(keys[" "])console.log('space is pressed')
Hey Chris! Can you help me?? I am having a problem with the collision detection. Once I added that in the pac man is just on a continuous movement. So, if I press 'd' it will just keep going right until I press another key. For some reason the code player.position.x = 0 & player.position.y = 0 in the if statement(circleCollidesWithRectangle) isn't being read. Do you know why that is happening?
Can you please tell me yr secret to discipline/consistency
Theres no magic trick. Start somewhere, set small goals and stay consistent. “Success is the sum of small efforts repeated day in and day out.” A little bit of commitment per day compounds over time. Good luck!
@ujjawalsingh3805 you are enjoying?
study less, do more projects
Chris you the best bro
what would the problem be with setting the velocity like this:
case 'w':
player.velocity.y = -5;
player.velocity.x = 0;
console.log(player.velocity);
break;
I don't seem to be having any problems with this so far. I'm at 53:42
Awesome! Thanks for the lesson, Chris!
Guys help! I tried doing this project using reactJS and i keep getting stuck on the ghost collisions. After a few random movements the ghost keep looping left and right over a boundary. Please fuc**** help me, i cant find any damn mistakes
Chris are you Nikola tesla?
I've been trying to make this for years couldn't really figure this out properly.
But you do it like a magic wish 😀😀😀
I watched the collisions part several times only to realize why you need to loop through that boundaries array and making that circle rectangle object.
*Insert The wire realisation meme*
You have the best Tutorials :) I like That !
hello Chris, I would add a validation to avid the Boundaries to be created everytime it will blow up the memory and cpu, by using this below:
if(boundaries.length === 0) {
....
}
Thats awesome thank you! Will definitely check pro version cause the game there look amazing
You are a good man. Thank you
I love your video, perfect tutorial
I love all your videos! I'm trying to learn to code games by myself, since in college all I do is websites. Your easy tutorials motivates me to learn to code, I did the pokemon game and I'm doing this pac-man right now! Lol I still have some inssues with the player going throught the paths xD I just need to see that part 10 times more until I figure out what I did wrong. Keep it up! ^^
thanks for making this! i was looking for best practices on making, like, menu layouts and such, UI interfaces i suppose.
thank you very much ! You are so awesome !!
You should not use this movement code for production. On many keyboards some keys don't register if a key is already pressed (I think they are grouped somehow).
Priceless tutorial. Thank you so much!
why did you use and statements instead of or statements for the collision detection
How do you generate these game assets? Is there a tutorial? Do they have to be same width and height as 40px 40px or are they getting resized?
Do you have a way that once you win the game or you die that the game resets itself automatically?
Chris is the pacman premium game available I was looking to purchasing it on your website? by itself or do i have to pay the monthly to access it? Thanks for the courses you make bro!
Not available yet, I'm pretty behind on courses in general atm, but hope to have that fixed within the next month when I hire an editor. Sorry bout the delay!
@@ChrisCourses oh ok bro cool thanks for the response.. Chris that automated water dispenser is so bad ass dude lmao
@@johnatteo822 Haha thanks man, I legit use it every day still, surprisingly big life improvement
@@ChrisCourses Hi Chris, I am having trouble with the part which make it easier passing through two walls
I can get my web browser to look like that can anyone help ?
@Chris Courses - My ghost is moving erratically but passes through the walls and then goes off screen. What have I messed up on?
excelent, very thank. nice
I really liked the video, it taught me a lot, thanks for that. But I found one bug for ghost movement simulation, which is when the map is different, and ghost collision array might be empty, like no collision with walls, ghost can move in 4 directions, but the code doesn't handle that case
Tried everything and wrote same code lines frame by frame but i can not get my collision logs this logs are empty. Checked everywhere and asked to chat gpt but couldnt fix it the problem ? Any solutions ?
Mine did not work
what if add some AI feature on the PACMAN(the small yellow one)
Hi, it seems like the collition only works on the x - axis for me
suggest some cool tutorials on vanilla js, but in text, book form
This is a very good tutorial, but I'm a little lost bc i've reached 17:15 in the video and my draw function isn't working. I've made no syntax errors that I can see. Anyone else struggling? I'm using vs Code.
How do you make the map stay inside a responsive canvas? I added a second "map" to the left so I have two, however trying to make it run on mobile, the map assets wont stay inside. They go out of the canvas. Their position is moved using a const x and y offset and have tried to modify this to make it stay in the canvas. (I made them lets when doing this, im aware consts cant change)
I have a question - how do you get more effect from rewriting code after the author?
so that my knowledge is well-established, should I write a similar application after going through the lesson or redo an existing one ?
what to do, please advise ?
question. could we make a map with only 1 image, like a PNG and then use the Alpha layer for collision?
Hi, I would like to have multiple maps. How can I change maps with function? thanks
Thanks for the great assets!
;v perfect game bro 👍😎❤👈
The tutorial is awesome but I've reached a super thight spot which I found difficult cause I get the same error always
Thanks!
what todo list is this? seems nice to have
amazing
Is it just me or does anyone else feel the controls are terribly difficult? So much so I would envision the average player giving up in five or ten seconds. It's the cornering and change of direction. We never really solved that problem where the controls don't easily allow the player to, for example, make a downward turn between two blocks.
Awesome project! I'm genuinely curious on the legality of hosting it though. Is it subject to copyright issues? Asking for a friend ;)
I totally love your videos but Is it necessary to use java script to draw your player. Can't I use css
why the hell the ghost movement isnot working
why we are writing && in colliding condition .. why not or??
Is the premium tutorial for this available?
¿Alguien sabe como puedo centrar el laberinto en el medio de la página?
this is really weird my comment just disappear after a few seconds, anyway good luck guys!
Hey im having problems rendering the boundaries
can anyone help the @15:01
can you share the full source code?
2:06:02
(time frames for every day when i stop)
Can you be my javascript professor?
you saved my life
Please post more
anyone of u guys know how to deploy it...i'm having so much difficulties
use vercel
@@강수호-g3x what's vercel
doubt? 1:38:00
23456 had to be intentional
I used google web designer and I used google web designer.
I will give you some advice so that you can increase your subscribers and have more views... hire a person who can translate your videos into Spanish, American people are not really interested in programming BUT LATIN ONES ARE SO BELIEVE ME, GET A TRANSLATOR AND YOU WILL GET MORE SUBSCRIBERS
🥵🥵🥵