Pacman Game Tutorial with JavaScript and HTML5 Canvas

[@workfromhome5724]

Chris just don't stop making javascript game tutorials.we are all subscribing to you.

[@josephcieplak8920]

Your tutorials are the best!

[@2kBofFun]

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.

[@shigzgd5072]

changing the velocity creates a constant movement how would i go about updating it per second ? player.velocity.y = 1

[@zuoh]

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

[@bilaledu9206]

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! 🙌

[@irizavr]

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!

[@AdeelKhan-ox1bs]

Hello Chris! looking forward to more of these types of videos. A video related to your pokemon game would be great!

[@jeskah1931]

I was looking for a html project to play with, this is awesome!

[@JoeKnouse]

This was pretty fantastic. A great tutorial with much to learn along the way.

[@DoorsExciteMe]

These canvas games are amazing Chris!

[@marwahaj-hassan568]

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

[@messiisthebest]

do you have code, i am stuck at ghost random movement

[@gektorix]

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.

[@gektorix]

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!

[@oxydol3456]

Thanks!

[@darkl3iaX]

I LOVE IT!!!!!!!!!! GOD dude, you should be at least top 5 in the youtuber list.

[@ChrisCourses]

That would be pretty sick, maybe one day 👀

[@darkl3iaX]

@@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!

[@tomevans5062]

These are currently the best JS game tutorials. I'll have to subscribe to add the additional features - sound, etc.

[@ChrisCourses]

Thanks Tom, working hard on these, but have been a huge slacker on the Pacman course. Finishing the multiplayer one here on KZbin then deciding what to hit hard next

[@johnadriandodge]

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.

[@DopEZTam]

Hi Chris, Great video so far! Please upload more of these

[@samehdhamer6889]

This was really useful for me thank you 🌸🌸🌸

[@lyon8539]

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

[@stanleychukwu7424]

man, you're going off the grid this year!!!! Goodluck champ!!

[@lucascecin]

Awesome! Thanks for the lesson, Chris!

[@shafkatkabir1570]

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

[@atlantic_love]

Why would you want to increase the speed of your player with 'w'? Pacman isn't at all about increasing speed.

[@rachelvanderlely6324]

why did you use and statements instead of or statements for the collision detection

[@Coding_Asmr_PraDev]

Can you please tell me yr secret to discipline/consistency

[@KonflictYT]

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!

[@shanugamer8309]

@ujjawalsingh3805 you are enjoying?

[@paultapping9510]

study less, do more projects

[@givenmahlangu4720]

Chris you the best bro

[@lucaslima7759]

How this guy has so few subs? Let's help to share his content everyone

[@tayliecarlson7830]

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?

[@christalwillett5399]

Excellent tutorial, explained perfectly. I appreciate the inclusion of mistakes and how to fix them.

[@mendes5015]

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!

[@wevertonmelo9365]

Vou assistir agora espero que eu consiga

[@diddums5555]

😊

[@diddums5555]

😊

[@diddums5555]

😊

[@diddums5555]

😊

[@burakabi_]

You have the best Tutorials :) I like That !

[@toffeequeen1338]

Do you have a way that once you win the game or you die that the game resets itself automatically?

[@rishabhsengupta344]

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

[@atf9406]

Hi, it seems like the collition only works on the x - axis for me

[@fritzpop347]

I can get my web browser to look like that can anyone help ?

[@NavyaVedachala]

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?

[@ZaynBrando]

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.

[@CanalGeekDev]

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) { .... }

[@DishonoredSkull]

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)

[@nevfelemrecicek]

I love your video, perfect tutorial

[@hrishabhjaiswal1620]

why we are writing && in colliding condition .. why not or??

[@起風咯]

what if add some AI feature on the PACMAN(the small yellow one)

[@tonepivk9701]

Hi, I would like to have multiple maps. How can I change maps with function? thanks

[@ct_yurk_1510]

You are a good man. Thank you

[@DannyHille]

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')

[@BrianRiendeau]

what todo list is this? seems nice to have

[@bemreq]

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 ?

[@samicat_art]

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! ^^

[@keithnieves6921]

Hey im having problems rendering the boundaries can anyone help the @15:01

[@SynisterScientist]

@Chris Courses - My ghost is moving erratically but passes through the walls and then goes off screen. What have I messed up on?

[@dmaberlin]

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 ?

[@binaryburnout3d]

question. could we make a map with only 1 image, like a PNG and then use the Alpha layer for collision?

[@messiisthebest]

why the hell the ghost movement isnot working

[@brittshook8358]

Is the premium tutorial for this available?

[@johnatteo822]

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!

[@ChrisCourses]

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!

[@johnatteo822]

@@ChrisCourses oh ok bro cool thanks for the response.. Chris that automated water dispenser is so bad ass dude lmao

[@ChrisCourses]

@@johnatteo822 Haha thanks man, I legit use it every day still, surprisingly big life improvement

[@atf9406]

@@ChrisCourses Hi Chris, I am having trouble with the part which make it easier passing through two walls

[@nowarm]

thank you very much ! You are so awesome !!

[@jennyferbello2004]

¿Alguien sabe como puedo centrar el laberinto en el medio de la página?

[@BryanChance]

Priceless tutorial. Thank you so much!

[@isbeb507]

thanks for making this! i was looking for best practices on making, like, menu layouts and such, UI interfaces i suppose.

[@asemotaosasenaga4048]

I totally love your videos but Is it necessary to use java script to draw your player. Can't I use css

[@TheFuture36520]

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 😀😀😀

[@MovieMovie-m4m]

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*

[@nurlykhankopenov]

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

[@dmaberlin]

suggest some cool tutorials on vanilla js, but in text, book form

[@18.j]

Thats awesome thank you! Will definitely check pro version cause the game there look amazing

[@jellycoding]

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).

[@mohamedbelhadi7909]

Mine did not work

[@jairforero]

excelent, very thank. nice

[@VANDTAN]

The tutorial is awesome but I've reached a super thight spot which I found difficult cause I get the same error always

[@huynhphatat3919]

can you share the full source code?

[@zentheplayerrapper8504]

;v perfect game bro 👍😎❤👈

[@RommyRandhawa]

you saved my life

[@flebedev9974]

Thanks for the great assets!

[@EmperorOab]

Awesome project! I'm genuinely curious on the legality of hosting it though. Is it subject to copyright issues? Asking for a friend ;)

[@goon4031]

amazing

[@awesomeblacka4423]

2:06:02 (time frames for every day when i stop)

[@haaz386]

doubt? 1:38:00

[@yoguy515]

anyone of u guys know how to deploy it...i'm having so much difficulties

[@강수호-g3x]

use vercel

[@asemotaosasenaga4048]

@@강수호-g3x what's vercel

[@marcholman291]

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.

[@SmittyInparadis]

Please post more

[@ynsbl]

this is really weird my comment just disappear after a few seconds, anyway good luck guys!

[@risingpelican8106]

Can you be my javascript professor?

[@ariebolotin2173]

23456 had to be intentional

[@AshwinSKumar]

I used google web designer and I used google web designer.

[@tim.e.l]

🥵🥵🥵

[@pegaexpress4335]

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