Build a Fighting Game from Scratch with HTML CSS JavaScript

用HTML/CSS/JS从头打造格斗游戏

本课程将教你仅用HTML、CSS和原生JavaScript，从零构建一款完整的双人格斗游戏。涵盖画布渲染、游戏循环、物理碰撞、双人键盘控制及精灵动画，适合前端开发者提升实战技能。

Published 5/2026
MP4 | Video: h264, 1920×1080 | Audio: AAC, 44.1 KHz, 2 Ch
Language: English | Duration: 4h 0m | Size: 2.43 GB

Go from an empty canvas to a fully playable 2-player fighting game using nothing but HTML, CSS, and plain JavaScript

What you’ll learn
How to set up an HTML5 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.

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.