Pacman Game Tutorial with JavaScript and HTML5 Canvas
YouTube Viewers YouTube Viewers
160K subscribers
130,563 views
0

 Published On Feb 1, 2022

Want to next level this course? I added 5 1/2 hours of extra content that you can start at https://chriscourses.com/courses/pacm.... I'll teach you plenty of extras such as how to add and animate ghost sprites, create multiple levels, increase difficulties, and so much more. Enjoy!

Game Assets: https://drive.google.com/drive/folder...
GitHub Gist with pre-built map and switch case statements: https://gist.github.com/christopher4l...

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

show more

Share/Embed