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: 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
Видео Build a Dev Portfolio as a 2D Game – JavaScript Course канала freeCodeCamp.org
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
Видео Build a Dev Portfolio as a 2D Game – JavaScript Course канала freeCodeCamp.org
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
![Full HTTP Networking Course – Fetch and REST APIs in JavaScript](https://i.ytimg.com/vi/2JYT5f2isg4/default.jpg)
![Code a Reddit Clone with React, Next.js, Firebase v9, Chakra UI – Full Course](https://i.ytimg.com/vi/rCm5RVYKWVg/default.jpg)
![Full-Stack Next.js, TypeScript, and AWS Course – Code a Quote Generator](https://i.ytimg.com/vi/FRmCxj9K7II/default.jpg)
![Deep Learning for Computer Vision with Python and TensorFlow – Complete Course](https://i.ytimg.com/vi/IA3WxTTPXqQ/default.jpg)
![Microservice Architecture and System Design with Python & Kubernetes – Full Course](https://i.ytimg.com/vi/hmkF77F9TLw/default.jpg)
![Build AI Apps with ChatGPT, DALL-E, and GPT-4 – Full Course for Beginners](https://i.ytimg.com/vi/jlogLBkPZ2A/default.jpg)
![Back End Developer Roadmap 2024](https://i.ytimg.com/vi/tN6oJu2DqCM/default.jpg)
![DevOps with GitLab CI Course - Build Pipelines and Deploy to AWS](https://i.ytimg.com/vi/PGyhBwLyK2U/default.jpg)
![Dynamic Programming - Learn to Solve Algorithmic Problems & Coding Challenges](https://i.ytimg.com/vi/oBt53YbR9Kk/default.jpg)
![JavaScript Game Development Course for Beginners](https://i.ytimg.com/vi/GFO_txvwK_c/default.jpg)
![Web App Vulnerabilities - DevSecOps Course for Beginners](https://i.ytimg.com/vi/F5KJVuii0Yw/default.jpg)
![Create a Design System with CSS - Web Development Course](https://i.ytimg.com/vi/lRaL-8qZ0mM/default.jpg)
![TensorFlow for Computer Vision Course - Full Python Tutorial for Beginners](https://i.ytimg.com/vi/cPmjQ9V6Hbk/default.jpg)
![Python for Bioinformatics - Drug Discovery Using Machine Learning and Data Analysis](https://i.ytimg.com/vi/jBlTQjcKuaY/default.jpg)
![Automate with Python – Full Course for Beginners](https://i.ytimg.com/vi/PXMJ6FS7llk/default.jpg)
![Advanced Git Tutorial - Interactive Rebase, Cherry-Picking, Reflog, Submodules and more](https://i.ytimg.com/vi/qsTthZi23VE/default.jpg)
![Frontend Development Course - Create a Blog with HTML & CSS](https://i.ytimg.com/vi/Aj7HLsJenVg/default.jpg)
![Python API Development - Comprehensive Course for Beginners](https://i.ytimg.com/vi/0sOvCWFmrtA/default.jpg)
![React Router 6 – Full Course](https://i.ytimg.com/vi/nDGA3km5He4/default.jpg)
![Advanced Computer Vision with Python - Full Course](https://i.ytimg.com/vi/01sAkU_NvOY/default.jpg)
![JavaScript Security Vulnerabilities Tutorial – With Code Examples](https://i.ytimg.com/vi/ypNKKYUJE5o/default.jpg)