Pacman Game Tutorial with JavaScript and HTML5 Canvas

Подписаться 162 тыс.

Просмотров 134 тыс.

50% 1

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

Опубликовано:

2 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 131

@user-wc4mg3sd5g Год назад

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!

@JoeKnouse Год назад

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

@AdeelKhan-ox1bs 2 года назад

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

@christalwillett5399 11 месяцев назад

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

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

@josephcieplak8920 2 года назад

Your tutorials are the best!

@lucascecin Год назад

Awesome! Thanks for the lesson, Chris!

@DopEZTam 2 года назад

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

@gektorix 2 года назад

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!

@gektorix 2 года назад

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.

@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

@DoorsExciteMe 2 года назад

These canvas games are amazing Chris!

@jeskah1931 2 года назад

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

@burakabi_ 2 года назад

You have the best Tutorials :) I like That !

@workfromhome5724 Год назад

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

@samehdhamer6889 Год назад

This was really useful for me thank you 🌸🌸🌸

@18.j 2 года назад

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

@stanleychukwu7424 2 года назад

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

@tomevans5062 10 месяцев назад

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

@ChrisCourses 10 месяцев назад

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

@lucaslima7759 2 года назад

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

@nevfelemrecicek 2 года назад

I love your video, perfect tutorial

@johnadriandodge 2 года назад

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.

@flebedev9974 10 месяцев назад

Thanks for the great assets!

@givenmahlangu4720 2 года назад

Chris you the best bro

@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 9 месяцев назад

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

@ct_yurk_1510 Год назад

You are a good man. Thank you

@isbeb507 2 года назад

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

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

@nowarm Год назад

thank you very much ! You are so awesome !!

@Coding_Asmr_PraDev 2 года назад

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 2 месяца назад

study less, do more projects

@BryanChance Год назад

Priceless tutorial. Thank you so much!

@darkl3iaX 2 года назад

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

@ChrisCourses 2 года назад

That would be pretty sick, maybe one day 👀

@darkl3iaX 2 года назад

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

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

@binaryburnout3d 2 года назад

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

@jairforero 2 года назад

excelent, very thank. nice

@DannyHille 2 года назад

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

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

@SynisterScientist 2 года назад

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

@lyon8539 3 месяца назад

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

@toffeequeen1338 2 года назад

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

@atf9406 2 года назад

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

@CanalGeekDev 2 года назад

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

@asemotaosasenaga4048 Год назад

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

@rachelvanderlely6324 Год назад

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

@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 Год назад

😊

@johnatteo822 2 года назад

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 2 года назад

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 2 года назад

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

@ChrisCourses 2 года назад

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

@atf9406 2 года назад

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

@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

@EmperorOab 2 года назад

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

@DishonoredSkull 6 месяцев назад

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)

@zentheplayerrapper8504 Год назад

;v perfect game bro 👍😎❤👈

@oxydol3456 9 месяцев назад

Thanks!

@tonepivk9701 Год назад

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

@goon4031 8 месяцев назад

amazing

@user-vk9vc8kb1b 2 года назад

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

@shafkatkabir1570 24 дня назад

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

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

@bemreq 9 месяцев назад

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 ?

@TheFuture36520 2 года назад

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

@jennyferbello2004 9 месяцев назад

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

@VANDTAN Год назад

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

@jellycoding 2 года назад

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

@keithnieves6921 Год назад

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

@dmaberlin Год назад

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

@brittshook8358 10 месяцев назад

Is the premium tutorial for this available?

@hrishabhjaiswal1620 9 месяцев назад

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

@rishabhsengupta344 11 месяцев назад

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

@SmittyInparadis 2 года назад

Please post more

@fritzpop347 5 месяцев назад

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

@huynhphatat3919 7 месяцев назад

can you share the full source code?

@yoguy515 2 года назад

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

@user-ii8ip8wi8i 2 года назад

use vercel

@asemotaosasenaga4048 Год назад

@@user-ii8ip8wi8i 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.

@mohamedbelhadi7909 6 месяцев назад

Mine did not work

@haaz386 10 месяцев назад

doubt? 1:38:00

@awesomeblacka4423 3 месяца назад

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

@ynsbl Год назад

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

@tim.e.l 2 года назад

🥵🥵🥵

@ariebolotin2173 Год назад

23456 had to be intentional

@risingpelican8106 Год назад

Can you be my javascript professor?

@AshwinSKumar Год назад

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

@pegaexpress4335 2 года назад

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