Pacman Game Tutorial with JavaScript and HTML5 Canvas

Pacman is another classic game which can be coded in less than 1000 lines of code. Here, I'll teach you everything you need to know to get your own Pacman-style game up and running with the HTML5 canvas and vanilla JavaScript.

0:00 - What we're developing
1:42 - Project setup
9:01 - Generate map boundaries
28:16 - Add Pacman with movement
54:01 - Add collision detection
1:17:17 - Swap boundaries with images
1:28:54 - Generate pellets
1:32:41 - Remove pellets on collision
1:38:35 - Add score
1:44:59 - Create ghost
2:14:44 - Create power-up
2:25:07 - Add win condition
2:26:50 - Pacman chomp animation

[workfromhome]

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

[kBofFun]

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.

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

[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

[lyon]

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

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

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

[jeskah]

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

[bilaledu]

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

[stanleychukwu]

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

[JoeKnouse]

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

[lucaslima]

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

[tomevans]

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

[darkliaX]

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

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

[AdeelKhan-oxbs]

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

[DopEZTam]

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

[rachelvanderlely]

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

[mendes]

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!

[marwahaj-hassan]

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

Oh and btw your voice is very calming and nice😼