[ASMR Programming] Tetris Game - No Talking

hello. 🙌 I'm working on a making challenge to create one web, app, or game per week with HTML, CSS, and JS.
This video is Tetris Game.
This Tetris game has a drop function and a ghost function.
If there's something you'd like me to create, such as a website, component, or game, let me know in the comments.
I made a demo page where you can check the code in the video.
You can check the source code and images.
🔸 my web site: cozy-coder.com/
🔸 Discord : / discord
🔸 See more making challenges: • ASMR Making Challenge
🔸 Code all night long with me : • Code With me
I upload videos every week.
Subscriptions, likes, comments and likes are a great help to me!
-----------------------
✍️ video timeline
00:00 intro
00:20 HTML coding
01:08 CSS coding
05:59 JS coding Start
11:41 Random Tetromino
13:46 Draw Tetromino
16:50 Erase Tetromino
16:50 Move Tetromino
22:00 Add keypress event
24:14 Rotate Tetromino
30:22 Collision Check
34:19 Lock Tetromino
40:17 Clear Rows
51:19 Add Ghost Function
01:10:28 Result
-----------------------
💻 My Setup
• Laptop: M1 Macbook Pro
• Editor: Vscode (Night Owl Theme)
• Keyboard: HHKB Professional 2 Type-S (self lubrication)
-----------------------
email: [e-mail]
#asmr #asmrprogramming #asmrcoding #html #css #javascript

[@begula_chan]

Thank you very much, thanks to you i was inspired to create something like that and now it looks really cool!

[@cozycoding]

I am inspired by comments like these. Thanks for the comment😍

[@sebastianraju79]

Great to see ❤

[@cozycoding]

thanks for watching🥹

[@laalpattharkedevata]

Your keyboard is so crunchy, I love it

[@cozycoding]

thanks 🙏

[@tharsanv0809]

Awesome channel bro, subscribed :)

[@cozycoding]

thanks bro 😍

[@cydexcode]

Nice project ❤️👌

[@cozycoding]

Nice Comment❤️

[@CodeWhispersASMR]

nice! will try to create something like this too! ❤👌

[@cozycoding]

thanks bro. You can make it even better 👍

[@cozycoding]

All source code and assets for this project can be downloaded from my site. If the video was helpful, please leave a like and comment. ❣ 📍cozy-coder.com/

[@irfaanvallapilm3847]

New Subscriber here! Keep it up bro!!!

[@cozycoding]

Thanks Bro 😊

[@infinitylooop644]

very nice sounding of the keyboard, did you mod or lube it? I am currently using standard version of HHKB too, just wondering should I get a type-s version :) anyways nice video.

[@cozycoding]

I self-lubricated the keyboard and put sound-absorbing material in it. The basic version had a lot of resonance, so I customized it. 😁

[@uchiha5059]

Absolutely insane for me i wonder if i would ever be able to do something like this, for how long have you been coding? And what age did you start if you don’t mind sharing.

[@cozycoding]

I started at the age of 27 and am now in my 3rd year as a developer. 😁

[@uchiha5059]

@@cozycodingaint no way you only got three years of experience if its true then this is highly motivating thank you!

[@JaySlimCodes]

@@uchiha5059 I can do about the same 2 years it. Best advice is just do it literally

[@uchiha5059]

@@JaySlimCodesyes dont worry about me im first year and giving paid tutoring to students but this still seem really advance for me since i havent touched js yet but truly inspiring and motivating to hear that from both of yall❤

[@srijonofficial621]

​@cozycoding bro give me some tips I am now at 9th grade doing coading I know html , js , css and python

[@BlackBearSuperFan96]

Wow....impressive!!

[@cozycoding]

thanks 😘

[@stavroulagalani4007]

Nice keyboard!!what are the switches? also great vid👍

[@cozycoding]

thanks for watching.❤️ my keyboard is a contactless keyboard. "Happy Hacking Keyboard Professional2" 🙏

[@randommaster4952]

Hello, I love your videos. What application do you use to create your games?

[@cozycoding]

Thanks 👍 I use the vscode editor and I'm making a game using only html, css, and js.😊

[@RevibeMods]

Geez that keyboard is nice

[@cozycoding]

thanks!!

[@0xftz7w99o]

Great video! How do you get the keystrokes to show up in the browser?

[@cozycoding]

Thanks! I use "KeyCastr" 😊

[@dersekranda]

Hello. First of all, thank you for such a nice instructional video. My question is that the game should end when the entire screen is filled with blocks. However, even though the entire screen is filled with blocks, blocks still continue to appear above. How to prevent this situation? With which code can it be determined that the game is over?

[@tnhm291]

HHKBの音は気持いいから好き

