@freecodecamp
  @freecodecamp
freeCodeCamp.org | Build a Dev Portfolio as a 2D Game – JavaScript Course @freecodecamp | Uploaded April 2024 | Updated October 2024, 3 minutes ago.
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-portfolio-kaboom

Map files (map.json + map.png): github.com/JSLegendDev/2d-portfolio-kaboom/tree/master/public
Spritesheet: github.com/JSLegendDev/2d-portfolio-kaboom/blob/master/public/spritesheet.png
Fonts: datagoblin.itch.io/monogram
Tiled software: mapeditor.org

Substack post explaining how to implement mobile controls : jslegenddev.substack.com/p/how-to-implement-player-controls

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: freecodecamp.org

Read hundreds of articles on programming: freecodecamp.org/news
Build a Dev Portfolio as a 2D Game – JavaScript CourseLangChain GEN AI Tutorial – 6 End-to-End Projects using OpenAI, Google Gemini Pro, LLAMA2Non-Technical Intro to Generative AIData Science and Sports Analytics Expert Ken Jee [Podcast #135]Fullstack Drag & Drop Notes App with ReactOperating Systems Course for BeginnersUse picture Element for Responsive Images in HTMLFrontend Web Development Bootcamp Course (JavaScript, HTML, CSS)Spread Operator in JavaScriptLearn Git – Full Course for Beginners

Build a Dev Portfolio as a 2D Game – JavaScript Course @freecodecamp

SHARE TO X SHARE TO REDDIT SHARE TO FACEBOOK WALLPAPER