Build Pac-Man Game With JavaScript

[@AdrianTwarog]

Hey, mate favourite mate, awesome to see you on here, great vid!

[@brnheavymetal]

I miss Brad on videos but the guests are doing a great job, many of the guest channels I didn't know and started to follow

[@FlorinPop]

Great job buddy!! 💜

[@Weibenfalk]

Thanks man! =)

[@TheGitGuild]

I like the way he explains things, also it would be amazing if you guys make super simple one level Street Fighter next :D

[@mandihaase2744]

I am SOOOO excited to create this project. This was one of the first games I was ever introduced to. Thank you Brad and friends for all of this amazing content.

[@Dev3ATX]

Excellent work Thomas. I'm definitely going to enjoy working on this. Thank you Brad for introducing us to all of these new channels and programmers. Can't wait to see all your new stuff. I hope you are doing well.

[@codeguppy]

Love seeing the classic games re-implemented in JavaScript

[@andrewiglinski148]

Awesome video dude. I just checked out your channel as well... I haven't had a chance to watch much but from clicking through it it seems like you have awesome content. I can't believe i haven't found your channel yet. Definitely a new sub.

[@Webcrunch]

This is great! Love the addition of audio 🔥

[@djdankmemes9257]

Great tutorial! Helped me understand js logic and program architecture much, much better. Thanks!

[@bitoffabyte]

This series is amazing!!!!! I'm discovering many amazing web dev KZbinrs

[@Geomaverick124]

Cool! I love this guy :) He has some of the best React tutorials!

[@kamrankhanofficials]

i love Brad's way of Talking and Engaging others..

[@A1996ARP2075]

Thanks Brad love Ur efforts Ur channel is best source for web developers

[@manaskhandelwal]

I miss you brad...😭😭

[@TraversyMedia]

I know 😞 a lot of people are saying that. I will continue to make youtube stuff after i get my courses settled. I just dont have it in me to do courses and think of and execute 1 or 2 projects every week on yt right now. I will be making videos here in the near future though I promise

[@bhatnagarcapital]

@@TraversyMedia We need a podcast , Brad .My heart aches to hear your voice man .Dont code .Maybe just come and ramble .Tell us stories .Start a podcast .We are in love with you man !

[@engineerhealthyself]

@@bhatnagarcapital Seconded on the podcast wouldn't even have to be overly structured or anything even just a Brad Rambles series I'd watch the hell out of

[@sahilvig22]

@@bhatnagarcapital bro, he has done so much for us. He deserves all the rest. The least we can do is not put pressure on him❤️.

[@danielbark]

Oooo the excitement is real!

[@MostafaMekawy]

This guy is amazying the only thing I miss is brad's way but thanks man for this really.

[@MarcoEmm]

Awesome ! Simply the best I've seen so far.

[@Infinitude]

Its awesome to see you in Traversy Media.

[@victorolvera]

Nice job Sir, I may get back to programming thanks to you

[@Hungryturtledev]

Amazing! Great job

[@muhammadzaakirmungrue3146]

Thanks nice Tutorial, understanding how the css classes change dynamically inside the game loop is the hardest part. I will add levels and make the edges of the corners of the walls curved where their corners do not touch another wall. And I want to change the animation for when the ghost gets eaten. Also I will check if there is an error when Pac-Man eats two pills in less than 10 seconds and fix any other bugs. One more thing the game has no Secret Track where Pac-Man can go trough the side and enter on the next side, this should be easy to add 😉

[@programmingwithdipayan7280]

Brad.! My lord. You makes my dream come true. I was working on how to make pacman game with JavaScript. Hopefully you posted a video on it ! 👍🙏

[@sachinsharma-bj2sc]

{ You are awesome love from India }

[@luistroche7071]

Awesome Project. 🤯

[@caseybeavers497]

Cool tutorial! I tried to implement in nodeJs and ran into issue with getting and creating dynamic HTML elements and passing information back to server. I guess node js is not good at that so I learned a lot about node. Also tried to implement without parcel and babel plugins and just run with line Server. I got everything to work but was getting a mime type error getting sound resource from java script file to HTML. So I just used parcel and everything worked fine. Great tutorial learned alot. I want to create Donkey Kong but with my own music and effects!

[@danimusbar]

its awesome, create game in javascript, i think make game only using unity3d, construct2d, unrealengine or game maker, the guest totally give another way create game, thankyou Brad this is great tutorial.. keep up, the guests i subscribe too