[@cozycoding]

me too ❣️

[@georgy3136]

I am learning HTML/CSS/JS via freecodecamp, but I wanna follow along with you as well, try to understand every part. Do you think there is anything to gain from that, like essentially copying a tutorial but trying to understand the nuts and bolts? I wouldn't able to program Tetris on my own just yet.

[@cozycoding]

Simply copying may not be helpful, but I think it will be very helpful if you wonder why the code was written this way while copying. And if you make it yourself, your skills will definitely improve. 👍

[@McDorans]

heyy how to set up vscode like yours !!!! i love it

[@cozycoding]

my vscode theme is "Night Owl"

[@dfore115]

wow, i wish i could code something like this.

[@cozycoding]

I am also studying steadily. Let’s study together. If you keep doing it, you will be able to make it. 👍

[@pavankewlani-jp9tl]

Sir please answer or else how I will get the video fully and also tell from where did you got the bgm.mp3 audio also tell this thank you please answer fast

[@cozycoding]

The assets used in the video can be obtained from the demo page source on my site where the video description is located. Sorry for the late reply. 🥹

[@TecnoFinanzas_Insights]

what is name this is switch in yout keyboard

[@user-un2dg3jb8m]

How to be a professional like you?😭

[@cozycoding]

I think it's best to keep doing it consistently. Let's code hard together 😊

[@pavankewlani-jp9tl]

Sir from where did we get your pasted images

[@cozycoding]

You can get the image from the site in the video description. 😊

[@user-ub2kp5ks8w]

What is the name of the notification sound?from the beginning

[@cozycoding]

You can find it by searching for tetris background music!

[@yassinneji2567]

What is the keyboard name

[@johnsonlaw0804]

What’s your key map for the arrow keys?

[@timohavol8032]

vim

[@cozycoding]

I don't use vim, but I'm using i,j,k,l as arrow keys. Key settings were done with the karabiner app.😎

[@ThaLiquidEdit]

Keyboard stock or modified?

[@cozycoding]

modified!😊

[@ThaLiquidEdit]

@@cozycoding What did you modify I also have one and yours sounds AWESOME!

[@cozycoding]

@@ThaLiquidEdit I lubricated it and added sound absorbing material!

[@juancota5573]

Hello, I'm new to programming and they gave me a project to create Tetris. I have everything right, I already have the interface of the page but in the js part I don't know what to do, I put the code as such, I even did copy and paste and the figures don't come out, it's as if I had never put any code. Can you help me with this please or if you have a github page to see the files you used

[@cozycoding]

I think I can help if you tell me exactly what the problem is or give me the github link.

[@juancota5573]

I can't put any kind of link

[@zojirushi1]

What vsc theme do you use?

[@cozycoding]

Night Owl 🦉

[@user-969vicpdef]

Sir what's the difference between "clearrow" and "eraserow"???😢😢

[@cozycoding]

Sorry for the late reply. clearRow is a function that clears a line filled with tetriminos. Erase Tetromino is a function that erases the previous frame's tetriminos in order to draw the falling tetrominos.

[@user-zz2mg9xi6m]

굳!

[@cozycoding]

😊

[@Rocherz]

Can you make _Tengen Tetris?_

[@cozycoding]

Okay, I'll try it next time.

[@MrJloa]

Who cares about fckn Tetris?! The star of this vid is the keyboard!!! What's this goddess keyboard name/model ?? 😮😮😮

[@cozycoding]

my goddess ketboard is HHKB Professional 2 Type-S (self lubrication). 👍 thanks for watching bro

[@mineskijegtv0709]

do you have a github link for that?

[@cozycoding]

You can check the code by visiting the site in the description instead of github.😊

[@she_dreams_of...]

новый вид ASMR

[@cozycoding]

😁

[@dooya3410]

How do I make the game end? Please add that to the code

[@dooya3410]

Please answer I really need this 🙏

[@felixyou3285]

Where are the image assets?

[@cozycoding]

You can check the images on my site in the profile link. ☺

[@felixyou3285]

and the audio etc..@@cozycoding

[@user-bn7oc9uw9i]

Why can't I see Tetris in the webpage to play? Tetris you wrote is great. Has a ghost function.

[@cozycoding]

I couldn't add it because I was developing the site. I'll add it soon.🙏 thanks for watching😊

[@demianrubens2216]

Hello,can you send source code?

[@demianrubens2216]

Please

[@cozycoding]

You can get the code on my site in the video description!!

[@ChrisChhun]

Where is the source code?

[@cozycoding]

You can check it out on my site in the video description.😊

[@justportakal46]

title ---> Tetirs game

[@cozycoding]

Oh I get it now. thank you