Hello my dear coders,
Coding pacman was difficult than I thought. I've used Dijkstra algorithm for the ghosts. I am open to any ideas to develop the game. You can fork and develop the game as you wish. We need to work on ghosts more. Because they sometimes go to a corner and wait there. Maybe we could decrease the interval time of changing random targets for the ghosts.
I will be waiting for your pull requests on Github.
Hope you like it!
Twitter: / gulnaroglus
👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻
Source code: github.com/servetgulnaroglu/p...
Live a star on github, if you enjoy!
👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻
📦📦📦📦📦📦📦📦📦📦📦📦📦📦📦
⌨️ Keyboard: YUNZII KEYNOVO IF98 Gateron Red Switches
bit.ly/3hPGk3A
📦📦📦📦📦📦📦📦📦📦📦📦📦📦📦
00:00 Keyboard Check
00:18 Creating files
00:35 Preparing index.html and introducing assets
02:12 Running HTML file
02:43 Coding game.js
04:16 Creating map[]
13:20 drawWalls()
19:14 drawWalls() is done
19:52 Coding pacman.js
21:24 pacman.moveProcess()
22:03 directions constants
22:45 pacman.moveForwards()
23:40 pacman.moveBackwards()
25:25 pacman.checkCollision()
27:25 pacman.changeAnimation()
27:59 createNewPacman()
29:08 pacman.draw()
32:00 Solving animation bug
32:23 Creating event listener for keyboard
33:00 Getting keyCodes of wasd and arrow keys
35:33 pacman.changeDirectionIfPossible()
36:42 Pacman can move now
37:53 drawFoods()
39:38 pacman.eat()
41:15 Pacman can eat now
42:15 Fix on map
42:55 drawScore()
44:50 Coding ghost.js
46:36 createGhosts()
50:16 drawGhosts()
51:48 ghost.changeDirectionIfPossible()
52:33 ghost.isInRangeOfPacman()
56:36 ghost.changeRandomDirection()
57:05 ghost.calculateNewDirection()
59:05 ghost.addNeighbors() - Helper function for Dijkstra path finder algorithm
01:04:39 Solving a bug on path finder function
01:05:38 pacman.checkGhostCollision()
01:07:32 restartGame()
01:08:06 gameOver()
01:08:27 drawLives()
01:11:00 drawGameOver()
01:14:03 drawWin()
01:15:55 Completed
01:16:49 Drawing range of ghosts
01:19:25 Incredible fail :(
01:21:13 Winner winner, chichken dinner
We got a 5% discount on all the keyboards. You can check the name of the keyboard that I used in the video in description. yunzii-mechanical-keyboard.myshopify.com/discount/SERVETGULNAROGLU
But how do you push the butins so fast
now, i'm your follower
Hocam klavyeler hakkında video gelein
Bro I need to know the shortcutkeys that you've been using
which software
Coding all day then listening to someone code to relax. What am I doing with my life
haha
lmao
There right thing
Relaxing.
i am asking myself same thing
Crazy how such a simple game can be so much complex. Thanks!
Who ever said a game can be simple 😂
Imagine GTA 6 now
crazy how if you create this game thirty years ago you'll be a millionaire.. imagine making millions in a hour or so 🤔
is not complex if u practice a lot
I listen to my husband programming all day and here I am, it's never enough 😂
😂😂
hahaha 🤣🤣
What keyboard does he use? 😁
🤣🤣🤣
Facts
Thank you for your videos. Because of you start learning html and css. I watch you maybe for half of year and i really love your content about clone of different pages, and i clone your code and it helped me to start learning web development.
One thing I love about programming is you learn every single day. I feel like how you created the map using nested arrays where the 1 represents a wall was mind opening. It is sooooo clever and glad I found something new today!
im learning programming and that really blew my mind, such a clever way to create the map
This was my exact thought!
Incredible that this strategy is kinda obvious to me.
This is the goto method for generating a grid map in code. Represent the map using a 2D array where the state of each element represents a cell in the grid map.
Yes that's how 2d maps are made or at least it the easiest way I know of
The perfect combination of coding and relaxation! Who knew Pacman could be so soothing? 🎮👌
Currently at the 15:00 mark in this video, and I'm already eager to fiddle with the map code you've built for other projects. This will be fun both to watch and to use as a reference tool. Thank you for posting!
This is absolutely beautiful and outstanding. Just makes me wonder how humanity came up with programming.
Rocks and electricity
Yes and no switches
weaving :)
@Code_Works they are just different ways to interpret binary no? That's my understanding.
Drugs
This is an exciting project. I once implemented a Pacman as an interview project on mobile, and then re-implemented it in 3D. Also used similar level mapping technique for that. Amazing to see the live coding
🐒
Always love your videos and your keyboards are always top notch! Your videos inspired me to learn CSS and HTML! It has been 2 months since I started learning and I even started posting some web dev content! Latest one was making Google search page clone. I even added the responsiveness to it. 🙂Thank you Servet for inspiring me to learn! All the love ❤
Thank you! You made my day! All the love ❤
@@ServetGulnaroglu Good afternoon can you tell me that how can I become the best programmer like you
@@dilshodfayzullayev3767practice and devotion
@@dilshodfayzullayev3767 interest, enthusiasm in coding>>other factors!!
:simley_cat
Always love your videos and your keyboards are always top notch! Your videos inspired me to learn CSS and HTML! It has been 2 months since I started learning and I even started posting some web dev content! Latest one was making Google search page clone. I even added the responsiveness to it. Thank you Servet for inspiring me to learn! All the love
This so cool man! Thanks for creating these.
🐀
WOW that was freaking amazing! nice work!
I remember being in bed at night and hearing my dad type on the computer that we used to own, it was always nice to listen to
Such an intersting video. I am really impressed. Good work :D
Besides your coding skills, the sound of your typing is quite enjoyable to me. Damn Good!!!
he most likely have two monitor side by side, copy pasting but in visual
A useful link for dijsktra visualization: clementmihailescu.github.io/Pathfinding-Visualizer/#
This is so satisfying to watch and relaxing 😎
This video is truly a great source of inspiration for me. Thank you for making it!
🦊
You're so welcome!
@@ServetGulnaroglu what text editor are you using?
@@johanchavez5890 Visual Studio Code
@@johanchavez5890vs code
Heavy vim user here.. I noticed you started using t motion to execute commands inside HTML tags.. big up for that in comparison to your last videos.. About vim commands, you should probably try v-block mode to edit multiple blocks of code (that would have been much faster in the map section to swap 1s and 2s) Keep going, love your content!
Thanks mate, appreciated 🙏🏽
🐹
If thats how much it took to program a simple game like pacman into java script, imagine having to do this all on asm like how they did in the 80s. bravo as always.
I love programming! Thanks to these videos, I increasingly want to return to what I was so passionate about, which was programming.
Stunning work, simply amazing
One of the best videos i've EVER seen in my entire life
One of the best comments i've ever seen
But why? What makes it so good?
@@webdevcoursestv because it is good, the keyboard sound is good, the code is free if you are doing pacman game, u can just check this video Xd
@@ServetGulnarogluone of the best reply to a comment i have ever seen
@@webdevcoursestv one of the best clueless or indifferent comments i have ever seen !!
I love this content im learning way more than when the coder talks lol
yws same here
🐢
This is probably the only asmr I enjoy
Trying to get into that master level oft text manipulation that you do what shortcuts do you use to bounce around so much in VS code? Also i see you're switching between insert and override? EDIT: Could you list what you use for live refreshes on save? The extensions that you use with VSCode?
Isn’t it just vim motions?
just learn vim bro
Incredible!
I just want to say, thank you for this video! I didn't use it as an ASMR video, but instead I followed along and was able to learn many new things (I haven't done very much javascript before). I find it intriguing how you use VIM commands in VSCode. How did you discover that? And how long have you been learning VIM commands to have them just seamlessly integrated into your workflow?
it's been a couple of years I am using VIM. still not perfect but things get better everyday :) Thank you
Keybord tapping just got me sleep, also good sound to, keep do nice job, ma G
Im not sure if you're a coding channel, an asmr channel, or an asmr coding channel, but either ways, I loved watching this! Loved the keyboard sounds and also seeing the coding going on (as someone who doesn't know all that much about coding besides what I've seen a decade ago in one semester of computer science haha).
Too fast, bro chill
Coding fast like that feels really good actually
He is actually doing a lot of mistakes with his vim shortcuts because he tries to be fast. Nevertheless still a good pace ;)
exactly what im thinking the whole time. if you are typing so fast that you make a mistake nearly every line you spend more time correcting it than if you were to just go a little slower
You’re a better programmer when you go fast and make mistakes
@@nickhobert2077 Then who will watch the video when he types like a turtle.. It’s just a video to entertain people.
MOTIVATION FOR CODING ❣️❣️
gotta love those keyboard sounds SIr, music to my ears.
Congrats Servet! It's awesome!
🎉 Thanks Raphael!
I used to make front end designs for websites in college, which actually got me hooked on the idea of coding. I really need to make to learn Java...
One of the best asmr programming video I ever seen) Maybe next time you will add keycastr, because its iteresting to knew shortcuts you use in video and I cant understand sometimes what keys you type))
Appreciate your work ❤️
Beautifully! Without words.
The fact that you did this in an hour tells me that you are truly Talented. Happy Coding my Friend 🙂
He coded it before and it definitely took him hours including a lot of googling and trial and errors (at least when he was coding pac-man for the first time). This is how programming works. Now he just created the project mainly out of fresh memory after figuring everything out.
@@DanoSvK1 I know how programming works. I’m saying that the fact that he remembered how to do all of that is talented.
It's great I was able to reduce the size of the code
Great relaxing video - love the keyboard
🐼
your video is great!!! Your videos always i get a motivation
It's Insane
It's crazy how we have come so far. Programming is one of the most important things today.
Can I ask why, creating the map, you put 1 for the walls and 2 for the right path, and then 0 in some spots? What are the 0 for?
This is so fun. I can watch it all day:)
Servet bey ben de yeni yeni html css bitirdim senden rica etsem senin html-css sonrası öğrendiğin şeyler veya izlediğin yol nedir bilgi verebilir misin bu yorumun altına
Html ve Css sonrasi Javascript ögrenmen mantikli olur. Bu sayede olusturdugun butonlari, textleri, genel olarak web siteni interaktif hale getirebilirsin.
Css ogrendikten sonra bootstrap ogrenebilirsin cunku bazi css komut kumelerini tekrar tekrar projelerinde yazmak yerine bootstrap denen css kutuphanesiyle daha rahatca projelerinde kullanabilirsin. Ayrica tailwind css de ogrenebilirsin. Sonrasinda Javascript ogrenmen gerekecektir cunku front end developer olarak bir yol haritasi cikaracagini dusunursek React , Angular , Vue.JS gibi Javascript kutuphanelerinde kod yazabilmen icin Javascript bilginin olmasi gerekecektir. Cogu insan Javascript'i tam anlaminda ogrenemeden bu gibi Javascript kutuphanelerini ogrenmeye calistiklari icin zorlanirlar ve ogrenme cehennemine girerler. Ileriki zamanlarda sirketlerde calisirken cogu ilanda Typescript de istendigini goreceksiniz. Typescript , Javascript'e gore strongly typed dedigimiz degisken turlerinin oldugun , OOP dedigimiz prensibin yer aldigi kurallarin yer aldigi bir programlama dilidir. Kullanilmasinin sebebi , projede surdurulebilirligi saglayabilme , kodun daha okunabilir olmasidir. Ben mesela bir yazilimci aldim sonra cikti diyelim , gelen yazilimci projede kodu okurken oradaki degiskenin ne ise yaradigini turunu bildigi icin daha hizli adapte olacaktir. Dahasi da oldugunu dusunuyorum fakat benim aklima gelenler bu kadar. Internet uzerinde Front-End Developer Roadmap olarak arastirdiginiz zaman Ingilizce yazilar ve dokumantasyonlardan yorumlayarak bir yol haritasi cizebilirsiniz.
@@GameFreasher teşekkürler
How you're typing that fast is beyond me, just now starting to learn Python. Wonder if I'll ever get that fast lol.
you'll get there
hows going man never give up keep goin!
It'll happen by itself overtime. The more you type the more you subconsciously memorize the keys locations and increase your own key stroke speed
Never Give Up!! You Never What? :)
Thank you for rekindling my interest in programming
you are very nice coder😊😊😊😊
You are a real coder.
@@guambejr racist
abi çok sağol neredeyse tüm videolarını izlemeye çalışıyorum ve senin sayende çok şey öğrendim çok ama çook teşekkür ederim.
These are some Godlike super sayan JavaScript programming ninja skills. Incredible to watch
Can you make a tutorial on all the shortcuts you use to navigate the code without the mouse: like selecting text and replacing it, going left and right and to the end of the line.
He did on his channel
you got me :)
Awesome vim skills... May I ask how much time did you spend training it?
This is great, Love to see the code its inspiring but man IS SLAMING those keys xd especially when he's testing the game
Hello, I see that you can move the cursor text between statements without using Arrow keys (you just use Alphabet keys). Can you show me how to do that ?
This is because he is using an extension for vscode called Vim. Vim is a veeery old text editor that was invented before mouses existed, so everything was done via the keyboard. You can lookup a tutorial on how to use it. It can be hard to learn but once you do it's great
i wish i could understand all your shotcuts 😢 looks so cool
It is easy you can practice this in 15 days. Vim shortcuts are really usefull
just read the vim user manual
I would love to learn this type of stuff. What coding workshop did you use and what is the best one for any skill level?
Bro is on next level. I'm excited and jealous
I wish I started learning at an early younger age
I am learning at 13
Age is not important. Programming can be learned at any age. How old are you?
I started as an adult, took me 5 years of coding as a hobby before I could code "on my own". You could probably do it even faster if you watch courses. It's not too late 🙂
While you can learn it as an adult you will never be as good as you would be if you started as a teen,.. just like your first language
My sympathy to anyone sharing walls/floors/ceilings with this guy
Hello, what font are you using on your Visual Studio Code ?
your coding is very skillfull. good video❤
Visual studio code is indeed a really good coding software
not better than vim
Anyone else find the sound of typing on a keyboard soothing? 😌
Psychic style.
Isn't that why they're here
This is amazing
This was amazing!
what software do you use?
vscode
Servet abi, udemy kursu yapsana bir şeyler öğrenelim
Been on the fence about buying one of these boards, but I'm curious, do you do anything to yours (oil switches ect) or do they come like you showed in this video? Thanks and great videos.
I looked it up and it seems, that no modification like the oil switches are needed. Yes you can use them, but for an Asmr video it should be good.
I've been learned to peogram games with GoDot and C# lately. Out of curiosity, did you pre-plan what you were going to code? Or did you improvise it all? Currently I need to pre-plan everything, just curious if you eventually reach a state of mind where you can free-code like that, if you are. Amazing video.
i really want to know all these shortcuts, it's awesome to an amateur coder like me
he is using VIM first you'll need to learn VIM
After completing you are serious into the game 😂😂
Haha :D Yes
I really love your keyboard!
Awesome content. Thank you
arent the ghosts supposed to move the whole time?
Yes, it can be fixed by changing the interval in the constructor of ghost class from 10000 to ~4000
How is your keyboard so loud
New driver
One of the best videos i have seen :)))
Normal people: Listening to Whispering ASMR from E-Girls* Me:
:d
I think vim mode is slowing you down. I highly recommend learning VS Code's built-in key combos, they really are very very good. Line duplication is just alt+shift+down. Inserting a new line after the current one is ctrl+enter. You seem to be trying very hard to do clever/speedy vim keybinds and end up wasting time recovering when you mess them up
Vim is a journey and I am a passenger. I always learn new things about vim. And it's never gonna stop. I will be faster tomorrow than today for sure. Also, almost every IDE has vim extension. However, you can only use VSCode shortcuts in VSCode. Thank you for the advice though ✌
@@ServetGulnaroglu Whatever works for you, my friend
I was thinking in create a multiplayer mode where other players can control the ghosts
This would be awesome 😎
It already exists,pacman VS and pacman party Royale.
Nice to see some different logics on how to make pacman
I have never been programming or even near learning it but I started being curious as I dont really have any hobby and Im bored to the death how programming works and wanted to chill. Saw this video and I must say it was really satisfying watching you programming. I never new you can create map with just pure numbers, If I understood correctly you used 1 for creating wall 2 for creating empty space and 0 for deleting objects. I might actually start learning programming just for fun . Keep up with videos !
Selam, klavyede hangi renk switch kullanıyorsun?
Thank you for keeping it BS-Free.
OMG dude, your kboard is awesome.
I watched this in less than 10 minutes, and I have to say I'm impressed lmfaoooooo
WOOOOOOOOOOOOOOOOW!!! This was so cool!!
WHOA pretty cool ideal💪🏽 thanks
Just a question what code editor did you use for this? Visual Studio code?
love that keyboard 🔥
Hi, i want to ask you something. First of all, great video, i really love it. I've watch it all. So my question is: On min 12 you wrote setInterval(gameLoop, 1000/fps). fps = 30. but why you have to divide 1sec on 30? i hope i explained myself well.
Just one question is it better for you using UTF-8 or ASCII?
Merhaba abi, seni yeni keşfettim hemen takibe aldım :). Bu arada c# öğreniyorum da biraz zorluk çekiyorum önerebileceğin güzel Türkçe kaynak var mı ?
I just started my journey to learn how to code and im super confused lol but i expect it because thats how i was when I studied hvac, so hopefully in half a year i can be close to your skill level
Excellent,and beautiful!
What are good keyshortcuts? I know strg a to mark all and shift tab to remove a left gap of a block of code. Those helped me alot, but i see you go so fast between lines and words, you have more?