[@muhammadzaakirmungrue3146]

I did it I added 3 lives, 256 levels, a PHP high scores API, ghost scatter and run when pacman eats a pill , ghost take shortest path to pacman when he did not eat a pill, apple and cherry when pacman eats a random dot. It is so cool I also made the corners of walls rounded and changed the look . I also added the secret track 🤓

[@spencerhill]

I would be interested in seeing your source code if you're willing to share. Im trying to wrap my head around non-random ghost movement.

[@muhammadzaakirmungrue3146]

// Get shortest path to pacman then set the //position and direction. export function randomMovement142(position, direction, objectExist) { let dir = direction; let nextMovePos = position + direction.movement; if( isBlocked(position + 1, objectExist) && isBlocked(position - 1, objectExist) && isBlocked(position + GRID_SIZE, objectExist) && isBlocked(position - GRID_SIZE, objectExist) ) { nextMovePos = position; return { nextMovePos, direction }; } if((position > 187 && position < 192) || (position > 207 && position < 212) || (position > 227 && position < 232) || (position > 247 && position < 252) ) { if(!isBlocked(position-GRID_SIZE, objectExist)) { nextMovePos = position-GRID_SIZE; return { nextMovePos, direction: DIRECTIONS.ArrowUp }; } if(!isBlocked(position+1, objectExist)) { nextMovePos = position+1; return { nextMovePos, direction: DIRECTIONS.ArrowRight }; } if(!isBlocked(position-1, objectExist)) { nextMovePos = position-1; return { nextMovePos, direction: DIRECTIONS.ArrowLeft }; } } let pacX = this.pacmanPos % 20; let pacY = Math.floor(this.pacmanPos / 20); let minD = Number.MAX_VALUE; let theDirs = [-GRID_SIZE, -1, GRID_SIZE ,1]; let minDir = 0; for(let i=0; i 167 && position < 172 && i === 0) { d = Number.MAX_VALUE; } if(minD >= d) { minD = d; minDir = i; } } } if(minD < Number.MAX_VALUE) { nextMovePos = position + theDirs[minDir]; if(minDir === 0){ dir = DIRECTIONS.ArrowUp; } if(minDir === 1){ dir = DIRECTIONS.ArrowLeft; } if(minDir === 2){ dir = DIRECTIONS.ArrowDown; } if(minDir === 3) { dir = DIRECTIONS.ArrowRight; } if(!isBlocked(nextMovePos, objectExist)) return { nextMovePos, direction: dir } } nextMovePos = position + direction.movement; dir = direction; const keys = Object.keys(DIRECTIONS); while ( objectExist(nextMovePos, OBJECT_TYPE.WALL) || objectExist(nextMovePos, OBJECT_TYPE.GHOST) || (nextMovePos > 167 && nextMovePos < 172 && dir.movement === GRID_SIZE) ) { // Get a random key from that array const key = keys[Math.floor(Math.random() * keys.length)]; dir = DIRECTIONS[key]; nextMovePos = position + dir.movement; } return { nextMovePos, direction: dir }; } function dist2(x1, y1, x2, y2){ return ((x2-x1)*(x2-x1))+((y2-y1)*(y2-y1)); }

[@muhammadzaakirmungrue3146]

