Tools & Setup

Before you write your first line of game code, let's set up a professional development environment. Good news: you only need 2 free tools.

What You'll Need

Visual Studio Code

The most popular free code editor. Lightweight, powerful, and packed with extensions for web development.

Download VS Code →

A Modern Browser

Chrome, Firefox, or Edge. You'll use DevTools (F12) constantly for debugging. Chrome's DevTools are industry standard.

Get Chrome →

Recommended VS Code Extensions

These extensions will supercharge your HTML5 game development:

Live Server — Launch a local development server with hot reload. Essential!
Prettier — Auto-format your code on save.
ESLint — Catch JavaScript errors before runtime.
HTML CSS Support — Autocomplete for class names.

Project Structure

Create a folder for your game project. A typical structure looks like this:

my-first-game/
├── index.html       # Your game's entry point
├── style.css        # (Optional) Separate stylesheet
├── game.js          # (Optional) Separate JavaScript file
└── assets/          # Images, sounds, etc.
    ├── player.png
    └── coin.wav

The HTML Boilerplate

Every HTML5 game starts with this basic structure. Create an index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Game</title>
    <style>
        body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #111;
        }
        canvas {
            border: 2px solid #333;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>

    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');

        // Your game code will go here!
        ctx.fillStyle = '#4ade80';
        ctx.fillRect(100, 100, 50, 50);
    </script>
</body>
</html>

What's happening here?

Canvas element — This is your "drawing surface". All game graphics render here.
getContext('2d') — Gets the 2D rendering context, your main drawing API.
fillRect() — Draws a filled rectangle. x=100, y=100, width=50, height=50.

Try it now!

Open this template in our Playground and experiment with different colors and positions.

Open in Playground

Running Your Game

With VS Code and Live Server installed:

Right-click on index.html in VS Code.
Select "Open with Live Server".
Your browser opens automatically. Any code changes are reflected instantly!

That's it! You're ready to build games. In the next tutorial, we'll explore the most important concept: The Game Loop.

Continue learning: Game loop · Try the playground · Browse code tools

Before you continue

Direct answer: You only need a modern browser, a text editor, and a small folder of HTML, CSS, and JavaScript files to start.

What you need first

No framework or paid tool is required.

After this lesson

You can explain the idea, change the supplied example, and choose the next related lesson.

When to use it

Use a small local server while developing; opening a file directly can hide loading and browser-security problems.

Common mistake

Changing several files before refreshing the page; make one small change and verify it first.

Try it and check it

This lesson includes its runnable example or code experiment above. Change one value, run it again, and confirm the visible result changes before moving on.

Real game connection

Use the Playground for quick experiments.

Compatibility: Test in a current Chrome, Firefox, Safari, or Edge browser. Canvas and standard input work broadly in current browsers; audio still needs a user action.

Source and update

Reviewed against MDN Web Docs. Updated 2026-07-14. This page does not claim performance results beyond the local example check.