How to Remake Mario in Phaser
Part I.
Ferenc Almasi • 
2021 July 17 • 
18 min readLearn how you can use a JavaScript game framework called Phaser to recreate the base gameplay mechanics of the famous Super Mario with only JavaScript.
Phaser Roadmap Other roadmaps
Learn how to build JavaScript games using our guided roadmap📚 8 lessons • 📖 1.63 hours read in total
Learning is a continuous process. If you're already familiar with how JavaScript works and you've built several projects, these tutorials will help you take your skills to the next level. Phaser is a JavaScript game framework that can be used to develop games with JavaScript.
This roadmap will teach you about different game concepts, that you can also use in your daily frontend projects, such as how to detect collision between two elements, or how take user input to interact with different objects.
If you're new to JavaScript, be sure to take the JavaScript roadmap first. If you want to explore more JavaScript tutorials without a direction, you can filter for the tutorials you're interested in on our JavaScript category page. After finishing this roadmap, you can continue with our React roadmap.
What is covered?
Phaser 3 basics- Working with tilemaps and sprites
- Camera and character movement
- Game objects
- Interactibles
- Game UI
- Collision detection
- High score system
- Dynamically spawning game objects
- Working with timers
How to Remake Mario in Phaser
Part II.Ferenc Almasi • 2021 June 07 • 12 min readLearn how you can use Phaser and Tiled to create various interactive game objects with different behaviors.How to Remake Mario in Phaser
Part III.Ferenc Almasi • 2021 June 07 • 10 min readIn this part, we'll increase the challenge by making the player die if they hit a goomba, and we also let them win the game by reaching the flag.
How to Remake Chrome's Dino in Phaser
Part I.Ferenc Almasi • 2021 July 17 • 14 min readLearn how you can use a JavaScript game framework called PhaserJS to recreate the base gameplay mechanics of the Dinosaur game with only JavaScript.How to Remake Chrome's Dino in Phaser
Part II.Ferenc Almasi • 2021 June 07 • 13 min readLearn how to work with game UI elements in Phaser, and how to dynamically spawn different game objects.How to Remake Chrome's Dino in Phaser
Part III.Ferenc Almasi • 2021 June 07 • 9 min readLearn how to implement a high score system, how to handle game over states, and how to create a restart functionality.
Recreate Breakout with Emojis in JavaScript
Creating your very first game in PhaserFerenc Almasi • 2022 July 05 • 17 min readLearn how you can use the Phaser game framework to your advantage to build the famous Breakout game entirely in JavaScript.
12 JavaScript Game Ideas
JavaScript game projects with tutorials and source code providedFerenc Almasi • 2023 February 13 • 5 min readLearn more about game development in JavaScript from beginner to more advanced concepts with these game ideas.
🗺️ Related roadmaps
Continue learning
JavaScript Roadmap
Learn JavaScript with our guided roadmapThis roadmap takes you through the essential concepts in JavaScript, from basic syntax to advanced concepts like functional and asynchronous programming.
Building JavaScript Projects
Learn how to work with JavaScript using our guided roadmapThis roadmap covers and takes you through various projects to help you practice JavaScript while also building a portfolio of applications.
Building React Projects
Learn working in React with our guided roadmapThis roadmap takes you through various React projects to help you practice React while also building a portfolio and reusable code.
📚 More Webtips
Master the Art of Frontend
- Access 100+ interactive lessons
- Unlimited access to hundreds of tutorials
- Prepare for technical interviews
Courses
Recommended
How to Create a Configurable Tabs Component in React
With TypeScript and HTML content support
Ferenc Almasi • 2024 February 23 • 11 min read • React v18.2
How to Create a Responsive Timeline Component in React
With the help of CSS pseudo elements
Ferenc Almasi • 2024 February 13 • 10 min read • React v18.2
How to Create Dynamic Routes in Astro
Generating different pages based on server-side data
Ferenc Almasi • 2024 January 16 • 9 min read