ASMR Programming - Coding Pacman - No Talking
HTML-код
- Опубликовано: 22 май 2024
- 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
you know you're doing it right if you break it down into small simple chunks :3
I listen to my husband programming all day and here I am, it's never enough 😂
😂😂
hahaha 🤣🤣
What keyboard does he use? 😁
🤣🤣🤣
Facts
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
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
🐒
The perfect combination of coding and relaxation! Who knew Pacman could be so soothing? 🎮👌
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.
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
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.
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!
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
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
This so cool man! Thanks for creating these.
🐀
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.
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
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 programming! Thanks to these videos, I increasingly want to return to what I was so passionate about, which was programming.
Such an intersting video. I am really impressed. Good work :D
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 🙏🏽
🐹
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
Stunning work, simply amazing
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
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...
Congrats Servet! It's awesome!
🎉 Thanks Raphael!
Great relaxing video - love the keyboard
🐼
Incredible!
It's great I was able to reduce the size of the code
This is so satisfying to watch and relaxing 😎
gotta love those keyboard sounds SIr, music to my ears.
It's crazy how we have come so far. Programming is one of the most important things today.
MOTIVATION FOR CODING ❣️❣️
Keybord tapping just got me sleep, also good sound to, keep do nice job, ma G
This is so fun. I can watch it all day:)
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.
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))
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).
you are very nice coder😊😊😊😊
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
Beautifully! Without words.
Nice to see some different logics on how to make pacman
It's Insane
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
Thank you for rekindling my interest in programming
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 !
You are a real coder.
@@guambejr racist
Visual studio code is indeed a really good coding software
not better than vim
your video is great!!! Your videos always i get a motivation
This is great, Love to see the code its inspiring but man IS SLAMING those keys xd especially when he's testing the game
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
I really love your keyboard!
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
Anyone else find the sound of typing on a keyboard soothing?
😌
Psychic style.
Isn't that why they're here
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? :)
Awesome content. Thank you
One of the best videos i have seen :)))
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
These are some Godlike super sayan JavaScript programming ninja skills. Incredible to watch
your coding is very skillfull. good video❤
OMG dude, your kboard is awesome.
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
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 :)
Appreciate your work ❤️
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.
Servet abi, udemy kursu yapsana bir şeyler öğrenelim
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
You can use the dot command to repeat the last command. It could be usefull replacing the values in the matrix.
This was amazing!
what software do you use?
vscode
Bro is on next level. I'm excited and jealous
Good coding, wish I could code like this.
A useful link for dijsktra visualization: clementmihailescu.github.io/Pathfinding-Visualizer/#
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 have a suggestion for the sound of the keyboard. If you use a towel or t-shirt or something similar underneath it it makes it sound much thockier and less echoy and less woody.
I watched this in less than 10 minutes, and I have to say I'm impressed lmfaoooooo
After completing you are serious into the game 😂😂
Haha :D Yes
How is your keyboard so loud
New driver
Excellent,and beautiful!
Судя по звукам грохота 5:28 , 5:45 Pacman уже бродит между этажей и ищет автора ролика
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
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.
amazing so great 😁👍 merci for den Host.
Now, make them communicate to each other your location. Any ghost in range of another knows your location with a tier system for information. Only tier one information can be transfered which comes from the nearest ghost. The information will then go down a tier to be non-transferable.
omg so beatiful :D nice video bro
hocam ahaha gerçekten müthiş bir fikre imza atmışsınız hiç daha önce bu tarz bi videoyla karşılaşmamıştım
I tried coding pacman a few years back. I knew very little about programming but I stil tried it. It was a very simple, incompleted version but I had fun though!
at the beginning he was warming to keyboard up so it didn't pull a muscle.. good job sir.
love that keyboard 🔥
WHOA pretty cool ideal💪🏽 thanks
The new Pac-Man coding speedrun is looking fire 🔥
Halaldı qaqaş,adıvı oxuyanda sevindim Azerbaycandada öz üzerinde işleyen gencler var.
goog job as fast and clear code
The man who generated these codes 🤖👽🧠
Awesome vim skills... May I ask how much time did you spend training it?
Awesome work. You are virtuosic. I subscribe.
keyboard typing sound is so good