ASMR Programming - Coding Tetris - No Talking

Hello my dear coders,
I made a tetris game with javascript and html canvas. Hope you enjoy it 🎉🎉
Enjoy! 🎉🎉

👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻
Live a star on github, if you enjoy!
👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻

📦📦📦📦📦📦📦📦📦📦📦📦📦📦📦
All the products in this video

⌨️ Keyboard: IQUnix OG80 Wormhole TTC ACE switches and Costar Stabilizers (5% discount)

🖱️ Microsoft Bluetooth Mouse

🖥️ Monitor ASUS VA24DQ 23.8” Monitor, 1080P Full HD, 75Hz

💻 2021 Apple MacBook Pro (14", Chip Apple M1 Pro con CPU 10-core e GPU 16‑core, 16GB RAM, 1TB SSD)

🎤 Rode NTG4+ Shotgun Microphone
📦📦📦📦📦📦📦📦📦📦📦📦📦📦📦

00:22 Preparing html file
01:28 Running live-server
02:10 Tetris class
03:36 Constants
04:26 Adding img tag
05:29 Array of all tetris shapes
08:57 Variables
09:37 gameLoop()
10:51 reset()
12:52 draw()
13:55 drawBackground()
16:50 drawCurrentTetris()
20:40 Solving a bug
21:58 First drawing
22:41 checkBottom()
25:28 First fall down
26:17 update() continued
28:30 drawSquares()
31:33 Adding a keydown listener
33:12 moveBottom()
33:57 moveLeft()
34:30 moveRight()
35:40 Solving if bug
36:16 changeRotation()
40:06 checkLeft()
42:09 checkRight()
43:00 checkRotation() continued
45:36 deleteCompleteRows()
49:41 nextShapeCanvas
51:00 drawNextShape()
53:42 scoreCanvas
56:23 Solving a bug
59:21 Copying replay svg
01:00:00 Restart Button
01:03:44 drawGameOver()
01:06:49 Done

[ServetGulnaroglu]

You can visit servetg.com/tetris to play 🚀

[Cyberfoxxy]

Literally programming my own 3D Tetris for over a week now. And then this guy does it in an hour.

[muffinman]

Been programming professionally for almost 10 years and this kid would wipe the floor with me 😭

[lufsss_]

Hey man, what you think of add a little window showing in real time the keys that you press? It will be awesome!

[shalombentenzingnamchyo]

Wow videos like this are uniquely inspiring.

[fatmaallen]

Videoların devamı gelsin, Çok faydalı olmuş, Teşekkürler hocam, Thank you so much 🙂🙂🙏🙏

[LouzGamez]

Man your keyboard sounds good. just like music to my ears

[JoshisJoshisJosh]

Didn't know i needed this in my life

[aimranehd]

altho this wasnt intended to be a tutorial, i'd still consider this the best coding tutorial ever

[etodemerzel]

I must say, this is surprisingly nice for running in the background.

[lamszehang]

Great video and coding!
Just visited the website to play, and just tested with a bug: when the block reaches bottom, you immediately rotate it.
Hope you have time to fix it :D Great video though, love the sound of your keyboard, keep it on!

[berkserbest]

Servet, ellerine sağlık çok eğitici bir videoydu benim için artık tetris yapabiliyorum ancak hala oynayamıyorum. Teşekkürler.

[JackOfAllRAIDs]

That was fun to watch. Now to add levels.

[Demi.]

This man must’ve been born programming

[TinyMaths]

I'm still in the learning coding process (month10) but finished my first attempt at Tetris about a month ago. God I almost lost my mind trying to figure it all out; and yep the code looks like spaghetti junction at the moment. I'll go back and refactor once I get over the trauma 😆 - this will do for an ASMR and a big amount of learning too; how to do things the proper way!

[yyx]

one minor thing: rotation only checks boundary of the grid for collision detection, but not the existing shapes come before it, which can/should also block rotations. You can test it by having a "L" shape 1 row away from another shape, then try rotating it, see if it goes "into" the other shape.

[jackietf]

Hey that's so cool!!, Thank you so much!, Though can you post what plugins you have for vim

[extremoleste]

What part of the code did you put the images from rotations.png ?

[Maxthelord-ilqf]

Hay quá đỉnh nhìn mà hoa hết cả mắt huhu @@

[eidnoxon]

Hi! can you tell me how did you learned programming? from books or you was in a programming school?
just asking! have a good day