JavaScript Fighting Game Tutorial

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

КОМЕНТАРІ • 34

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

    Kaboom.js has a discord server where people using Kaboom ask questions, share their projects, share plugins they made and even contribute code to the Kaboom github repo.
    I really recommend joining if you can. Here's the invite link : discord.com/invite/aQ6RuQm3TF

  • @pietraderdetective8953
    @pietraderdetective8953 Рік тому +4

    This seems a lot simpler compared to Chris' tutorial...well Chris didn't use any game engine did he? Just pure HTML+JS ?
    Your Kaboom tutorials are awesome Sir!

    • @JSLegendDev
      @JSLegendDev  Рік тому

      Yeah he simply used the canvas API so no libraries.
      Thanks :)

  • @hiraeth_mma
    @hiraeth_mma 11 місяців тому +1

    Hello, this video was really helpful for me but i didn't understand some things here in 26:32. Why did you use id after strings and can you please tell me about how slashX and other stuff work properly please?

    • @JSLegendDev
      @JSLegendDev  11 місяців тому

      Hi!
      We use the id param to determine what sprite we need depending on the player. So for player 1, id = "player1" and for player 2 id = "player2".
      Looking at the way we import sprites in our project, you can see that we set sprite names like "attack-player1" and "attack-player2".
      We get the needed sprite later in our code by simply doing "attack-" + id which will give you "attack-player1" if id = "player1" or "attack-player2" if id ="player2".
      slashX and slashY are the coordinates of the hitbox that represents the sword attack. When a player attacks we create a hitbox with position (x = slashX, y = slashY). If that hitbox overlaps with the other player we can determine that the attack was successful and the other player will take damage.

    • @hiraeth_mma
      @hiraeth_mma 11 місяців тому

      ​@@JSLegendDev You didn't explained what does the easings.easeOutSine does in 58:50 to what does it exactly does?

    • @JSLegendDev
      @JSLegendDev  11 місяців тому

      @@hiraeth_mma I think this example from the kaboom playground will make things clearer : kaboomjs.com/play?example=tween (Try it out on a computer)

  • @anwaarullah2730
    @anwaarullah2730 Рік тому +3

    thanks

  • @pawekozowski6128
    @pawekozowski6128 Рік тому +2

    THANK YOU SO MUCH FOR YOUR WORK!

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

      No problem! Thanks for watching!

  • @Altazas
    @Altazas 3 місяці тому

    how to make kaboom use full screen ? plz

    • @JSLegendDev
      @JSLegendDev  3 місяці тому +1

      // toggle fullscreen mode when "f" key is pressed
      onKeyPress("f", (c) => {
      setFullscreen(!isFullscreen())
      })

    • @Altazas
      @Altazas 3 місяці тому

      ​​@@JSLegendDevnow its all blue saying this
      ReferenceError
      OneKeyPress is not defined
      ?😅

    • @Altazas
      @Altazas 3 місяці тому

      ​@@JSLegendDevmy mistake sorry
      But nothing changed

    • @JSLegendDev
      @JSLegendDev  3 місяці тому +1

      @@Altazas It's onKeyPress not OneKeyPress

    • @Altazas
      @Altazas 3 місяці тому

      ​@@JSLegendDevnothing changed

  • @laerningbetter4654
    @laerningbetter4654 Рік тому +2

    This video is very useful.❤

  • @damus6665
    @damus6665 Рік тому +2

    Nice good job!

  • @WitchDimension
    @WitchDimension 9 місяців тому

    Kinda weird to call it inspired, its literally the exact same game. Its so so weirdhow people who code just copy eachother, you even see it in "triple a gaming" Yall make it seem like making games takes 20 years per game or something.

    • @JSLegendDev
      @JSLegendDev  9 місяців тому +3

      Yeah the game is the same but the code is 100% original. So I got inspired by Chris courses to make the same game but with a different approach (using the Kaboom.js library rather than no libraries) and do it as a tutorial.

    • @WitchDimension
      @WitchDimension 9 місяців тому

      @@JSLegendDev well if you climb up a ladder, or you climb down a ladder, you are still just climbing a ladder. It's a huge waste of your time to make something people have already seen and experienced. Especially when what your making has to be visually interesting. To me it just looks like you could of built something you actually wanted to make. Something people could of even tried to invest in. I don't know if you realize it, but your basically doing what every game design team does when they say inspired by fortnite, inspired by monster hunter. Then its just a clone of some dog sht.

    • @JSLegendDev
      @JSLegendDev  9 місяців тому +5

      @@WitchDimensionYou would be 100% right if this project was for gamers.
      However, the target audience for a game programming tutorial are game developers.
      They are interested in learning how the tools to make games work. The "how" (JavaScript + Kaboom.js) in this context is more important than the originality of the final product.
      Originality isn't as important here since other developers will use this tutorial as a stepping stone to make their own original projects.
      It's up to them to make sure that their projects stands out in the market rather than rehashing what came before.
      Do you see what I'm trying to get at?

    • @WitchDimension
      @WitchDimension 9 місяців тому

      @@JSLegendDev Of course its for educational purposes, this is not a school board with a curriculum though. You can add to it instead of doing the exact same thing. Just seems like a big waste of time to me. You coulda copied all the code, then edited in your febale contribution to the design of what's already made. But game devs fail to do that and most the games they copy have been in existence for more than 20 years now .🤷I don't understand how people learn a whole language designed around designing things, and also lack creativity. Crazy world we live in. Like battle royales are just free for all death match with a bigger map, and you have to pick up weapons. Its wild how little anything ever gets done in the tech field, baffling.

    • @JSLegendDev
      @JSLegendDev  9 місяців тому +2

      @@WitchDimensionThis tutorial was released a year ago, I have made more original stuff since. Curious how you discovered it?

  • @roodyridar2706
    @roodyridar2706 2 місяці тому

    You are the best 🤍