Here is a link to try the game: codingwith-adam.github.io/pacman/ If you plan to deploy to github pages make sure to update the image and sound urls to strip out the '../' this was an oversight. Link to all the assets is in the description. I hope you enjoy the tutorial.
Thanks Luu! That’s awesome! You’re officially a game developer now. I hope your son enjoyed the game. A Mario bros type game would be fun to make. I plan to do that in the future.
@@CodingWithAdam Nice, he'll have to subscribe to your channel and do it himself! Nothing better than the reward of playing a game that you built yourself... with your help of course!
That’s so true. Look forward to his subscribe and making the game. I suggest trying the intro to game development tutorial on my channel. If successful he should give the snake tutorial a try as they increase in difficulty.
Awesome! Thank you for the great feedback. Really glad you enjoyed the tutorial. I really enjoy making the game dev tutorials more to come in the future!
A well-documented tutorial, but attempted to use this as a template to expand in a different direction artistically and ran into some difficulties, particularly with the enemy A.I. and loading the sound effects. Unsure if that's an issue with the assets I was aiming to implement or if there's something I was missing? Either way, very well explained and easy to follow when the code wasn't fighting with me. :) Good video!
Thank you! I really appreciate the feedback. I’m really glad you enjoyed the video and were able to take the project in another direction. Sometimes running into issues is just the coding process 😁
Thanks for your making a very good game in JavaScript. That I follow your instructions to get pressed an arrow key code failed instead it can be used to return a string such as "ArrowUp" from the event.key.
@@CodingWithAdam To replace the code which does not return a number for an arrow key pressed , I have tried the code as following: document.addEventListener("keydown", this.#keydown); #keydown = (event) => { if (event.key === "ArrowUp") { // this is one of four strings if (this.currentMovingDirection === MovingDirection.down) this.currentMovingDirection = MovingDirection.up; this.requestedMovingDirection = MovingDirection.up; this.madeFirstMove = true; } //..continue the code for the rest of three cases. } The code on my side is working. I don't know why this would happen.
I loved this tutorial. Your a great teacher and so clear and easy to follow. Pleeeease can you add mobile functionality as i like playing on my phone at work and showing my friends
Thank you for the amazing feedback. I’m really glad that you enjoyed the tutorial. I’ll see if I can do this in the future. In the mean time I did add mobile in my latest game dev tutorial on the chrome Dino game. Although the mobile controls are simple since all you do is tap the screen.
This tutorial was awesome! Helped a lot to understand JavaScript. But a I have a question… how can i put more levels to when all dots were gone he switch the map for the next level?
Thank you! Congratulations for completing the tutorial! Really great question. I have not done this yet but I would put the code to change the map in the tileMap class. In the tileMap you could define a list of maps and a property to track the current level the index of the array. When you pass the first level the game.js could tell the tileMap to go to the next level. I hope this tip helps. Perhaps in the future I will make a follow up video. Currently I'm working on other videos one of which is space invaders!
@@CodingWithAdam I will try just like you said! I would love if you can make this video in the future, so excited for it. The space invaders sounds increable to make. Let us know soon as possible. Thanks for all the suport!
You’re welcome! I’m really glad that you enjoyed the tutorial and that it was easy to follow. Thank you for the awesome feedback I really appreciate it! 😀
So I've sorted the mobile controls. Yay but still struggling to win game with multiple dot types and sound issues on touch which is weird as user interacted first 🤔. And just 1 more question. Can u respawn ghosts after they are eaten cos if the map is big and you've eaten the ghosts it's too simple.
Awesome you have made some great progress!!! Yes you can respawn please check the comments I provided a code snippet ( I would copy paste it but I’m on my phone). Keep up the great work!!! 😁
Hi Adam, This is an amazing project, I'm learning so much from your clear teachings. Please please please can You add mobile functionality as a final touch to this project so I can play it on my phone and show friends etc.
Hey man! Very great tutorial! Do you have any ideas for implementing a pathfinding algorithm for the Ghosts? I want to make it so that Dijkstra’s algorithm is used with some randomness so the ghosts don’t kill you all the time. Thanks!
You’re welcome! Glad you liked the tutorial. I have not explored using a path finding algorithm yet. I really like the suggestion and might look into it in the future. Excited to hear your findings! 😀
Hi I have just subscribed to this brilliant tutorial. Basically I am sport journalist and I like writing creative sport article, mixing different genders like music, cinema and videogames to sport. So I need to implement PacMan, having a tennis court behind instead of a wall. I followed step by step your tutorial, but I am now blocked because gameloop function is not being called from Browser. There might be some firewall or some checks carried out, as I cannot see the wall being drawn and the function executing within the Chrome Console. The code is equal to your code. Any suggestion is really welcomed. Thanks in advance. Andrea
Thank you for subscribing! That's a really interesting project. I would suggest taking a look at the solution linked in the description. Download the solution and see if you can make it run on your computer. This is a good starting point from here you can try to figure out what code that you might be missing in your solution.
Hi @@CodingWithAdam , thanks for all the support. I would like to ask you a couple of permissions: 1. Permission to mention you in my article. I have added the following words to the text of my article titled "Being Pac-Man Charlie": "It was not easy to conceive such crazy idea and I was undoubtedly helped by Adam, whose tutorial was essential to learn a little bit of logic related to game development. In fact I am honest with myself, when say that all the logic of the videogame, written in JavaScript comes from Adam brilliant tutorial, having done myself only some "cosmetics operations", mainly related to choosing colors, images and fonts. Therefore I also put here the link to Adam youtube channel, in case someone would like to learn how to develop games not only using JavaScript paired with Visual Studio Code, but even more things related." Links are embedded within the words: tutorial and youtube channel. 2 Permission to publish in GitHub my "cosmetic version", in order to allow my subscribers and fans to play the videogame, even if the structure comes from your work. Just let me know what you think. Then, once I will publish my article, I will forward if you wish the link of my piece. Thanks in advance. Andrea
Very nice. Do you have a code snippet or advice for placing a bonus fruit in the middle of the screen, or having one enter and march around the board, like in Ms Pacman? I imagine it would be something like adding a 4th ghost in, but with a different sprite and having it always be flagged blue.
Thank you. I have not implemented that yet but your ideas are good. I would suggest implementing the static fruit like the pellets or power pellet. For moving fruit they do seem similar to the ghosts in the blue state. You could try to use inheritance if you are familiar with that to inherit from the ghost or a common base class that the ghost and fruit use. Thank for taking the tutorial!
Awesome glad it worked. Here is a quick way you can get that working by using setTimeOut. In pacman eatGhost method you can add this. setTimeout(() => enemies.push(enemy), 1000 * 5); The ghost will reappear where it died. Here is the full method #eatGhost(enemies) { if (this.powerDotActive) { const collideEnemies = enemies.filter((enemy) => enemy.collideWith(this)); collideEnemies.forEach((enemy) => { enemies.splice(enemies.indexOf(enemy), 1); this.eatGhostSound.play(); //New code here to respawn setTimeout(() => enemies.push(enemy), 1000 * 5); }); } }
when we are inserting pacman image i am unable to do it, i tried to give the address directly to see other issue but still didn't get the result. any idea why?
I've cracked it. So I made it so all dots turn to cash when eaten then when all cash is eaten u win the game. I've created a new map for level 2 but not sure how switch to that map after first level is complete. Please help
Awesome that’s really great progress congrats 😀 For the map switching I’ll have to look at the code again. If I recall the names of the objects correctly the game file could track which level you are in. That value can be passed into the tile map to select a map. On the the game over win screen you could listen for a space bar or enter press that would switch the level to 2. These are some rough ideas hope they help.
For some reson I can't draw walls or yellow dots on canvas. Code looks exactly like yours. There should be no problem with directory to the image. There is no info about mistakes in the console. What could I do wrong? Any ideas?
Try putting a console.log(“here”) message in the game loop and check the console. If it’s there that’s good remove it and go one level deeper. For example put one in the tile map to make sure it’s executing the code. Let me know if that helps
For some reason when I implemented all of the pause methods for Pac-Man and the ghosts I’m not able to move them anymore? Could you help me where I’ve gone wrong
Amazing tutorial! However I have an issue, I followed the tutorial (by tiny detail) just to make sure I haven't messed up a spacing, a bracket, anything that might interfere.. I managed to make the ghosts move once, however even after adding the collision check with the environment, the ghosts continue to move once and then stop forever. I made sure to follow every single step up to this point with no typos, and it just won't work.
I feel stupid, apparently the line "this.directionTimer = this.directionTimerDefault;" was missing after setting up the 10-50 field for the number randomizer (in your video, line number 17), even though it was there previously the other day.. weird, anyway, very cool tutorial, keep it up!
When we first Define that method at around 42 min the draw method for pac man is not yet defined. Some time after that we define the draw method. I hope that answers your question.
I get error "Cannot read properties of undefined (reading 'drawImage')" when i am at 35:10 in the video. Also my wall does not appear... I have tried to verify that there is no typo or anything like that. I have made sure about uppercase and lowercase that everything is correct and i checked that i dont accidentally wrote a comma instead of dot and all this kind of things. It is just not working. I have checked everything....
Hi Skillzor, sorry to hear that. Programming can be frustrating at times :( My best advice is to start from the beginning and as you go make sure to stop and check each part is working. I hope this advice helps :)
@@CodingWithAdam But now i have another problem... I get this error in console "Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first." The game works perfectly fine but i just have this error. When i read online they say i should add mute like this.wakaSound.muted = true but i tried it and it did not work. The error is still there
Sounds like you are near the start of the tutorial. I would start at the beginning. You can also compare against the repository linked in the description.
Sorry to hear that. If there not any errors in the console log there might be a typo. Try to compare to the complete solution linked in the description
This is an old tutorial but how did you get the ctx to render the images without an onload event listener. I can't seem to figure it out I'm build it from scratch.
Okay guys , got it , there was problem in the formatar , just uninstall all Beautify plugins , and disable format on save and re start vs code , it will work , ( ps later just download prettier or any 1 formater of your choice)
@@CodingWithAdam i made the same game, but i want to export mine and create a playable game link just like how you did, could you teach me how to do that?
Awesome tutorial I wish I could finish but at 35:09 I got the error: Uncaught TypeError: Cannot read properties of undefined (reading 'drawImage') at TileMap.drawWall (Tilemap.js:39:13) at TileMap.draw (Tilemap.js:31:26) at gameLoop (Game.js:9:13) I checked it many times. Is it somekind of typo or something else?
Thanks! It sounds like your context (ctx) is null. Check that the ctx has a value with console.log(ctx). The value should be passed into the draw method of tile map in the game loop if I recall correctly.
