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!
Thanks Tom, working hard on these, but have been a huge slacker on the Pacman course. Finishing the multiplayer one here on RUclips then deciding what to hit hard next
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! 🙌
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!
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.
@@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!
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.
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!
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
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')
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! ^^
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?
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) { .... }
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
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
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).
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
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 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.
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.
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 ?
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 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
![FendiDa Rappa - Clock Dat ft. Shamar Marco [Official Music Video]](http://i.ytimg.com/vi/3NBU8KHdxYY/mqdefault.jpg)
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!
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 RUclips then deciding what to hit hard next
Your tutorials are the best!
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! 🙌
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.
man, you're going off the grid this year!!!! Goodluck champ!!
I was looking for a html project to play with, this is awesome!
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.
How this guy has so few subs? Let's help to share his content everyone
Excellent tutorial, explained perfectly. I appreciate the inclusion of mistakes and how to fix them.
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!
These canvas games are amazing Chris!
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
do you have code, i am stuck at ghost random movement
Hello Chris! looking forward to more of these types of videos. A video related to your pokemon game would be great!
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.
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!
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
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
You have the best Tutorials :) I like That !
This was really useful for me thank you 🌸🌸🌸
Awesome! Thanks for the lesson, Chris!
Chris you the best bro
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
Thats awesome thank you! Will definitely check pro version cause the game there look amazing
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
😊
😊
😊
😊
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')
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 the great assets!
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?
I love your video, perfect tutorial
You are a good man. Thank you
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) {
....
}
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
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
Priceless tutorial. Thank you so much!
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).
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 😀😀😀
excelent, very thank. nice
why did you use and statements instead of or statements for the collision detection
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
question. could we make a map with only 1 image, like a PNG and then use the Alpha layer for collision?
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?
I can get my web browser to look like that can anyone help ?
Hi, it seems like the collition only works on the x - axis for me
Do you have a way that once you win the game or you die that the game resets itself automatically?
what if add some AI feature on the PACMAN(the small yellow one)
Mine did not work
why we are writing && in colliding condition .. why not or??
Awesome project! I'm genuinely curious on the legality of hosting it though. Is it subject to copyright issues? Asking for a friend ;)
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
suggest some cool tutorials on vanilla js, but in text, book form
I totally love your videos but Is it necessary to use java script to draw your player. Can't I use css
@Chris Courses - My ghost is moving erratically but passes through the walls and then goes off screen. What have I messed up on?
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 ?
why the hell the ghost movement isnot working
Thanks!
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.
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.
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 ?
The tutorial is awesome but I've reached a super thight spot which I found difficult cause I get the same error always
;v perfect game bro 👍😎❤👈
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)
Hi, I would like to have multiple maps. How can I change maps with function? thanks
what todo list is this? seems nice to have
amazing
doubt? 1:38:00
can you share the full source code?
Is the premium tutorial for this available?
you saved my life
¿Alguien sabe como puedo centrar el laberinto en el medio de la página?
Hey im having problems rendering the boundaries
can anyone help the @15:01
Can you be my javascript professor?
this is really weird my comment just disappear after a few seconds, anyway good luck guys!
Please post more
2:06:02
(time frames for every day when i stop)
23456 had to be intentional
anyone of u guys know how to deploy it...i'm having so much difficulties
use vercel
@@강수호-g3x what's vercel
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
🥵🥵🥵