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

By freeCodeCamp.org
Published: Apr 03, 2024

“
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: https://jslegenddev.github.io/portfolio/
Source code: https://github.com/JSLegendDev/2d-portfolio-kaboom

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

Substack post explaining how to implement mobile controls : https://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: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news

[READ MORE]

”