ASMR Programming - Coding Pacman - No Talking

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

[@ServetGulnaroglu]

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

[@heidy7221]

But how do you push the butins so fast

[@saghait]

now, i'm your follower

[@OktaySinanoglu_]

Hocam klavyeler hakkında video gelein

[@GeRiZ.]

Bro I need to know the shortcutkeys that you've been using

[@darshanjv9683]

which software

[@thedeveIoper]

Coding all day then listening to someone code to relax. What am I doing with my life

[@imkir4n]

haha

[@luazul_]

lmao

[@Happy_SIDE]

There right thing

[@rydermccall3590]

Relaxing.

[@hizzlyplay8127]

i am asking myself same thing

[@ze_kangz932]

Crazy how such a simple game can be so much complex. Thanks!

[@nicholassalmon8054]

Who ever said a game can be simple 😂

[@TejasChauhan0]

Imagine GTA 6 now

[@GeeGnebAb]

crazy how if you create this game thirty years ago you'll be a millionaire.. imagine making millions in a hour or so 🤔

[@J_Carlos05]

is not complex if u practice a lot

[@MishGonzalez]

I listen to my husband programming all day and here I am, it's never enough 😂

[@devonharvey8414]

😂😂

[@AstorSkywalker]

hahaha 🤣🤣

[@Way_Of_The_Light]

What keyboard does he use? 😁

[@darkside3ng]

🤣🤣🤣

[@josueverificado1464]

Facts

[@kazukiaj8565]

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!

[@selmarantonio]

im learning programming and that really blew my mind, such a clever way to create the map

[@itsamialessandro402]

This was my exact thought!

[@filipefera4097]

Incredible that this strategy is kinda obvious to me.

[@atheon596]

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.

[@nicholassalmon8054]

Yes that's how 2d maps are made or at least it the easiest way I know of

[@blackreaper4453]

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.

[@theonewiththegoldentouch]

This is absolutely beautiful and outstanding. Just makes me wonder how humanity came up with programming.

[@Zero-dx6kr]

Rocks and electricity

[@jasonsworld333]

Yes and no switches

[@sinanisler1]

weaving :)

[@jasonsworld333]

@Code_Works they are just different ways to interpret binary no? That's my understanding.

[@mrrogers101391]

Drugs

[@commentshark]

The perfect combination of coding and relaxation! Who knew Pacman could be so soothing? 🎮👌

[@taokodr]

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!

[@codingandthings]

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

[@ioinfinity]

🐒

[@studyingasyouwere]

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 ❤

[@ServetGulnaroglu]

Thank you! You made my day! All the love ❤

[@dilshodfayzullayev3767]

@@ServetGulnaroglu Good afternoon can you tell me that how can I become the best programmer like you

[@Krakoon]

@@dilshodfayzullayev3767practice and devotion

[@desiboi2559]

@@dilshodfayzullayev3767 interest, enthusiasm in coding>>other factors!!

[@ioinfinity]

:simley_cat

[@SuperEvilDoc]

Too fast, bro chill

[@valovanonym]

Coding fast like that feels really good actually

[@abetasticx7982]

He is actually doing a lot of mistakes with his vim shortcuts because he tries to be fast. Nevertheless still a good pace ;)

[@nickhobert2077]

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

[@AlexTurbo]

You’re a better programmer when you go fast and make mistakes

[@xlimitx0725]

@@nickhobert2077 Then who will watch the video when he types like a turtle.. It’s just a video to entertain people.

[@1Chitus]

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

[@taskmanager_1021]

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

[@RobotPilots]

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.

[@chance4771]

WOW that was freaking amazing! nice work!

[@ScreadForTheWin]

I love programming! Thanks to these videos, I increasingly want to return to what I was so passionate about, which was programming.

[@turbowarsutube]

This so cool man! Thanks for creating these.

[@ioinfinity]

🐀

[@fraso]

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!

[@ServetGulnaroglu]

Thanks mate, appreciated 🙏🏽

[@ioinfinity]

🐹

[@ioinfinity]

[@Lsr-bt5hb]

Besides your coding skills, the sound of your typing is quite enjoyable to me. Damn Good!!!

[@angryman9333]

he most likely have two monitor side by side, copy pasting but in visual

