Tutorial List Tools & Setup

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:

  1. Live Server — Launch a local development server with hot reload. Essential!
  2. Prettier — Auto-format your code on save.
  3. ESLint — Catch JavaScript errors before runtime.
  4. 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?

  1. Canvas element — This is your "drawing surface". All game graphics render here.
  2. getContext('2d') — Gets the 2D rendering context, your main drawing API.
  3. 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:

  1. Right-click on index.html in VS Code.
  2. Select "Open with Live Server".
  3. 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.

← Back to Path