Premium Features
Create a Pacman Game
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.
Game Assets: https://drive.google.com/drive/folders/1Cvq2RVrv-z2rR3wPZjgJrUgOAjVSVzj9?usp=sharing
GitHub Gist with pre-built map and switch case statements: https://gist.github.com/christopher4lis/452bc4442208e3123e6abf69458081df
Comments
Want to participate?
Create a free Chris Courses account to begin
HI Chris,
I've got a bug.
So I made the map bigger by copying some lines in the map but ghosts pass through random parts. I'm not sure how to fix this. Please help.
Hi Chris,
I really enjoyed coding out Pacman.
please please please release premium Pacman. and add mobile functionality if possible.
Thanks so much for these courses they are so much fun.
i will ask the same question everybody else is asking...
when is Premium Pacman coming out? :)
I need help with:
starting LEVEL 2 and 3 after each win condition
changing the Pacman and Ghost Circles to Sprite images
creating a top 10 leaderboard and letting winners save their name + score
Hi Chris,
Loving the video, just had a quick question with the code below:
if (collisions.length > ghost.prevCollisions.length) {
ghost.prevCollisions = collisions
}
if (JSON.stringify(collisions) !== JSON.stringify(ghost.prevCollisions)) {
if (ghost.velocity.x > 0) ghost.prevCollisions.push('right')
else if (ghost.velocity.x < 0) ghost.prevCollisions.push('left')
else if (ghost.velocity.y < 0) ghost.prevCollisions.push('up')
else if (ghost.velocity.y > 0) ghost.prevCollisions.push('down')
const pathways = ghost.prevCollisions.filter((collision) => {
return !collisions.includes(collision)
})
const direction = pathways[Math.floor(Math.random() * pathways.length)]
console.log(direction)
}In the first IF statement you are setting collisions equal to prevCollisions before the second IF statement.
How can
JSON.stringify(collisions) !== JSON.stringify(ghost.prevCollisions)be true in the second IF statement, if you are setting collisions equal to prevCollisions in the first IF statement.
Thank you ! I enjoyed the tutorial!
I wanted to do Pokemon, but thought that might be a better start.
And it is cool you only used vanilla JavaScript, without any other libraries or a setup which required a small webserver.
The people spoke and said they had trouble with libraries and web servers. Therefore, no more, at least for basic game tutorials 😂
Plan on breaking these long course uploads into modules soon, so if you ever want to come back here, be prepared to see a lot in individual videos. Trying to make this site as best as can be.
Noo, I love the games done on the servers with the libraries and webpack... =( These are things everyone should learn lol
I def agree, anyone who wants to take web dev seriously should learn them at some point, but seems like for maximum lifetime of videos and ease of use, the traditional methods will be staying for a bit. Had to redo quite a few videos because of library updates over time unfortunately 😅
I was going to ask you about that lol. I bet that sucks pretty bad especially if you have a lot of content..
Yeah, it's all a learning experience, now I know a bit better and can prepare for longer-lasting tutorials. Thankfully, the canvas API isn't changing anytime soon from what I'm aware of 😄
Thanks a lot for your tutorial. Really enjoyable Pacman tutorial, but just one issue. It probably has something to do with the collision detection. It's quite difficult to position pacman to move through the grid. If it is slightly off then it doesn't allow the movement.
In the video you say there is premium pacman course that more closely resembles the original game. How do I access the premium course with these features?
Hey there! Unfortunately I have not finished production on the Premium Pacman version yet. I'm working on three courses right now: Space Invaders, Pacman, and Pokemon, with the Space Invaders Premium portion to be finished next, then Pacman.
If you purchased a subscription solely for Pacman, let me know and I can get a refund sent your way, that way you can sign-up whenever it's out and ready (I predict within the next two weeks).
Sorry for the inconvenience!
Already a bug at 25:13, when I run the code, there is a block missing on the bottom left side 2nd up. Any way to fix this? Thx! :)
gonna redo the code and see what I did wrong.
Still waiting for premium version