[@gamesmaster919]

Stunning work, simply amazing

[@snowballeugene]

Incredible!

[@codingrelaxingasmrpov]

This is so satisfying to watch and relaxing 😎

[@user-ml4ln4fw6v]

Beautifully! Without words.

[@543Akeel]

One of the best videos i've EVER seen in my entire life

[@ServetGulnaroglu]

One of the best comments i've ever seen

[@webdevcoursestv]

But why? What makes it so good?

[@iamtufa]

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

[@4Musketeers-pj3jb]

@@ServetGulnarogluone of the best reply to a comment i have ever seen

[@udoyoung1627]

@@webdevcoursestv one of the best clueless or indifferent comments i have ever seen !!

[@TruyenNetTN]

This video is truly a great source of inspiration for me. Thank you for making it!

[@ioinfinity]

🦊

[@ServetGulnaroglu]

You're so welcome!

[@johanchavez5890]

@@ServetGulnaroglu what text editor are you using?

[@anestesyyy8120]

@@johanchavez5890 Visual Studio Code

[@heitor5575]

​@@johanchavez5890vs code

[@mercenaryghost2850]

This is probably the only asmr I enjoy

[@codingasmr69]

Such an intersting video. I am really impressed. Good work :D

[@timothyt.82]

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

[@ForeignMadeIt]

I love this content im learning way more than when the coder talks lol

[@Nawafmilfi]

yws same here

[@ioinfinity]

🐢

[@takundanyirenda2907]

gotta love those keyboard sounds SIr, music to my ears.

[@luzten]

Awesome content. Thank you

[@AjitPratapSingh904]

MOTIVATION FOR CODING ❣️❣️

[@joysen.developer]

It's Insane

[@anilates1774]

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.

[@WhiteBear-dy8jn]

Thank you for rekindling my interest in programming

[@Jdecode]

It's great I was able to reduce the size of the code

[@alvarholma]

It's crazy how we have come so far. Programming is one of the most important things today.

[@israEla77]

Keybord tapping just got me sleep, also good sound to, keep do nice job, ma G

[@goranshshukla5683]

Appreciate your work ❤️

[@bincut09]

The fact that you did this in an hour tells me that you are truly Talented. Happy Coding my Friend 🙂

[@DanoSvK1]

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.

[@bincut09]

@@DanoSvK1 I know how programming works. I’m saying that the fact that he remembered how to do all of that is talented.

[@atakhanovcoder139]

you are very nice coder😊😊😊😊

[@rcarubbi]

Congrats Servet! It's awesome!

[@ServetGulnaroglu]

🎉 Thanks Raphael!

[@kenm9698]

Excellent,and beautiful!

[@ItsREMCodes]

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?

[@ServetGulnaroglu]

it's been a couple of years I am using VIM. still not perfect but things get better everyday :) Thank you

[@dxnsav]

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

[@jadawngriffis3745]

This is amazing

[@tomtypingasmr]

Great relaxing video - love the keyboard

[@ioinfinity]

🐼

[@Shizzymynizzy]

You are a real coder.

[@wash36]

​@@guambejr racist

[@ServetGulnaroglu]

A useful link for dijsktra visualization: clementmihailescu.github.io/Pathfinding-Visualizer/#

[@joshuaheathcote2116]

This was amazing!

[@nebursp5]

You can use the dot command to repeat the last command. It could be usefull replacing the values in the matrix.

[@smokehouse2544]

How you're typing that fast is beyond me, just now starting to learn Python. Wonder if I'll ever get that fast lol.

[@madschassis]

you'll get there

[@Nirvexis811]

hows going man never give up keep goin!

[@solidzack]

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

[@kemelyn656]

Never Give Up!! You Never What? :)

[@MyNguyen-nj1jx]

i wish i could understand all your shotcuts 😢 looks so cool

[@vaibhavnayak1127]

It is easy you can practice this in 15 days. Vim shortcuts are really usefull

[@templah9394]

just read the vim user manual

[@atakhanovcode]

your video is great!!! Your videos always i get a motivation

[@playingBIG1]

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

[@nunopereira265]

Visual studio code is indeed a really good coding software

[@madschassis]

not better than vim

[@ohnoitsaninja]

