ASMR Programming - Coding Tetris - No Talking

แชร์
ฝัง
  • เผยแพร่เมื่อ 22 ก.ค. 2024
  • Hello my dear coders,
    I made a tetris game with javascript and html canvas. Hope you enjoy it 🎉🎉
    My twitter account: gulnaroglus
    You can play the game on: servetg.com/tetris
    Enjoy! 🎉🎉
    Twitter: / gulnaroglus
    👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻
    Source code : github.com/servetgulnaroglu/t...
    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)
    iqunix.store/servetgulnaroglu
    🖱️ Microsoft Bluetooth Mouse
    amzn.to/3UFgHl5
    🖥️ Monitor ASUS VA24DQ 23.8” Monitor, 1080P Full HD, 75Hz
    amzn.to/3BB5ppa
    💻 2021 Apple MacBook Pro (14", Chip Apple M1 Pro con CPU 10-core e GPU 16‑core, 16GB RAM, 1TB SSD)
    amzn.to/3DHAKJn
    🎤 Rode NTG4+ Shotgun Microphone
    amzn.to/3S4pD1B
    📦📦📦📦📦📦📦📦📦📦📦📦📦📦📦
    00:00 Showing rotations.png
    00:22 Preparing html file
    01:28 Running live-server
    01:58 Coding tetris.js
    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
  • บันเทิง

ความคิดเห็น • 432

  • @ServetGulnaroglu
    @ServetGulnaroglu  2 ปีที่แล้ว +102

    You can visit servetg.com/tetris to play 🚀

    • @BocaElMasGrande7
      @BocaElMasGrande7 2 ปีที่แล้ว +1

      crack

    • @ujjawal_
      @ujjawal_ 2 ปีที่แล้ว +5

      Which keboard is it ?

    • @Danceyourlife12
      @Danceyourlife12 2 ปีที่แล้ว +1

      Sir your keyboard is beautiful price

    • @Satishkumar22810
      @Satishkumar22810 2 ปีที่แล้ว

      Bro how you do this fast typing

    • @viroxxx
      @viroxxx 2 ปีที่แล้ว +1

      @@BocaElMasGrande7 Los copia de una fuente escrita que está viendo. Tiene un proyecto de una dona girando escrito en C, pero es el mismo proyecto de otro TH-camr que lo publicó hace 2 años a este video. Esta persona sólo está presumiendo proyectos que copia de otros.

  • @Cyberfoxxy
    @Cyberfoxxy 2 ปีที่แล้ว +632

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

    • @marcyanus1430
      @marcyanus1430 2 ปีที่แล้ว +32

      In Vim on top of it.

    • @kodiak809
      @kodiak809 2 ปีที่แล้ว +25

      idk how did he memorize every inch of it's algorithm and logic, it took me 4days and a hundred google search

    • @marcyanus1430
      @marcyanus1430 2 ปีที่แล้ว +100

      @@kodiak809 i think he did the 4 days and google searches before the time, and then what we're viewing is probably take 27 where follows a script and storyboard.

    • @USELESSFACTSDAILYDAY
      @USELESSFACTSDAILYDAY 2 ปีที่แล้ว +74

      Maybe he is a legendary programmer who answers every question on stack overflow

    • @carlosdorado7577
      @carlosdorado7577 2 ปีที่แล้ว +2

      and make it with vim!

  • @spencerclarke4017
    @spencerclarke4017 2 ปีที่แล้ว +10

    Lovely Vim setup! Thank you! :D

  • @muffinman8629
    @muffinman8629 2 ปีที่แล้ว +189

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

    • @hey_james
      @hey_james ปีที่แล้ว +15

      Come on, a dev with 10 years experience. You must be able to sniff bullshit by now, it’s actually a big part of the job when it comes to code reviews🤪

    • @paladin9876
      @paladin9876 ปีที่แล้ว +9

      @@hey_james thats because bro is probably lying about being a dev for 10 years

    • @peaceanquiet4528
      @peaceanquiet4528 ปีที่แล้ว +11

      @@paladin9876 no, no senior devs are just jr devs with a better title.

    • @ezrakornfeld8436
      @ezrakornfeld8436 ปีที่แล้ว +21

      This isn’t real time development. He probably has a second monitor that he cross references. That’s probably the pauses every couple of seconds. No doubt he worked hard to make it but he’s copying it down for a satisfying asmr programming vid

    • @Scottx125Productions
      @Scottx125Productions ปีที่แล้ว +2

      @@ezrakornfeld8436 Very true. He probably made this project already over several days and then made references. Never trust how fast people "code" on youtube. In reality it's often far slower and more about looking up why something isn't working lol.

  • @fatmaallen3508
    @fatmaallen3508 2 ปีที่แล้ว +9

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

  • @berkserbest725
    @berkserbest725 2 ปีที่แล้ว +2

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

  • @shalombentenzingnamchyo9384
    @shalombentenzingnamchyo9384 ปีที่แล้ว +4

    Wow videos like this are uniquely inspiring.

  • @etodemerzel2627
    @etodemerzel2627 2 ปีที่แล้ว +8

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

  • @LouzGamez
    @LouzGamez ปีที่แล้ว +2

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

  • @aimranehd
    @aimranehd 2 ปีที่แล้ว +14

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

    • @Ikram-Hussain
      @Ikram-Hussain 2 ปีที่แล้ว +1

      hey do you know which theme he used ?

    • @Ikram-Hussain
      @Ikram-Hussain 2 ปีที่แล้ว

      hei do you know which theme he used?

  • @JoshisJoshisJosh
    @JoshisJoshisJosh ปีที่แล้ว +2

    Didn't know i needed this in my life

  • @lamszehang
    @lamszehang 2 ปีที่แล้ว +10

    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!

  • @cagataykaydr3015
    @cagataykaydr3015 ปีที่แล้ว +2

    Nice work mate!

  • @lufsss_
    @lufsss_ 2 ปีที่แล้ว +203

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

  • @JackOfAllRAIDs
    @JackOfAllRAIDs ปีที่แล้ว +1

    That was fun to watch. Now to add levels.

  • @yyx1990910
    @yyx1990910 5 หลายเดือนก่อน

    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.

  • @Demi.1133
    @Demi.1133 2 ปีที่แล้ว +5

    This man must’ve been born programming

  • @TinyMaths
    @TinyMaths ปีที่แล้ว +5

    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!

  • @jackietf2
    @jackietf2 ปีที่แล้ว +1

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

  • @georga.9236
    @georga.9236 2 ปีที่แล้ว +1

    This is sooooooooo cool!

  • @Maxthelord-il1qf
    @Maxthelord-il1qf ปีที่แล้ว

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

  • @extremoleste8310
    @extremoleste8310 2 ปีที่แล้ว +3

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

  • @ciscornBIG
    @ciscornBIG ปีที่แล้ว +8

    I just want everyone to know that this is some one who has practiced and studied not just this one thing he is doing but much coding in general. He did not sit down and just pour all this out straight from his fingertips. He made this before and knows the process to do it. Again, this is not just sitting down and letting the code flow out. No one does that.

    • @vaibhavnayak3416
      @vaibhavnayak3416 ปีที่แล้ว +1

      yeah.
      He takes at least 1-2 weeks to create these types of videos and then he writes down the code. He solves bugs and then he records tutorial videos.

    • @ciscornBIG
      @ciscornBIG ปีที่แล้ว +2

      @@vaibhavnayak3416 Amazing to watch regardless but I wanted people to know so they don't get discouraged. If anything, his videos are reason to work even harder; would it not be wonderful to be at that level? I wish everyone the best.

  • @SunCheeez
    @SunCheeez ปีที่แล้ว

    Sorry, what tool do you use to measure the height and width of the image (or hotkey) in macos? Thanks

  • @maddymuhat8079
    @maddymuhat8079 ปีที่แล้ว +1

    very relaxing

  • @snehel1586
    @snehel1586 ปีที่แล้ว

    i m more impressed with this guy's VIM skills

  • @eidnoxon
    @eidnoxon 2 ปีที่แล้ว +3

    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

  • @qbit963
    @qbit963 ปีที่แล้ว

    What's your programming environment specifications? Which OS , which theme how did you configure?

  • @JillianLatorreTS
    @JillianLatorreTS 2 ปีที่แล้ว +1

    What switches does your keyboard have? Mine has the MX blue.

  • @antytoto
    @antytoto 2 ปีที่แล้ว +11

    Hello, and where can I see your VIM settings for working with JS?

    • @Ikram-Hussain
      @Ikram-Hussain 2 ปีที่แล้ว

      hey do you know which theme he used ?

    • @Son0fBeelzebub
      @Son0fBeelzebub 2 ปีที่แล้ว

      mozhesh zabit, u nego nikakoy config maximum bufferline something else and CoC tsserver, esli hochesh normalni cfg, to tebe chris machine, devaslife, devonduty.

  • @finthefail9599
    @finthefail9599 2 ปีที่แล้ว

    i like this guy because he doesnt fucking talk when typing.

  • @goodname9371
    @goodname9371 2 ปีที่แล้ว +8

    Just started learning JavaScript and seeing all this is just crazy lol

    • @MrIrty
      @MrIrty 2 ปีที่แล้ว

      Saaaaameee

  • @MarcoPOV
    @MarcoPOV 2 ปีที่แล้ว +1

    do you like that keyboard? i bought it 2 weeks ago and iam returning it because i feel alot weak the switches

  • @xrify9407
    @xrify9407 ปีที่แล้ว +1

    how did you get your vim to look like that?

  • @turkdilkurumu8362
    @turkdilkurumu8362 2 ปีที่แล้ว +1

    Dude. This guy is gigachad.

  • @codingasmr
    @codingasmr ปีที่แล้ว +1

    Perfect bro 👌

  •  2 ปีที่แล้ว +4

    Elinize sağlık 💯

  • @lionelmessi2738
    @lionelmessi2738 ปีที่แล้ว +1

    Adam tam bir sanatçı ya

  • @exportdefaultapp
    @exportdefaultapp ปีที่แล้ว

    Nice video!

  • @aydinqulubeyli2283
    @aydinqulubeyli2283 2 ปีที่แล้ว

    Merhaba Servet screen hangi programla kayd ediyorsun?

  • @allgameplay4188
    @allgameplay4188 2 ปีที่แล้ว

    this amazing

  • @augusto_serrano
    @augusto_serrano ปีที่แล้ว

    Works well!! DANKEEE

  • @eguchiyuuki
    @eguchiyuuki ปีที่แล้ว

    Great!!

  • @moogleking
    @moogleking 2 ปีที่แล้ว

    Love tetris

  • @togit4895
    @togit4895 2 ปีที่แล้ว

    Hello Servet, i was wondering can you give a little information about your mac pc?

  • @jv_en_py3667
    @jv_en_py3667 2 ปีที่แล้ว +1

    What theme are you using?

  • @muratmavzer8435
    @muratmavzer8435 ปีที่แล้ว +1

    Merhabalar Servet Hocam, vim konfigurasyonunu paylaşırsan ya da bununla ilgili bir video gelirse mükemmel olacak :D

  • @KAC3228
    @KAC3228 ปีที่แล้ว

    良い音

  • @gudfishpoop3188
    @gudfishpoop3188 5 หลายเดือนก่อน

    what do u use for your terminal to look like this?

  • @philipmarino6841
    @philipmarino6841 ปีที่แล้ว

    I know this is an old video but how do you make vim look like that??

  • @peterkilian9100
    @peterkilian9100 ปีที่แล้ว

    Where can I find your vim configuration? Haha it looks really nice…

  • @Fab50534
    @Fab50534 2 ปีที่แล้ว

    Gooood

  • @asmustun
    @asmustun 2 ปีที่แล้ว +10

    hocam klavyeniz çok güzel görünüyor. modeli nedir?
    Birde sadece dinleyince çok rahatlatıcı bir video olmuş :D

    • @Ikram-Hussain
      @Ikram-Hussain 2 ปีที่แล้ว

      hey do you know which theme he used ?

    • @BARMEEEN
      @BARMEEEN 2 ปีที่แล้ว

      Keyboard: Epomaker gk68

    • @GokdenizYilmaz-m4t
      @GokdenizYilmaz-m4t 2 ปีที่แล้ว

      Arkadaş epomaker gk68 olduğunu söylemiş

  • @illzn9187
    @illzn9187 ปีที่แล้ว

    im new to code , isnt c++ better for game ? or at least python ? so why html ?

  • @WEBSTART-LIVE
    @WEBSTART-LIVE ปีที่แล้ว +1

    это просто чудесно!

  • @JereFreestyle
    @JereFreestyle 2 ปีที่แล้ว

    man, love that keyboard from where is it??, it looks like that is done it especificly for programmers, I'm frontend junior that's the reason hhahaha.
    🤓

  • @XDShowOriginal
    @XDShowOriginal 2 ปีที่แล้ว +6

    mis respetos saludos!!

    • @Ikram-Hussain
      @Ikram-Hussain 2 ปีที่แล้ว

      hey do you know which theme he used ?

  • @alcidesgomez9542
    @alcidesgomez9542 2 ปีที่แล้ว

    Where do you find those fun looking coding projects?

  • @andresgodoy7940
    @andresgodoy7940 2 ปีที่แล้ว

    what is your text editor in this video?

  • @vudinhhan
    @vudinhhan 2 ปีที่แล้ว

    I like this keyboard you using, what name of the keyboard ?

  • @outtabubblegum7034
    @outtabubblegum7034 ปีที่แล้ว

    Try swapping Escape and CapsLock keys, and activate the "relative line number".
    You wont believe how much better it is.

    • @valovanonym
      @valovanonym ปีที่แล้ว

      Switching escape and caps lock is a great tip, thanks a lot. Vscode user but I ocasionally use vim and it's enjoyable except that switching modes can be tedious

  • @_P1RO_
    @_P1RO_ 2 ปีที่แล้ว

    How did you solve the problem at 1.06.24

  • @B-humbleEntertainment
    @B-humbleEntertainment ปีที่แล้ว

    The software you use make code?

  • @user-gi5et6ij3b
    @user-gi5et6ij3b ปีที่แล้ว

    what is terminal theme that you’re using?

  • @westlle
    @westlle 2 ปีที่แล้ว

    what program do you program with?

  • @oooexist
    @oooexist 2 ปีที่แล้ว

    You are new! favorite.

  • @matemaduren4210
    @matemaduren4210 2 ปีที่แล้ว

    Cool

  • @fcosta2805
    @fcosta2805 2 ปีที่แล้ว

    good video and good game

  • @tikva4ka
    @tikva4ka ปีที่แล้ว

    What are these programs, sublime text?

  • @allstackdeveloper6359
    @allstackdeveloper6359 ปีที่แล้ว

    So cool😎

  • @spededrokay6882
    @spededrokay6882 ปีที่แล้ว

    what theme are you using?

  • @alierenerdogan6005
    @alierenerdogan6005 2 ปีที่แล้ว

    dude which program are you using in macbook

  • @CarlosCruz-kv5ok
    @CarlosCruz-kv5ok 2 ปีที่แล้ว

    What's the font you're using?

  • @yeraymoralesdiaz8122
    @yeraymoralesdiaz8122 2 ปีที่แล้ว

    Which is the program that you use?

  • @JohanLeon__
    @JohanLeon__ 2 ปีที่แล้ว

    hey how do you program so much and not have pain in your wrists :c, can you make a video about it? 😥

  • @arrays5048
    @arrays5048 2 ปีที่แล้ว

    what os are you using?

  • @Ebruinus123
    @Ebruinus123 2 ปีที่แล้ว

    What kinda keyboard do you use?

  • @alaincorona1597
    @alaincorona1597 ปีที่แล้ว

    great, would you let me use it for a school project??

  • @omoefn3274
    @omoefn3274 2 ปีที่แล้ว

    what kind of keyboard do u use

  • @yummysoup
    @yummysoup ปีที่แล้ว

    Did you code this on your own on your first try or you did refer some article or book ?

  • @shkimberdaulet5085
    @shkimberdaulet5085 ปีที่แล้ว

    Woow this is soo cool You write Code Gooding Iam Wanted To Become how you

  • @sxge1995
    @sxge1995 ปีที่แล้ว

    Which keyboard is this? Pls answer

  • @TheKir3z
    @TheKir3z 2 ปีที่แล้ว

    What keyboard do you use ?

  • @Florck
    @Florck 10 หลายเดือนก่อน

    Alguem pode me dizer qual tipo de programação ele esta usando ?

  • @KydraExhale
    @KydraExhale 2 ปีที่แล้ว

    what IED did you use

  • @ywmr2966
    @ywmr2966 2 ปีที่แล้ว

    abi,what is the keyboard model?

  • @user-oo8sl3gl2j
    @user-oo8sl3gl2j 2 ปีที่แล้ว +1

    How name your console?

  • @whatszeus1776
    @whatszeus1776 4 หลายเดือนก่อน

    Can’t you program this all with chatgpt?

  • @맹꽁2
    @맹꽁2 2 ปีที่แล้ว +1

    무슨 키보드 쓰시나요?

  • @titou480
    @titou480 2 ปีที่แล้ว

    Hi, just a little question, can u give the references of ur keyboard (bc I suppose it is a custom keyboard)?

    • @vision2080
      @vision2080 2 ปีที่แล้ว

      It is a keychron, not sure what switches. Not blue. Maybe red or brown.

    • @titou480
      @titou480 2 ปีที่แล้ว

      @@vision2080 ty I will check this :)

  • @gonzalogonzalez9568
    @gonzalogonzalez9568 2 ปีที่แล้ว

    what mouse are you using?

  • @zomatic7279
    @zomatic7279 2 ปีที่แล้ว

    What do you use to code

  • @rooWG
    @rooWG ปีที่แล้ว

    which IDE are you using

  • @iabarz
    @iabarz 2 ปีที่แล้ว

    What is the keyboard model?

  • @lambraider4175
    @lambraider4175 2 ปีที่แล้ว

    What did u actually use for coding and making game?

  • @danielalves-hs6jl
    @danielalves-hs6jl 2 ปีที่แล้ว

    whats the name of your keybord?

  • @DavydGR01
    @DavydGR01 2 ปีที่แล้ว +17

    Hello, I love how program. One question, what keyboard do you use?

    • @finthefail9599
      @finthefail9599 2 ปีที่แล้ว +2

      keychron or something

    • @justacookie
      @justacookie 2 ปีที่แล้ว +2

      EPOMAKER GK68X/GK68XS

    • @mgreek31
      @mgreek31 2 ปีที่แล้ว

      Definitely a Keychron Series

    • @GamesXtremeBr
      @GamesXtremeBr 2 ปีที่แล้ว +6

      It's an Epomaker SK64. The single red delete button and esc, and the arrow keys are characteristics of this model.

    • @DavydGR01
      @DavydGR01 2 ปีที่แล้ว

      Thanks bro

  • @CoolNoval
    @CoolNoval 2 ปีที่แล้ว

    which mac are you using

  • @bluetypie4269
    @bluetypie4269 2 ปีที่แล้ว

    hi! what ide does u use?

  • @heribertofernandez119
    @heribertofernandez119 2 ปีที่แล้ว

    what is brand of your keyboard