Build a Dev Portfolio as a 2D Game - JavaScript Tutorial

Поделиться
HTML-код
  • Опубликовано: 14 янв 2025

Комментарии • 43

  • @JSLegendDev
    @JSLegendDev  10 месяцев назад

    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

  • @watchagoblin
    @watchagoblin 9 месяцев назад +2

    Heya, super cool project! This gotta be the most fully-fledged "game-as-portfolio" implementations I've seen yet.
    Thanks for featuring monogram in this! It's always cool seeing the kind of stuff this little font of mine winds up getting used for. Cheers!

    • @JSLegendDev
      @JSLegendDev  9 месяцев назад +1

      Thanks! Your font is awesome :)

    • @watchagoblin
      @watchagoblin 9 месяцев назад +1

      ​@@JSLegendDevThank you! Don't know if you caught that already, but I've recently pushed an update for it with support for italics, if you wanna check that out 🙂

  • @retro_boy_advance
    @retro_boy_advance 10 месяцев назад +1

    Loving this! I'm stealing your idea

  • @anamspe
    @anamspe 8 месяцев назад +2

    Thank you for the great content! I'm still learning web development and trying to master JS, but as an avid gamer, I wanted to dabble a bit into game development and this hits the spot since I don't have to go as far as learning a completely different language.

    • @JSLegendDev
      @JSLegendDev  8 месяцев назад +1

      Glad you liked the content! I also wanted to try gamedev but decided to just do it in JS since I didn't want learn a game engine (godot, unity, unreal) + new languages while I wasn't even sure if gamedev would click with me.

    • @anamspe
      @anamspe 8 месяцев назад +1

      @@JSLegendDev Is there a specific reason you chose Kaboom? I've heard of Phaser but haven't tried it yet. Good luck on your future games and I'm looking forward to more content like this :)

    • @JSLegendDev
      @JSLegendDev  8 месяцев назад +1

      @@anamspe I think Kaboom is easier and faster to work with than Phaser.

  • @pldvs
    @pldvs 10 месяцев назад +2

    That webpage brought me here. Pretty cool.

  • @AndrewWooldridge
    @AndrewWooldridge 9 месяцев назад +2

    Thanks so much for this!

  • @the_rings_of_saturn
    @the_rings_of_saturn 9 месяцев назад +2

    This is a lovely idea for a portfolio. I’d like to see more games made with JavaScript. There aren’t many JavaScript game projects on RUclips. Most of them are in Unity, or other game engines. This is a niche area, and I’m sure your channel will grow.

    • @JSLegendDev
      @JSLegendDev  9 месяцев назад +2

      Thanks for the encouragement! Nice to see you here. I know that you made a 3D web developer portfolio which was featured on JSMastery, am I right? Great work!
      I think JavaScript is definitely underrated for game development. It's why I started making tutorials on RUclips for it.

    • @the_rings_of_saturn
      @the_rings_of_saturn 9 месяцев назад +1

      @@JSLegendDev I'm pleasantly surprised that you recognized me! 🙂You're right-I did create that project. Thank you for acknowledging it; I truly appreciate your support.
      Your project on JavaScript games is fantastic, and I encourage you to keep exploring this area for tutorials. In fact, I've been considering something similar myself, but in 3D using Three.js and React Three Fiber. Maybe you already know them, but to get some inspiration, I highly recommend checking out @SimonDev and @ChrisCourses, who offers some excellent videos on the subject. I'll definitely be following your RUclips videos with pleasure. Keep up the fantastic work!

  • @jgvlc
    @jgvlc 10 месяцев назад +1

    Thanks for share!

  • @gsdealer7691
    @gsdealer7691 10 месяцев назад +1

    Thanks master

  • @TYNEPUNK
    @TYNEPUNK 10 месяцев назад +1

    really cool! whats that word u said "caboom jazz?" js lib.. gives me ideas of a unity3d webgl portfolio.

    • @JSLegendDev
      @JSLegendDev  10 месяцев назад

      Thanks! Kaboom.js it's the name of the library I'm using to make this project. On my channel, I have a whole playlist with tutorials using it.

    • @TYNEPUNK
      @TYNEPUNK 10 месяцев назад +1

      @@JSLegendDev awesome thanks! ive always dreamed of a cool portfolio like this instead of a ton of text. Especially useful for game job applications. Been messing with JS this week im learning Blazor and sometimes JS can help solve things nicely.

    • @TYNEPUNK
      @TYNEPUNK 10 месяцев назад

      @@JSLegendDevsubbed :)

  • @Mediamatix
    @Mediamatix 10 месяцев назад +1

    ! love this! :D

  • @jordimantilla5218
    @jordimantilla5218 10 месяцев назад +1

    Hey bro! nice vid, but why you save your resume on a repo? ist it better on a drive? Cheers mate!

    • @JSLegendDev
      @JSLegendDev  10 месяцев назад

      Thanks! Yeah it would be better on a drive and then you use the link. I used GitHub here just because it was quicker than creating a new google drive account for my RUclips channel.

    • @jordimantilla5218
      @jordimantilla5218 10 месяцев назад

      @@JSLegendDev That's actually pretty original, congrats

  • @hionlyenglish
    @hionlyenglish 8 месяцев назад +1

    It won't let me upload it brother to my git hub

    • @JSLegendDev
      @JSLegendDev  8 месяцев назад

      Recently added a small guide explaining how to deploy the project. You can check it out here : github.com/JSLegendDev/2d-portfolio-kaboom/blob/master/HOW_TO_DEPLOY.MD

  • @김잔별-w2h
    @김잔별-w2h 8 месяцев назад

    Super cool! If I want to make my portfolio like this as pokemon-style, what do you recommend between kaboom and p5? since I saw your video making pokemon-style webpage with p5.js

    • @JSLegendDev
      @JSLegendDev  8 месяцев назад +1

      Kaboom is easier but with p5 you have more control but it takes more time. It's up to you really.

    • @김잔별-w2h
      @김잔별-w2h 8 месяцев назад

      @@JSLegendDev Thanks a million!

  • @willesalo8930
    @willesalo8930 10 месяцев назад

    Awesome tutorial! How do i publish it to my domain? Or to github like you did?

    • @JSLegendDev
      @JSLegendDev  10 месяцев назад +2

      Thanks!
      The easiest way is to run the command "npm run build". Then, you'll see a dist folder appear. Now you can either go on github and create a new repo and upload the files within the dist folder. You can then activate github pages for your repo.
      The other option is to just drag and drop your dist folder into a service like netlify and they will deploy your site. I doesn't have to be netlify you can host your site anywhere else.

  • @JOELJACOBEMMANUELJOELJACOBEMMA
    @JOELJACOBEMMANUELJOELJACOBEMMA 6 месяцев назад

    dude i just checked out your whole channel. its actually wild how much information you bring to the world. keep it up dude youer awesome

  • @Ibrahim-zb2ou
    @Ibrahim-zb2ou 10 месяцев назад

    fantastic bro! Nice Work
    i also start learning js two days back!
    any Tips!

    • @JSLegendDev
      @JSLegendDev  10 месяцев назад +1

      Thanks! My tip is to stick with one learning resource instead of using many until you can use js independently.

  • @Rillean
    @Rillean 9 месяцев назад

    Thanks for this! I think it is a great way to show off your portfolio. I am having an issue where once my sprite interacts with an object and the dialoge box pops up, I can close it but then he won't move again. Almost like it never reset the isInDialogue variable. When I enter debug on the screen I also see an error: "Unchecked runtime.lastError: The message port closed before a response was received." Not sure if it is related.

    • @JSLegendDev
      @JSLegendDev  9 месяцев назад

      Thanks! Can you try console.logging the isInDialogue variable when you close the dialogue box? You'll be able to better diagnose the issue.
      Btw don't hesitate to compare your code with mine (repo is linked in the description of the video)

  • @ادخلوهابسلام-ي1ص
    @ادخلوهابسلام-ي1ص 8 месяцев назад

    Is kapoom the best JavaScript library for making games ?

    • @JSLegendDev
      @JSLegendDev  8 месяцев назад

      In terms of performance, no but it's the one of the easiest library to learn and you can get things done faster than in other libraries.

    • @ادخلوهابسلام-ي1ص
      @ادخلوهابسلام-ي1ص 8 месяцев назад

      Thank you for that info

  • @darksideeditions4251
    @darksideeditions4251 10 месяцев назад +1

    Nice!

  • @merc.5802
    @merc.5802 8 месяцев назад

    Hey JSLegendDev, I wanted to learn game dev as a hobby to grow my programming skills, forgive me if this is a naive question but would developing games in kaboom increase my programming skills? (Currently I've been feeling more like an imposter, that I am not very good at programming, I'd like to change that) Keep these tutorials coming, we love them!

    • @JSLegendDev
      @JSLegendDev  8 месяцев назад

      Hey! Yeah definitely. Since Kaboom is a library rather than an engine, you get plenty of opportunities to improve you coding skills in JavaScript.
      It's up to you to decide how you structure your codebase which means you'll have to make your own decisions regarding the way you structure your code and design the software.