Your cart is empty.
Keep shopping
Build a Fighting Game from Scratch with HTML CSS JavaScript
New
2 students
What you'll learn
- How to set up an HTML5 <canvas> element and draw shapes, images, and sprite sheets onto it with JavaScript.
- How to build a proper game loop using requestAnimationFrame and keep gameplay running at a consistent speed across different monitors and refresh rates.
- How to implement core 2D game physics, including gravity, ground collision, jumping, and smooth left/right movement.
- How to capture and respond to keyboard input to drive responsive two-player controls, including movement, jumping, and attacks
- How to load sprite sheets and animate characters through idle, run, jump, fall, attack, take-hit, and death states using a reusable Sprite class.
- How to design and structure object-oriented game code by building a Fighter class that combines physics, animation, and combat behavior.
- How to detect collisions between hitboxes and hurtboxes, apply damage, and create satisfying attack-and-react combat mechanics.
- How to build a complete game UI, including health bars, a countdown timer, a mode-selection screen, a countdown intro, and a game-over screen.
- How to implement an animation state machine that cleanly switches between sprite states based on what the character is doing.
- How to add a simple AI opponent, cap the FPS, and apply final polish to turn a prototype into a finished, shareable game.
Explore related topics
Course content
11 sections • 37 lectures • 4h 0m total length
Requirements
- Basic familiarity with HTML, CSS, and JavaScript (variables, functions, conditionals, loops, arrays, and basic DOM concepts).
- Comfort working with ES6 functional classes is helpful but not required — we’ll build them up as we go.
- No prior game-development, math, or graphics-programming experience is required.
- No frameworks, libraries, build tools, or package managers needed — everything is plain HTML, CSS, and vanilla JavaScript.
- A modern web browser such as Chrome, Firefox, Safari, or Edge.
Description
This hands-on course teaches you how to build a complete 2-player browser fighting game from the ground up using only HTML, CSS, and vanilla JavaScript. There are no frameworks to learn, no npm installs, and no hidden magic — just you, your editor, and the browser. By the end, you’ll have a polished game featuring animated sprite-sheet characters, responsive two-player controls, attack hit-detection, health bars, a countdown timer, a mode-selection screen, and an AI-controlled opponent.
The course is split into multiple progressive parts, each one building directly on the work from the previous lesson. You’ll start by setting up the canvas and drawing your first shapes, then add gravity, jumping, and movement. From there you’ll load sprite sheets, build a reusable Sprite class, and evolve it into a full Fighter class with physics and animations. Once both fighters are on screen, you’ll wire up keyboard input, design a HUD with health bars and a timer, implement attack and hit-detection logic, and create an animation state machine that smoothly switches between idle, run, jump, attack, hit, and death animations.
Along the way, you’ll learn the core concepts that power virtually every 2D game:
the game loop,
delta-time updates for consistent gameplay across different monitors,
collision detection,
input handling,
sprite animation,
state management.
The final chapters add the polish that separates a prototype from a real game
a mode-selection screen,
countdown intro,
two-player mode,
an AI opponent,
an FPS cap,
and a game-over flow.
This course is ideal for developers who already know the basics of HTML, CSS, and JavaScript and want to break into game development or simply build something fun and impressive. No prior game-dev experience is required. All you need is a code editor (VS Code recommended) and a modern browser. Fire up your editor, open the starter files, and let’s build a game.
Who this course is for:
- Beginner-to-intermediate web developers who know the basics of HTML, CSS, and JavaScript and want to apply those skills to something fun and visual.
- Aspiring game developers who want a friendly, framework-free introduction to 2D game development concepts like the game loop, physics, sprite animation, and collision detection
- Self-taught coders and bootcamp graduates looking for a portfolio-worthy project that goes beyond typical to-do apps and landing pages.
- Students and hobbyists who learn best by building real, complete projects from start to finish rather than isolated exercises.
- Developers curious about how games actually work under the hood, without the abstraction of engines like Unity, Godot, or Phaser.
- Anyone who has ever wanted to build their own browser game and ship it to friends — this course takes you all the way from a blank canvas to a finished, playable fighting game.