Learn JavaScript by Building Mario - Super Simple Tutorial

Learn JavaScript fundamentals by building a complete Mario-style platformer game from scratch in this hands-on coding tutorial. Set up the project structure and development environment before diving into CSS styling to create the visual foundation of your game. Implement core JavaScript concepts including game state management, level initialization, and game mechanics such as player movement, collision detection, and game over conditions. Add interactive game elements including enemies, platforms, collectible coins, pipes, and surprise blocks while learning how to handle complex game logic. Master collision detection algorithms to create realistic interactions between the player character and various game objects. Apply final touches and optimizations to complete your fully functional Mario-inspired browser game, gaining practical experience with HTML5 canvas, CSS animations, and JavaScript game development patterns throughout the 2-hour build process.

Syllabus

00:00 Introduction
02:08 Project set up
10:00 Let’s add our CSS
28:10 Let’s add our JavaScript
30:00 Adding game state
41:00 Initialising the game and loading levels
54:00 Writing our game over and clearing levels
58:00 Handling movements
01:01:35 Adding enemies, platforms, coins, pipes and surprise blocks
01:23:51 Checking for collisions
01:51:50 Final touches