Simple JavaScript Game Dev Project

Поділитися
Вставка
  • Опубліковано 12 лис 2024

КОМЕНТАРІ • 80

  • @garikmelqonyan6011
    @garikmelqonyan6011 7 місяців тому

    Bro, your tutorials are hands down the best on UA-cam! Thank you so much for sharing such valuable content. Your efforts are truly appreciated. Keep up the fantastic work, and may you be blessed abundantly!

  • @munner7
    @munner7 2 роки тому

    It’s incredible I can follow along on a tutorial everyone gets and break the thing before the first console log

  • @miguelgx6883
    @miguelgx6883 3 роки тому +3

    bro yesterday, I presented a video game made by me as a final project of a bootcamp, your video would have helped me a lot a week before:'D

    • @munner7
      @munner7 2 роки тому

      Do you know how to use some static images in a game like this?

  • @josephwong2832
    @josephwong2832 3 роки тому +6

    damn... Kyle is a legit JS ninja these days :)

  • @lifelinese
    @lifelinese 3 роки тому +2

    you language is very cleaner that i understand easily. thank you from Bangladesh

  • @saifgehlot007
    @saifgehlot007 Рік тому +1

    this man kyle not only a web dev he is also a game dev damn too flawless at coding

  • @dpfivem5127
    @dpfivem5127 3 роки тому +3

    I've always wondered, did you create the riff in your intro yourself seeing as theres nearly always a guitar in your videos? lol Enjoying your content - as the name suggests, you simplify everything and then highlights it's relevance with multiple practical examples!

  • @Gers217
    @Gers217 3 роки тому +22

    Average Js fan: uses the canvas api
    Average Js enjoyer: uses vanilla Js and css

    • @vyas1
      @vyas1 3 роки тому +2

      Canvas api is for chumps

    • @awekeningbro1207
      @awekeningbro1207 3 роки тому

      Canvas is good performance wise.

  • @michelem.2664
    @michelem.2664 3 роки тому +5

    Why you use data attributes instead of id?

  • @vsantet42
    @vsantet42 3 роки тому +1

    You don't need to test collision over all pipes, just checking for the left most pipe is sufficient

    • @Ree-rr1js
      @Ree-rr1js 3 роки тому

      I like your last name

  • @SLRModShop
    @SLRModShop 3 роки тому +24

    Wrong title, it should read "How to recreate a multi-millions dollar idea in 40 minutes" ^-^

  • @Ravisingh21able
    @Ravisingh21able 3 роки тому +2

    Things are easy with position: absolute, but makes it fixed to certain screen size.
    And also setInterval has its own uses, certainly not good for this context but it has its uses where you want it to execute only after certain time limit Repeatedly, not at exact time but atleast after the given time.

    • @nomeacaso6944
      @nomeacaso6944 3 роки тому

      actually I think in this case wouldn't be that bad to use,It would even allow a certain customization of the game,in fact using the setInteval you could run the gameLoop based on a frameRate variable you could establish

  • @sagejpc1175
    @sagejpc1175 3 роки тому +2

    Needed a project for an app I'm building with my team.
    Think I found it!

  • @Adjust91
    @Adjust91 3 роки тому +1

    I have to ask, I'm learning coding, and I'm struggling with JS. I've spent rooughly a year learning it but very much on and off. I spent most of my time just watching tutorials on how to code, rather than building... What would you advise is the best thing to do now to get proficient with JS so I can start building for a position as a dev? I was thinking if I spend a week or 2 following along with build-alongs, then I try and build my own projects after that, as I need a kickstart to get me back into it.

  • @GermanEmmanuel
    @GermanEmmanuel 3 роки тому

    Me: yeah another easy Flappy Bird Tutorial
    *20 minutes later*
    * various functions with complex calculations that I didn't know could be performed for divs
    😱🤯

  • @scottborrowman
    @scottborrowman 3 роки тому +6

    Question for you. I've noticed you and a few other developers that target elements in javascript using data attributes. Is this a performance thing or a personal preference thing?

    • @oliverhughes169
      @oliverhughes169 3 роки тому +2

      Yeah, in this project I would have used an id for title and subtitle, and then referenced this ID when setting styles in CSS and retrieving the elements in JS.
      However, imagine a more complex app, with many HTML elements and many class names. You might start to have naming collisions between your class names for styling, and class names you use to select the elements in JS. By using a data attribute, you can separate these concerns and you can use classes purely for CSS selectors.

    • @scottborrowman
      @scottborrowman 3 роки тому

      @@oliverhughes169 How is that any different than using a class name purely for a JS function, though? Which is why my question is asking if it helps with performance or if it's purely just personal preference.

    • @oliverhughes169
      @oliverhughes169 3 роки тому

      @@scottborrowman If you're using libraries like Tailwind, or using a BEM naming convenion, it could become cumbersome to know which classes are for styling, and which for selectors in JS.
      This is the difference I'm trying to highlight in the original comment. There are probably otherst hat I am not aware of.
      As per performance, I don't think there is a difference.

  • @bvfromruvitaliy
    @bvfromruvitaliy 2 роки тому

    Great stuff!

  • @TheVideogamemaster9
    @TheVideogamemaster9 3 роки тому

    20:50 I noticed you didn't put a "remove event listener" before adding the listener in the handleLose function. Does the one in handleStart account for that?

    • @oliverhughes169
      @oliverhughes169 3 роки тому

      This event listener will only invoke the callback once (notice 'once' is 'true'). This negates the need to remove the event listener later, since it will only fire once and never again.

    • @TheVideogamemaster9
      @TheVideogamemaster9 3 роки тому +1

      @@oliverhughes169 Ok cool, that makes sense. Thank you for your input :p

  • @aiiaznsk8er
    @aiiaznsk8er 3 роки тому

    nice tutorial, thanks for sharing.

  • @jsonslim
    @jsonslim 3 роки тому

    Hi Kyle, maybe some time you'll show us your Jackson guitar playing :)

  • @pythonandroidappdev3040
    @pythonandroidappdev3040 3 роки тому +2

    I Had Created This Myself IN 5 Minutes, I Am 4 year Experience Programmer. 😊 👍 ❤️

    • @beastboy..
      @beastboy.. 3 роки тому +2

      may be u use python

    • @juancamacho479
      @juancamacho479 3 роки тому +3

      congratulations!, now make a video about it!
      I can just say i made one in 5 minutes, ive been programming for 25 years

    • @beastboy..
      @beastboy.. 3 роки тому +2

      @@juancamacho479 😂😂😂😂

    • @genechristiansomoza4931
      @genechristiansomoza4931 3 роки тому +4

      I created this myself in 1 second, I am a gazillion years experience programmer 👍

    • @beastboy..
      @beastboy.. 3 роки тому +1

      @@genechristiansomoza4931 yes you are 😂

  • @abhishekkesharvani137
    @abhishekkesharvani137 2 роки тому

    i did not get the logic of timeSinceLastjump , anyone can can help?

  • @shrooobdude
    @shrooobdude 3 роки тому +17

    Would it not be much simpler to use canvas here? :D this is rly helpful though, have been using setInterval until now

  • @ceroy_ak
    @ceroy_ak 3 роки тому +1

    Can you please do a tutorial for RxJs and a practical useful project using the same

  • @canozkan8886
    @canozkan8886 3 роки тому +1

    wouldn't it be better to use the canvas API instead of css?

  • @chantalooney6947
    @chantalooney6947 2 роки тому

    Im a beginner. how do i export the game and send to friends for them to play as well?

  • @marceloguzman646
    @marceloguzman646 3 роки тому

    real js king

  • @llubaka
    @llubaka 3 роки тому +2

    Good, but use semicolons. I am creeping when looking this code without semicolons :D

  • @munner7
    @munner7 2 роки тому

    How do I use my own images in a game like this?

  • @anarbekomurzakov8089
    @anarbekomurzakov8089 3 роки тому

    Hi!
    My pipes are invisible i did all codes right.
    any1 having same issue?

  • @chavdamahesh2772
    @chavdamahesh2772 3 роки тому +1

    Hello kyle,
    Will you please reach us how to send custom email like you send us using nodemailer or alternatively
    Using custom email ..
    I have custom email to domain i purchase but i don't know how to configure and use that ..
    I search everywhere on internet but very different to under the actual .
    Will you please simplified that for us it really help ..
    Thank you ..🔥🔥

  • @spiderman_atul
    @spiderman_atul 3 роки тому

    love you bro

  • @maheshmahi5455
    @maheshmahi5455 3 роки тому +1

    "Caution: content here is not for beginners or middle tier devs"

  • @pythonandroidappdev3040
    @pythonandroidappdev3040 3 роки тому +2

    I Am Creating A Instagram Clone Do You Want Video ON That. Please Comment. 😊 👍 ❤️

  • @rhujisiekajiri2269
    @rhujisiekajiri2269 3 роки тому

    createPipeSegment, can anyone please explain this method??

  • @codingninja01_
    @codingninja01_ 3 роки тому +2

    Amazing game 🎮 first comment and first like

  • @ban_droid
    @ban_droid 3 роки тому

    Please make tutorial on the sprite animation too

  • @mdhossen7082
    @mdhossen7082 2 роки тому

    Awesome Game

  • @SakthivelNadar
    @SakthivelNadar 3 роки тому +1

    Legends still looking for real meaning of "SIMPLE" in oxford book 📖

  • @convolutionalnn2582
    @convolutionalnn2582 3 роки тому

    Sir Can i do CSR + SSR in Angular in one project?

  • @daljeetsingh5127
    @daljeetsingh5127 2 роки тому

    great job man but it is littile confusing 😅

  • @luisgabrielcaetanodiniz3251
    @luisgabrielcaetanodiniz3251 3 роки тому

    I had actually made a clone myself and added a little bit more style o it, but UA-cam unfortunately won't let me post the Link to it 😭😭😭

  • @Wesley-Insley-Comedy
    @Wesley-Insley-Comedy 3 роки тому +1

    BIRDer-radius haha

  • @viswanathank2551
    @viswanathank2551 3 роки тому

    What i expected

  • @harag9
    @harag9 3 роки тому

    Why do you call your bird and pipe "classes" when you don't even use the class command to create a class?

    • @TokyoXtreme
      @TokyoXtreme 3 роки тому

      JS classes are just syntactic sugar, but it seems to be that modern JavaScript avoids classes (with the keyword) as much as possible. The React documentation even mentions this phenomenon.

    • @harag9
      @harag9 3 роки тому

      @@TokyoXtreme Ahh ok. thanks - I come from a C# background so find it very strange with JS.

    • @Ravisingh21able
      @Ravisingh21able 3 роки тому

      Every function you are calling and if it returns 'this' from inside of function. or you call var s = new myFunc();
      You are creating a class instance.

  • @hodaelfi1941
    @hodaelfi1941 3 роки тому +1

    slowly please

  • @TwoTeaTee
    @TwoTeaTee 3 роки тому

    1000 ms / 7 ms ~ 144 fps

  • @balajiravi9259
    @balajiravi9259 3 роки тому +5

    Sorry sir very difficult 😭😭 to understand

  • @alexander7431
    @alexander7431 3 роки тому +1

    UA-cam #RETURNDISLIKE

  • @beksultanomirzak9803
    @beksultanomirzak9803 3 роки тому +1

    first is me )

  • @pythonandroidappdev3040
    @pythonandroidappdev3040 3 роки тому +3

    This Game IS Lol 😂😂😂😂😂😂