Pacman Game Tutorial with JavaScript and HTML5 Canvas
Вставка
- Опубліковано 4 чер 2024
- Want to next level this course? I added 5 1/2 hours of extra content that you can start at 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: drive.google.com/drive/folder...
GitHub Gist with pre-built map and switch case statements: 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
This was pretty fantastic. A great tutorial with much to learn along the way.
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!
Hello Chris! looking forward to more of these types of videos. A video related to your pokemon game would be great!
These canvas games are amazing Chris!
Hi Chris, Great video so far! Please upload more of these
Excellent tutorial, explained perfectly. I appreciate the inclusion of mistakes and how to fix them.
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! 🙌
I was looking for a html project to play with, this is awesome!
Chris just don't stop making
javascript game tutorials.we are all subscribing to you.
Awesome! Thanks for the lesson, Chris!
man, you're going off the grid this year!!!! Goodluck champ!!
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!
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.
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
You have the best Tutorials :) I like That !
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 UA-cam then deciding what to hit hard next
Thats awesome thank you! Will definitely check pro version cause the game there look amazing
This was really useful for me thank you 🌸🌸🌸
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?
Chris you the best bro
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?
Thanks for the great assets!
How this guy has so few subs? Let's help to share his content everyone
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.
thanks for making this! i was looking for best practices on making, like, menu layouts and such, UI interfaces i suppose.
I love your video, perfect tutorial
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
You are a good man. Thank you
@Chris Courses - My ghost is moving erratically but passes through the walls and then goes off screen. What have I messed up on?
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
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 ?
Priceless tutorial. Thank you so much!
thank you very much ! You are so awesome !!
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! ^^
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)
Do you have a way that once you win the game or you die that the game resets itself automatically?
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!
question. could we make a map with only 1 image, like a PNG and then use the Alpha layer for collision?
excelent, very thank. nice
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')
Hi, it seems like the collition only works on the x - axis for me
Hi, I would like to have multiple maps. How can I change maps with function? thanks
I totally love your videos but Is it necessary to use java script to draw your player. Can't I use css
why did you use and statements instead of or statements for the collision detection
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 ?
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
Thanks!
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
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
what if add some AI feature on the PACMAN(the small yellow one)
Awesome project! I'm genuinely curious on the legality of hosting it though. Is it subject to copyright issues? Asking for a friend ;)
amazing
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
¿Alguien sabe como puedo centrar el laberinto en el medio de la página?
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.
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
😊
😊
😊
😊
Hey im having problems rendering the boundaries
can anyone help the @15:01
why we are writing && in colliding condition .. why not or??
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) {
....
}
Is the premium tutorial for this available?
;v perfect game bro 👍😎❤👈
The tutorial is awesome but I've reached a super thight spot which I found difficult cause I get the same error always
I can get my web browser to look like that can anyone help ?
suggest some cool tutorials on vanilla js, but in text, book form
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
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).
can you share the full source code?
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 😀😀😀
Please post more
anyone of u guys know how to deploy it...i'm having so much difficulties
use vercel
@@user-ii8ip8wi8i what's vercel
Mine did not work
doubt? 1:38:00
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.
2:06:02
(time frames for every day when i stop)
🥵🥵🥵
23456 had to be intentional
this is really weird my comment just disappear after a few seconds, anyway good luck guys!
Can you be my javascript professor?
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
you saved my life
what todo list is this? seems nice to have