@@spencerhill I also added an int variable to the Ghost class called pacmanPos. Then I had to do ghosts.forEach((ghost) => { ghost.pacmanPos = pacman.pos; gameBoard.moveCharacter(ghost); }. But you dont need to add this variable you can use the objectExist function to search for pacman inside the randomMovement142 function instead. I added the variable for performance.

[@muhammadzaakirmungrue3146]

@@spencerhill One more thing, you need to watch this video kzbin.info/www/bejne/l6XEeKKqhpycqJo it is very cool and it is what I used to make my algorithm as sometimes there are two shortest paths to pacman which is a problem that is solved by choosing left, right, up or down in an order.

[@spencerhill]

@@muhammadzaakirmungrue3146 Wow, thank you so much for sharing; this is fantastic! I think I understand how the next ghost position is calculated, but I don't see where the function isBlocked is defined. Seems like its a check if the ghost is about to collide with a wall/other ghost? Is this correct? Can you share this function too? I appreciate it!

[@dangerzone-136]

Need more big real projects with javascript. Thanks

[@CognitiveSurge]

1:25:53 - "Now Pacman is angry and he's going to eat the ghost" 😂

[@oscaranahuac74]

Miss you Brad

[@vartikasinghania9723]

Great tutorial... I super excited to do this by myself ☺

[@beyondtourismbeyondtourism7242]

I will certainly visit your shannel

[@srivatsajoshi]

Awesome video🔥 . Which font is that?

[@Weibenfalk]

thanks! Operator Mono

[@kirabee4134]

Hey Brad, ever tought about starting a twitch channel? Idk if you have time but, it would be nice to code along with you. You don't even need to make elaborate tutorials, just coding stuff live and talking with twitch chat could teach us a lot

[@StrangeIndeed]

I love the tutorial. The pacing is perfect. But I there is a one thing I'm not 100% sure about. (Around 29:14 for reference) In the gameBoard class, you made a static method acting as a sort of wrapper around the gameBoard's constructor. Why did you do it this way? Why not cut the middle man by slightly altering the constructor and calling it directly? Btw English is not my native tongue, so I'm sorry for the grammar mistakes c:

[@sandy3028]

Yes, very good tutorial! Miss Brad though 😭

[@phichau90]

Just sub to the dude channel. Cant wait to learn

[@thomasgooch4870]

Your code editor's styling makes your pipes look like forward slashes. But otherwise, I like the italics.

[@andrewgarcia3136]

i wasted 20 minutes trying to figure this out. honestly, this kinda typset really should not be used for tutorials. there is too much potential for confusion.

[@iUmerFarooq]

I'm curious to know when the Gatsby project is coming. I'm really excited about that. Thank you Brad.

[@BackWoodsWisco]

I realize I'm being pedantic so sorry for that, but aren't classes in javascript syntactic sugar for functions, not objects? I realize functions themselves are a kind of object, but it seems a bit of a difference because you can't create an instance or copy of a plain object with the new keyword like you can with a function/class with a constructor. Either way, this is a great tutorial! Still watching so sorry if this stuff is addressed later

[@WannaTalkToSamson]

You can create an instance with the new keyword without using the class syntax. An example: --- function Animal(name, age) { this.name = name; this.age = age; } const sally = new Animal('Sally', 4); --- The syntactic sugar part is where Javascript assigns the class name & any given methods to the new object's prototype implicitly. Before ES6 class syntax, you'd have to manually add methods to the prototype like this: --- Animal.prototype.bark = function() { console.log('Woof!'); } ---

[@hassaneoutouaya]

Thank you so much !

[@0mdshuvo0]

awesome video

[@joemtz8478]

Cool.

[@emmanuelnwabuodafi6415]

I commented first today, I love you boss brad❤️

[@ahmedboutaraa8771]

well done

[@thefreeze6023]

Hey Brad, could you please cover one of these game-development projects but in Typescript? Thanks.

[@JS-pf4ed]

Can anyone pls tell me why I there's no response after I clicked the "start game" button? I've run the npm command like the How to said.

[@motomono]

Shannel? Let’s sheck it out! 😂

[@karthikk7790]

Brad Sir I have opted for your Javascript course from udemy can you please tell me how many days it would take to learn the content , keeping in mind I know complete html5 n css? Kindly reply :) love from India ❤️

[@williamernest5909]

Great tutorial Thomas. I want to pause the game at a certain point. Any idea on how can we do that?

[@chromefirefox8896]

I saved this video I shall SHeck it out later :)

[@mm88video]

Great job! Please tell us VSC theme you are using...

[@Weibenfalk]

It's One Monokai 80s with Operator Mono font

[@awekeningbro1207]

Which way is efficient for building pacman? Canvas or DOM manipulation?

[@herimandimbyandrianina6546]

Please can I have the whole CSS code, my Pac Man is not showing, even though I've been following the tutorial, pleaseeee

[@harratreco]

Hi guys, does anyone have links to resources on how to create a web app, add plugin functionality and ability for devs to develop plugins for it? Like how wordpress has it's plugins OR shopify & it's plugin. Thanks

[@optymystyc]

8th! Looks fun!

[@DevsLikeUs]

Yes!

[@judeokagu6757]

nice

[@321123580]

Cool game!

[@rizvanyputri2215]

hello! I still don't really know how to install the npm, can you help me to do it?

[@herbertk9266]

