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

Learn how to use Kaboom.js to create a 2d game that is actually a developer portfolio. This is a creative way to show off your skills.
Live demo: jslegenddev.github.io/portfolio/
Source code: github.com/JSLegendDev/2d-por...
Map files (map.json + map.png): github.com/JSLegendDev/2d-por...
Spritesheet: github.com/JSLegendDev/2d-por...
Fonts: datagoblin.itch.io/monogram
Tiled software: mapeditor.org
Substack post explaining how to implement mobile controls : jslegenddev.substack.com/p/ho...
Course developed by @JSLegendDev
⭐️ Contents ⭐️
⌨️ (0:00:00) Intro
⌨️ (0:03:35) Setup
⌨️ (0:16:40) Loading assets
⌨️ (0:19:36) How to use Tiled to draw maps
⌨️ (0:36:23) Writing logic to display map
⌨️ (0:45:02) Creating the player
⌨️ (0:52:13) Writing logic to display boundaries
⌨️ (0:58:07) Writing logic to display dialogue
⌨️ (1:16:28) Spawning the player + player movement logic
⌨️ (1:26:33) Writing logic for scaling the camera + animations + dialogue text
🎉 Thanks to our Champion and Sponsor supporters:
👾 davthecoder
👾 jedi-or-sith
👾 南宮千影
👾 Agustín Kussrow
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Justin Hual
👾 Otis Morgan
👾 Oscar Rahnama
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news