My sympathy to anyone sharing walls/floors/ceilings with this guy

[@Phougat]

This is so fun. I can watch it all day:)

[@PatChatASMR]

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

[@yuratripwire1001]

I wish I started learning at an early younger age

[@Noaiaiaiaia]

I am learning at 13

[@Xardimods]

Age is not important. Programming can be learned at any age. How old are you?

[@thedeveIoper]

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 🙂

[@Ljosi]

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

[@wangdomAvg2900]

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.

[@charlesmarchant6990]

He did on his channel

[@ServetGulnaroglu]

you got me :)

[@sayo1777]

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 !

[@safaksahin4687]

Harika video , teşekkürler

[@ruimendes6538]

These are some Godlike super sayan JavaScript programming ninja skills. Incredible to watch

[@rydermccall3590]

Anyone else find the sound of typing on a keyboard soothing? 😌

[@asev1969]

Psychic style.

[@charliechan6892]

Isn't that why they're here

[@AirMadeStudio]

Nice to see some different logics on how to make pacman

[@cgpmth6449]

i really want to know all these shortcuts, it's awesome to an amateur coder like me

[@sunrisexoxo220]

he is using VIM first you'll need to learn VIM

[@glitchy9171]

Servet abi, udemy kursu yapsana bir şeyler öğrenelim

[@gjcardonam]

This is some kind relaxing

[@SunnySpitts]

This is great, Love to see the code its inspiring but man IS SLAMING those keys xd especially when he's testing the game

[@minhthongnguyenhuu4509]

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 ?

[@jforjendetta]

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

[@gazehound]

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

[@ServetGulnaroglu]

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 ✌

[@gazehound]

@@ServetGulnaroglu Whatever works for you, my friend

[@djgaszman]

amazing so great 😁👍 merci for den Host.

[@3RDEYELOVE]

WHOA pretty cool ideal💪🏽 thanks

[@misticnumberone]

what software do you use?

[@verdadedita1878]

vscode

[@BlueWishdom]

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

[@gorilla2284]

Html ve Css sonrasi Javascript ögrenmen mantikli olur. Bu sayede olusturdugun butonlari, textleri, genel olarak web siteni interaktif hale getirebilirsin.

[@GameFreasher]

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.

[@BlueWishdom]

@@GameFreasher teşekkürler

[@binihalex8097]

Bro is on next level. I'm excited and jealous

[@rcarubbi]

I was thinking in create a multiplayer mode where other players can control the ghosts

[@ServetGulnaroglu]

This would be awesome 😎

[@spinelandrodrigoandres8863]

It already exists,pacman VS and pacman party Royale.

[@simulatorlover3042]

After completing you are serious into the game 😂😂

[@ServetGulnaroglu]

Haha :D Yes

[@rthelionheart]

Thank you for keeping it BS-Free.

[@user-zb3tp2yo8d]

your coding is very skillfull. good video❤

[@multiarray2320]

arent the ghosts supposed to move the whole time?

[@ServetGulnaroglu]

Yes, it can be fixed by changing the interval in the constructor of ghost class from 10000 to ~4000

[@jeremywong7763]

How is your keyboard so loud

[@viper9178]

New driver

[@jadawngriffis3745]

This makes me appreciate modern gaming so much more.

[@pulserudeus7968]

love that keyboard 🔥

[@codesydney]

Wow, that's awesome!

[@lynsanderalejandronavas1347]

WOOOOOOOOOOOOOOOOW!!! This was so cool!!

[@smylmvv]

I really love your keyboard!

[@trueskyte]

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.

[@Dani6667w7]

OMG dude, your kboard is awesome.

[@garyproffitt5941]

He is a genius Servet Gulnaroglu and believe in the PaCmAn code✔

[@nonameneeded7996]

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

[@thelacost213]

goog job as fast and clear code

[@baiyoksku8013]

The man who generated these codes 🤖👽🧠

[@romievthedon]

I watched this in less than 10 minutes, and I have to say I'm impressed lmfaoooooo

[@ezcondition]

at the beginning he was warming to keyboard up so it didn't pull a muscle.. good job sir.

[@illiakyselov6913]

freaking love it 💪

[@gretalaubscher7596]

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?

[@g.guevara2578]

That was amazing