Thank you

[@noquarter1983]

Can someone help me with deploying this to the web for testing? I've tried using Heroku and it gives me errors. I want to be able to access it on either Heroku or netlify but I am not sure how to go beyond the npm start version we used in this tutorial

[@Steve-Richter]

Really miss Brad.

[@ilyasoloveychik4504]

Thanks for the video. But I have a strange problem: I have actually the same code (I had even compared), but my browser freezes on the webpage after some time. Original code does not freeze! What could it be? UPD: No, it is all OK with the code. There is smth with my Browser (Opera Game Edition), I tried another one (Chrome).

[@Kevin-ou1zg]

it crashes a lot for me - usually playing after for about 45 seconds. anybody figure out how to fix that? or also how to get the ghosts to change directions not only when they hit a wall, but also when there are optional other routes?

[@Enoch_The_Gent]

Hey can you show how to do p2p networking with this game? Great content,

[@muhammadainuddin4650]

Anyone have any idea which theme he is using?

[@awekeningbro1207]

operator mono

[@thebombsauce]

What if the ghost gets stuck in between two ghosts, will the random movement loop run forever?

[@thebombsauce]

Yeah when it freezes you can see that theres always a ghost stuck between two ghosts and a wall. I think you need something in the while loop to give a ghost the option of making no move

[@abrarmansouri2746]

I've finished javascript courses and but I feel like I still can't make any project like this my own as I have to google and search on youtube like urs watching others coding it. Is it normal? Feel disappointed.

[@Weibenfalk]

It's normal to google stuff. There's so much going on in the dev field today so can't keep everything in memory. Especially in the front end field.

[@BLACKSTAR-iy8wb]

I have a glitch cannot use import statement outside a module

[@sachinsingh-lg6cv]

Where are you doing java script pls tell

[@AshwinSKumar]

How would you link it to the images.

[@AngelOfDeath943]

What is that visual studio code theme he is using?

[@Weibenfalk]

It's One Monokai 80s with Operator Mono font.

[@mohammedsayeed330]

Hey brad..Are You planning for new courses on udemy ? is that the reason you have taken break from KZbin?

[@vijaynavale3919]

Hey which theme are you using ?

[@Weibenfalk]

One Monokai 80s with Operator Mono font

[@goldfishbrainjohn2462]

Stored in my video list first.

[@sujithathangadurai]

what is the font?

[@nightmarenova6748]

When i read pacman i tought it was Pacman as in Arch linux package manager lol

[@BOTS9391]

What italic font is that?

[@gholler09]

Can you add the code to the comments?

[@hanscesa5678]

This is nodeJS, right? Or is this front end JS?

[@aleb687]

this is just plain vanilla javascript. No backend involved at all

[@CodeInsighter]

make one in React...

[@rb3694]

What font is that?

[@zackzahar2826]

what software do you use?

[@davidconnelly1793]

May I ask a technical question? Happy for anyone to answer. Why do JavaScript developers avoid using 'var'?

[@Weibenfalk]

"var" is the "old" way of doing it. Now when we have let and const there's no real use for var if you don't like to use it of course. Const creates an immutable variable (not really true cause you can still change properties on objects) and let has a different scoping than var ... So I never use var anymore. But there's of course nothing wrong in using var if you want. =)

[@oussamaothmaine9485]

not very well made video for beginners. big lack of comments and console logging like i have to watch 20 min of code before i even know what that code does to the game. iknow it would make the video longer but yea. i dont see another choice. this wasnt really helpful

[@ronakJvanpariya]

Looks like he's speaking my native language , "Kathiyavadi"

[@tilakmadichettitheappdeveloper]

his accent is cute

[@harihar4919]

please update some ecommerce video tutorials or if its uploaded give me the link please

[@cleofaspintolimalima1627]

Please subtitles English,because I am Studying english too please

[@sinabeyraghdar6292]

I think subtitles will be added after some time!

[@oz2770]

How is this free? Thanks

[@eswarkrishnamaganti6409]

First view and like

[@AnasandAmmar]

Hey

[@jameskulu]

please bring some python project

[@AleksandarIvanov69]

that poor "j" letter... got no respect.

[@rakib17874]

20th

[@MaxProgramming]

I saw Thomas for the first time.on Freecodecamp. He is great!!!

[@Weibenfalk]

Thanks!

[@cl4ssychap883]

First