Пікірлер: 122

  • @JSLegendDev
    @JSLegendDev29 күн бұрын

    Hope you enjoyed my course! I have plenty of in-depth gamedev tutorials all in JavaScript/TypeScript. Head over to my channel if you're interested!

  • @alishxn

    @alishxn

    29 күн бұрын

    Amazing video loving the concept. You sir got got a new loyal subscriber 😃

  • @JSLegendDev

    @JSLegendDev

    29 күн бұрын

    @@alishxn Thanks :)

  • @LBCreateSpace

    @LBCreateSpace

    28 күн бұрын

    Thank you very much for making this! I love that you don’t rush through it and you explain things. Thanks again!

  • @JSLegendDev

    @JSLegendDev

    27 күн бұрын

    @@LBCreateSpace Glad you liked it!

  • @user-cs2py4wg3p

    @user-cs2py4wg3p

    27 күн бұрын

    thanks for the nice tutorial. Could this be deployed on github page?

  • @dhirajsuthar2607
    @dhirajsuthar260719 күн бұрын

    For people not familiarising with the 2D-portfolio is you can create a 'normal' portfolio that is good for recruiters and give a dialog or something that takes them inside this, incase they are interested in checking out something like this. Great video by JSLegendDev, loved this concept.

  • @JSLegendDev

    @JSLegendDev

    19 күн бұрын

    Thanks for watching!

  • @progwithpaul
    @progwithpaul29 күн бұрын

    But problem is here recruiters are quite lazy. They'll not even go through this :( and straight off reject the portfolio

  • @death135

    @death135

    29 күн бұрын

    Exactly

  • @JSLegendDev

    @JSLegendDev

    29 күн бұрын

    Feel free to adapt it so it becomes more convenient while maintaining originality. You could for example, implement quick navigation, etc... My tutorial is just meant as a starting base you can take it in any direction you want from there; or just use what you learned here to start making actual games ;) You could also make it as a personal site (your personal corner on the internet) rather than strictly a developer portfolio.

  • @user-ij8wb5bw3q

    @user-ij8wb5bw3q

    29 күн бұрын

    Exactly, most people at such jobs are tired and are just scanning through all CV’s as fast as they can.

  • @Firstborn0Raz

    @Firstborn0Raz

    29 күн бұрын

    Tell me about it. And they keep giving you the same response without fully explaining exactly why they chose someone else for the job instead of you? I am not a coder, I am a visual artist and this has been happening to me for so many years.

  • @eric-jt

    @eric-jt

    29 күн бұрын

    It doesn’t need to be the main portfolio, it can be a second one. Maybe like a toggle on the main portfolio

  • @dreamisover9813
    @dreamisover981328 күн бұрын

    That's a pretty interesting concept for a portfolio, really neat

  • @cjthefinesse
    @cjthefinesse28 күн бұрын

    This looks sick. Might do this this weekend.

  • @a7mdbest15
    @a7mdbest1529 күн бұрын

    This is really creative way to make a protfolio

  • @user-np6sx1rc8d
    @user-np6sx1rc8d28 күн бұрын

    I'm still inexperienced in coding but this tuto is really a great motivation for me to really learn as the portfolio is important as I'm currently still a student and it is fun because of the game concept rather than plain portfolio for learning purposes

  • @londonalexander7868
    @londonalexander786821 күн бұрын

    Definitely going to build this and put it as a button on my portfolio. Don’t think having it be the landing page is the smartest tho. I wish recruiters cared enough

  • @annebeignatborde1832
    @annebeignatborde183222 сағат бұрын

    Valuable tutorial, thank you. I'll be coming back to it once I've worked out my theme and storyline 🙂

  • @marginiszero
    @marginiszero27 күн бұрын

    This is next level portfolio,🔥❤

  • @brandon_wallace
    @brandon_wallace28 күн бұрын

    This is great!

  • @LydiasPianoStudio
    @LydiasPianoStudio27 күн бұрын

    Such a fun project! 😂🎉 Thanks for sharing! 😊

  • @JSLegendDev

    @JSLegendDev

    27 күн бұрын

    No problem!

  • @nelsonfernandes5208
    @nelsonfernandes520829 күн бұрын

    Literally I was finishing my portfolio as a game yesterday and this drops now 😭... But this is perfect I can see where I can improve my project now. 😊

  • @hassamulhaq7762
    @hassamulhaq776226 күн бұрын

    such videos are useful, and diff in many cases.

  • @bhaskarmondal7461
    @bhaskarmondal746118 күн бұрын

    this tutorial is soooo cool,

  • @Harthikreddyy
    @Harthikreddyy29 күн бұрын

    Looks easy enough

  • @ianwataka3328
    @ianwataka332829 күн бұрын

    I have never imagined one could do this😅😅

  • @firstlastcode
    @firstlastcode28 күн бұрын

    we need a whole video on the canvas api

  • @binay8848
    @binay884829 күн бұрын

    I started watching it..

  • @phat80
    @phat8010 күн бұрын

    If it’s one of the several portfolio projects it may be acceptable but if there’re only 2D games in your portfolio it will be strange for any recruiter 😅

  • @psiryan
    @psiryan29 күн бұрын

    Clever Idea. But important to consider your audience; this might not be a good format for certain types of developer jobs.

  • @Narslimmus
    @Narslimmus28 күн бұрын

    As thankful I am for all the free knowledge you provide, I don't think this is a good idea for the majority of people, maybe exclusively game developers will benefit from this style. Your portfolio should be usable first things first, then beautiful, then unique; don't fall into the trap of overcomplicating your site. Just some wisdom from someone who spent almost two years going crazy over this.

  • @QuirkyAvik
    @QuirkyAvik7 күн бұрын

    I thought about this a while back unfortunately the HR didn't want to play, she asked me if I had a paper resume or linkdin. Unfortunate state of where I live, we kill creative thinking.

  • @linisusanv688
    @linisusanv68827 күн бұрын

    I appreciate the creativity in this project. But not sure if recruiter will open portfolio in game format. Can you please share link for other portfolio project? Preferably in React.

  • @Vinsmokedz
    @Vinsmokedz29 күн бұрын

    The field is so saturated that these billion dollar potential projects are churned out for free.

  • @internallyinteral

    @internallyinteral

    28 күн бұрын

    We need more IT professionals so we can keep dropping wages 😂

  • @keithconner9036
    @keithconner903627 күн бұрын

    Thank you. Please be gracious in the comments. Negativity only attracts more negativity

  • @beutelschwitz
    @beutelschwitz25 күн бұрын

    What a coincidence 😅 this week I thought about a digital blackboard as a game

  • @codeguru_hsb
    @codeguru_hsb29 күн бұрын

    Recruiters aint playing a game for sure

  • @qaw392
    @qaw3924 күн бұрын

    2:07 aee, my man is also goblin

  • @user-eo6rb1sk6i
    @user-eo6rb1sk6i28 күн бұрын

  • @shatanshubodkhe1841
    @shatanshubodkhe184129 күн бұрын

    lesgooooo

  • @samoylov1973
    @samoylov197329 күн бұрын

    Nice! Will learn JS with this) Looking for the same one in Python!

  • @jigsaw2253

    @jigsaw2253

    29 күн бұрын

    You can translate the one in JS to Python yourself, no need to put another video also it helps you

  • @Blaze_Media0
    @Blaze_Media029 күн бұрын

    When he said "JS Legend Dev" he wasn't joking 🔥

  • @cristineeross
    @cristineerossКүн бұрын

    I did code along, and I love how it turned out, thanks so much! I have a small problem though, I hope you can help me out. My player is able to move past the boundaries somehow. I must've missed something. What should I double check?

  • @cristineeross

    @cristineeross

    Күн бұрын

    Silly me, I've found it: the boundary.width was missing, it only had a hight, so there was no boundary :D lol. Thank you so much! I coded a few small games in vanilla js before, but Kaboom makes it a lot easier, I love it!

  • @benjidaniel5595
    @benjidaniel55958 күн бұрын

    It’s a nice concept but I feel the biggest problem is it’s just not very compelling. There’s just not much to do. Even the resume is just a link to an externally hosted document.

  • @tokaoshba2188
    @tokaoshba218829 күн бұрын

    Could I make a similar portfolio by using python

  • @dreamleaf6784

    @dreamleaf6784

    29 күн бұрын

    Yes lol

  • @tokaoshba2188

    @tokaoshba2188

    28 күн бұрын

    ​How? Is there a video like this one that explains how to make a similar portfolio? ​@@dreamleaf6784

  • @ShadWarri0w
    @ShadWarri0w8 күн бұрын

    Hi, Thank you for uploading this. I really loved the course it's a super interesting way of showcasing a Portfolio. However, I've ran into a problem during deployment. I tried to deploy this on Github all it returns me is a white screen with a "Tap/Click around to move" at the top left. All the assets do not load and all that's returned is Failed to load resources: server responded with a status of 404(). This is for utils, kaboomCtx, monogram.ttf and constants. The localhost loads when I run Npm run preview and Npm run dev so I doubt the pathing is the issue. I would really appreciate it if you're able to guide me on this.

  • @JSLegendDev

    @JSLegendDev

    8 күн бұрын

    Hi! I added a small guide explaining how to deploy the project in the project's GitHub repository linked in the description.

  • @reyrotaru2011
    @reyrotaru201121 күн бұрын

    super nice project, but someone else as problems deploying it to the web? When i try to delpoy it, all the assets don't load

  • @amauryreyesbetances3639
    @amauryreyesbetances363922 күн бұрын

    Lastima que no tiene pista de audio integrado este video.

  • @chenhuing8055
    @chenhuing80555 күн бұрын

    This is dope!

  • @guglielmocerri7036
    @guglielmocerri703629 күн бұрын

    It can be published using GitHub pages?

  • @MrOgunsanya

    @MrOgunsanya

    29 күн бұрын

    Yes

  • @itzmeroj117
    @itzmeroj1172 күн бұрын

    when i create the code for the player and the spawnpoint i only get the map no player... nothing.

  • @mmapuppy
    @mmapuppy29 күн бұрын

    Is it 2024 ready? I mean I hope there’s a backdoor exploit in it… needs to be legit

  • @SheepCodeLevel1
    @SheepCodeLevel110 күн бұрын

    Hello, thank you for uploading this course. The player unfortunately does not load, I tried debugging the matter but still stucked so far. "Cannot read properties of undefined (reading 'x') at Object.main" has been shown as an error. Appreciate any support, thank you.

  • @JSLegendDev

    @JSLegendDev

    10 күн бұрын

    Could you provide more details? For example, what line of code is causing the error. By the way, you can clone the final repo and compare it with yours to see where things went wrong.

  • @SheepCodeLevel1

    @SheepCodeLevel1

    9 күн бұрын

    @@JSLegendDev Hello again and thank you for the hint, I did slowly recheck the code using the final repo and managed to find the issue, thank you for the hint.

  • @JSLegendDev

    @JSLegendDev

    9 күн бұрын

    @@SheepCodeLevel1 No problem! Glad it helped :)

  • @rally_furymoments5294
    @rally_furymoments529429 күн бұрын

    What is frame, and how do you count it?

  • @devtravaller

    @devtravaller

    9 күн бұрын

    frame count is how many sprite u have for animate

  • @Luis-wf9ws

    @Luis-wf9ws

    5 күн бұрын

    Animations(and games by extension) are made of images put one after another to give the illusion of movement, those images are called frames and the fluidity of a game depends on how many frames do you have in a second

  • @rally_furymoments5294

    @rally_furymoments5294

    5 күн бұрын

    ​@@Luis-wf9ws you're the best! You explain better

  • @rally_furymoments5294

    @rally_furymoments5294

    5 күн бұрын

    What about sprite?

  • @Luis-wf9ws

    @Luis-wf9ws

    4 күн бұрын

    @@rally_furymoments5294 they would be the drawings with what you compose the frame, if im not wrong sprite is a term specific to pixel art(the art style that use a los of 2d games, like this one)

  • @TheAzovStar
    @TheAzovStar29 күн бұрын

    This is a way to create another version of your portfolio, because 99.9% recruiters will not have a time to play😅

  • @urosstevanovic6044
    @urosstevanovic604427 күн бұрын

    i have a problem the player icon is not loading can someone help me please

  • @JSLegendDev

    @JSLegendDev

    26 күн бұрын

    Could you provide more details?

  • @filippo_cecchi
    @filippo_cecchi7 күн бұрын

    Hi, the code run fine in localhost but when i deploy it on github I see a white background and only the text top left. In console gives me an error failed to load resources 404 and 6 unchecked runtime error "the message port closed before a response was received". It's like it can't reach the libraries needed to run. Anyone has any idea on what should i do?

  • @JSLegendDev

    @JSLegendDev

    6 күн бұрын

    I have added a guide on how to deploy the site in the github repo linked in the description. Hope it helps!

  • @filippo_cecchi

    @filippo_cecchi

    6 күн бұрын

    @@JSLegendDev Thank you. I finally fixed the code as the guide says, now it works perfectly!!

  • @JSLegendDev

    @JSLegendDev

    6 күн бұрын

    @@filippo_cecchi Nice!

  • @Wer-zo8mb
    @Wer-zo8mb22 күн бұрын

    How can i make a React component with that game ?

  • @JSLegendDev

    @JSLegendDev

    22 күн бұрын

    One way you could go about it is to use the div used for rendering the UI and use it as the root of your React code. All your React components will be rendered there.

  • @Wer-zo8mb

    @Wer-zo8mb

    22 күн бұрын

    i'm really new to JS/React world, and i don't undestand much about it. Thx for the help@@JSLegendDev

  • @my-financial-wealthblog4423
    @my-financial-wealthblog442319 күн бұрын

    Why would you use vite if you can write in plain JavaScript?

  • @JSLegendDev

    @JSLegendDev

    19 күн бұрын

    You could use plain javascript (just load the Kaboom library via a script tag) without vite however you wouldn't get intellisense for the Kaboom library which is pretty helpful.

  • @mataplay1632
    @mataplay163225 күн бұрын

    Brasil

  • @phoneix24886
    @phoneix248865 күн бұрын

    3000.1.17? Goodness gracious

  • @JSLegendDev

    @JSLegendDev

    5 күн бұрын

    Yeah, Kaboom version naming is weird. 1000 is ver 1.0, 2000 is ver 2.0 and 3000 is ver 3.0.

  • @VinSilverstone
    @VinSilverstone29 күн бұрын

    Javascript 😁😁

  • @memaimu
    @memaimu17 күн бұрын

    I'd feel bad using this. Feels like borderline plagiarism lol.

  • @kuroshahplays
    @kuroshahplays29 күн бұрын

    First

  • @okonkworchizim6953
    @okonkworchizim695329 күн бұрын

    2nd

  • @AB-kf4vp
    @AB-kf4vp19 күн бұрын

    what is the use of studying coding now that all job will be done by AI and bot most peoples are scary for losing jobs in IT sector and new selection is only for highly IQ and skilled professional 😁

  • @hedgehogform
    @hedgehogform17 күн бұрын

    It's cool but not practical as a portfolio. I wouldn't bother to go through that just to know what your skills are. No one has the time to play a game just to see your skills. I mean it could work if you're applying as a game maker creator for a game studio but as a website? No.

  • @benhasel4540

    @benhasel4540

    11 күн бұрын

    most indie games companies have people who look for stuff like this. Of course it depends on where are you applying but for the game industry this is very cool!

  • @gsdealer7691
    @gsdealer769128 күн бұрын

    Make it a blockchain one...

  • @phat80
    @phat8010 күн бұрын

    The worst game development tutorial I’ve ever seen. You should run project at every step of the development and gradually show the progress. But you’re just writing and writing the code. It’s also a bad practice for beginners to write code in big chunks without even testing it.