Game Programming – HTML & JavaScript Course

📋

Introduction — Why do we learn this way?

The philosophy behind this course

This course does not start with abstract theoretical concepts. Instead, we take real games that run on the internet — Froggy Rush, Turtle Race and Castle Siege — apart piece by piece, learning every concept exactly when we need it.

Core principle

Every lesson solves a concrete problem in one of the games. We never learn something that doesn't have an immediately visible and understandable use.

You need no prior programming knowledge to complete this course. Only two tools are required: a text editor (e.g. VS Code, Notepad++) and a browser (Chrome, Firefox).

What languages do we learn?

HTML (content structure) + CSS (appearance) + JavaScript (program logic). No Python, no C, no server — everything runs in the browser with immediate, visible results.

Why NOT Python or C?

Our goal is to build games that anyone can try on their phone — the browser is the best platform for this. Python and C serve different purposes (data science, systems programming) — those would be topics for a different course.

🎯

What will you be able to do by the end?

Concrete, measurable outcomes

HTML & CSS

Build a webpage from scratch
Place text, images and links
Set styles, colours and sizes
Create a canvas element
Make it look good on mobile (responsive)

JavaScript

Work with variables and arrays
Write conditions and loops
Design and call functions
Use objects and classes
Handle events (click, key, touch)

Canvas & Graphics

Draw shapes and images
Write an animation loop (game loop)
Implement collision detection
Simulate movement and physics

Advanced Topics

Build a save system
Play and manage sounds
Program AI opponents
Deploy to Netlify
Add mobile touch controls

🛠

Required tools

Everything is free, no installation needed for the basics

Tool	Purpose	Where to get it
VS Code	Writing code, syntax highlighting	code.visualstudio.com (free)
Chrome / Firefox	Running the game, debugging (F12)	Already installed
Notepad++	Alternative text editor	notepad-plus-plus.org (free)
Netlify	Publishing your game online (Phase 5)	netlify.com (free plan)

First step — try it right now

Open a new file, save it as index.html, type: <h1>Hello!</h1> — then double-click to open it in your browser. That is programming.

🗺

Course structure — 50 lessons, 5 phases

Estimated time: ~6 months at 3–4 hours per week

1

HTML & CSS Basics — Lessons 1–10

We build the skeleton and appearance of a webpage. We learn document structure through Castle Siege's HTML layout.

HTML5 CSS3 ~5 weeks

2

JavaScript Basics — Lessons 11–20

The logic of programming. From variables to objects, illustrated through Froggy Rush's level generator code.

JavaScript ES6+ ~6 weeks

3

Canvas API & Animation — Lessons 21–30

Drawing, movement, collision — the fundamentals of game graphics. Learned through drawing the turtle and the frog.

Canvas 2D requestAnimationFrame ~6 weeks

4

Dissecting Full Games — Lessons 31–45

We understand every line of three complete games: game state, physics, AI opponent, level generation.

Game Loop AI logic ~8 weeks

5

Advanced Features & Publishing — Lessons 46–50

localStorage, sound handling, mobile D-pad, Netlify deploy. The game goes live on the internet.

localStorage Web Audio Deploy ~3 weeks

📄

Phase 1 — HTML & CSS Basics

From webpage skeleton to styles · Lessons 1–10

In the first phase we learn how a webpage is structured — and along the way, what the Castle Siege game's HTML frame looks like from the inside.

castle_siege.html — the basic skeleton HTML

<!-- Every webpage starts like this -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Castle Siege</title>
  <style> /* CSS goes here */ </style>
</head>
<body>
  <canvas id="c"></canvas> <!-- the game canvas -->
  <script> // JavaScript goes here </script>
</body>
</html>

LESSON 1

HTML document structure

DOCTYPE, html, head, body — what every tag means and why it's needed. We look at Castle Siege's frame.

HTML

LESSON 2

Text, headings, paragraphs

h1–h6, p, strong, em, br — formatting text content. We analyse the game's score display.

HTML

LESSON 3

Links, images, lists

a, img, ul, ol, li — navigation and content. The HTML of the site's game list.

HTML

LESSON 4

div, span, id, class

The "boxes" of HTML — how to group elements together. Building Castle Siege's HUD panels.

HTML

LESSON 5

Buttons and input elements

button, input, select — interactive UI elements. The speed-change buttons and save field.

HTML

LESSON 6

CSS — Colour, font, size

color, background, font-family, font-size — the first styles. Understanding the game interface's dark theme.

CSS

LESSON 7

CSS — Box model

margin, padding, border, width, height — why things aren't where you expected. Sizing the panel elements.

CSS

LESSON 8

CSS — Flexbox layout

display:flex, gap, align-items — the modern web layout system. Arranging the HUD buttons in a row.

CSS

LESSON 9

CSS — Responsive design

@media, max-width, viewport — how it looks on mobile. Adapting games for mobile screens.

CSS

LESSON 10

🏆 Project: Game List Page

We build our own homepage where three games are listed as links — like a real game portal.

Project

▶ Open Phase 1 — HTML & CSS →

⚡

Phase 2 — JavaScript Basics

The language of program logic · Lessons 11–20

JavaScript is what brings a webpage to life. In this phase we learn from Froggy Rush and Galactic Conquest's code — we always see exactly what each concept is good for in the game.

turtle_race.html — variables and objects in the game JavaScript

// Variables — store data
let lives = 3;          // number
let playerName = "Alex"; // string
let isJumping = false;  // boolean

// Object — related data grouped together
const player = {
  x: 170,       // horizontal position
  y: 406,       // vertical position
  lives: 3,    // number of lives
  energy: 100  // energy level
};

// Array — multiple items in a list
const eggs = [
  { x: 120, y: -200 },
  { x: 260, y: -450 },
  { x: 180, y: -700 }
];

LESSON 11

Variables: let, const, var

What's the difference? When to use which? We use them to store the player's lives and score.

JavaScript

LESSON 12

Conditions: if, else, switch

The program makes decisions — if energy runs out, a life is lost. Castle Siege's collision logic.

JavaScript

LESSON 13

Loops: for, while, forEach

We need to repeat — every enemy, every egg must be checked. Array iteration in the game.

JavaScript

LESSON 14

Functions — reusable code

function, parameters, return value. Inside the drawTurtle() function — draws a different turtle each call.

JavaScript

LESSON 15

Arrays and array methods

push, pop, filter, map, find — enemies, eggs, towers all live in arrays.

JavaScript

LESSON 16

Objects and properties

The game state is one big object. How do we design it? Why is it better than many separate variables?

JavaScript

LESSON 17

Event handling — keyboard

addEventListener, keydown, keyup — how the program detects key presses. The WASD control code.

JavaScript

LESSON 18

Event handling — mouse and touch

click, touchstart, touchend — mobile and desktop mouse handling. D-pad buttons and canvas clicks.

JavaScript

LESSON 19

Math and randomness

Math.random(), Math.floor(), Math.sin() — how we place eggs and rocks randomly.

JavaScript

LESSON 20

🏆 Project: Mini quiz game

Using pure JavaScript (no canvas) we build a simple question-and-answer game.

Project

▶ Open Phase 2 — JavaScript →

🎨

Phase 3 — Canvas API & Animation

Game graphics and movement · Lessons 21–30

The Canvas is the "drawing board" we draw the game onto. In this phase we learn how to draw shapes, characters — and how to animate them.

froggy_rush.html — the game loop structure JavaScript

// Getting the canvas element and drawing context
const canvas = document.getElementById('gc');
const ctx = canvas.getContext('2d');

// The game loop — runs 60 times per second
function loop() {
  update();  // 1. updates the game state
  draw();    // 2. draws the current frame
  requestAnimationFrame(loop); // 3. calls itself again
}

// Drawing on the canvas
function draw() {
  ctx.clearRect(0, 0, W, H);    // clear
  ctx.fillStyle = '#4aaa22';    // set colour
  ctx.fillRect(100, 200, 50, 30); // draw rectangle
}

LESSON 21

Canvas basics — the first line

getContext, fillRect, strokeRect, clearRect — the first steps. We draw a road and a castle.

Canvas

LESSON 22

Circles, arcs, curves

arc(), beginPath(), closePath() — we draw the turtle's body and head with these.

Canvas

LESSON 23

Colours, transparency, gradients

rgba(), createLinearGradient(), createRadialGradient() — the secret to visual depth.

Canvas

LESSON 24

The game loop — requestAnimationFrame

Why 60fps? How do we measure time? The concept of movement speed and DT (deltatime).

Animation

LESSON 25

Coordinate system & transformations

translate(), rotate(), scale(), save(), restore() — how to draw the turtle around its own axis.

Canvas

LESSON 26

Drawing text

fillText(), font, textAlign — displaying score, names and feedback messages on the canvas.

Canvas

LESSON 27

Collision detection — circle and rectangle

Math.hypot() distance calculation and rectangle overlap. The egg-collecting and rock-collision code.

Physics

LESSON 28

Scroll and camera follow

How does the level scroll? World-space vs screen-space — Turtle Race's coordinate system.

Animation

LESSON 29

Sprite animation — walking, jumping

Math.sin() based cyclic motion — how the turtle and frog walk without needing image files.

Animation

LESSON 30

🏆 Project: Moving character

We draw our own character on the canvas, control it with the keyboard, and animate its movement.

Project

▶ Open Phase 3 — Canvas & Animation →

🎮

Phase 4 — Dissecting the Three Games

Froggy Rush · Turtle Race · Castle Siege · Lessons 31–45

In this phase we take apart three complete games and understand them piece by piece. Each lesson examines one specific mechanism from the inside.

LESSON 31 · Froggy Rush

Procedural level generation

How do we place eggs, rocks and seagulls randomly but fairly? The evenSpread() function.

Froggy Rush

LESSON 32 · Froggy Rush

Surfaces and speed — strategy pattern

The SURFACES object: how to store all surface properties in one place and read them dynamically.

Froggy Rush

LESSON 33 · Froggy Rush

Jump physics — Math.sin() parabola

How we calculate the frog's arc using sin(). The relationship between jumpT timer and jumpH height.

Froggy Rush

LESSON 34 · Froggy Rush

Multi-state game — State Machine

play, dead, levelup, gameover — the concept of the state machine. How does the game switch states?

Froggy Rush

LESSON 35 · Froggy Rush

Difficulty levels — DIFF_CFG object

How do we change the entire game's behaviour with just one DIFF variable?

Froggy Rush

LESSON 36 · Turtle Race

AI opponent — targeting and navigation

How does the turtle AI decide: which egg is closest? How does it avoid seagulls? Weighted scoring.

Turtle Race

LESSON 37 · Turtle Race

Resource management — Energy system

Energy drain per surface, recharging by collecting — the mechanics of decision-making and trade-offs.

Turtle Race

LESSON 38 · Turtle Race

Camera and world-space coordinates

Why are objects' y coordinates sometimes positive, sometimes negative? Screen-space vs world-space.

Turtle Race

LESSONS 39–40 · Turtle Race

Drawing characters in layers

Shadow → legs → body → head → eyes → mouth — the correct drawing order and using save/restore.

Turtle Race

LESSONS 41–42 · Castle Siege

Tower Defense architecture

How is all of Castle Siege structured? Heroes, towers, enemies, projectiles — all data in the G object.

Castle Siege

LESSON 43 · Castle Siege

Dynamic level generation — genLevel()

50 different levels from one function. How do we scale difficulty with mathematics?

Castle Siege

LESSON 44 · Castle Siege

Bullet prediction — lead prediction

The tower shoots not where the enemy IS, but where it WILL BE. Calculating speed and travel time.

Castle Siege

LESSON 45

🏆 Project: Your own mini game

The student designs and builds their own simple game using what they've learned. Independent development.

Own Project

▶ Open Phase 4 — Dissecting Games →

🚀

Phase 5 — Advanced Features & Publishing

localStorage, sounds, mobile UI, deploy · Lessons 46–50

LESSON 46

localStorage — saving in the browser

How does Castle Siege save level progress? JSON.stringify, JSON.parse, localStorage.setItem.

Data

LESSON 47

Top 10 leaderboard implementation

Sorting arrays, slice() — how to maintain a list of best scores with names and points.

Data

LESSON 48

Web Audio API — music and sound effects

new Audio(), play(), base64 embedding — why this approach and why Android can't load a separate file.

Audio

LESSON 49

Mobile D-pad and touch handling

touchstart, touchend, pointer events — how we built Froggy Rush and Castle Siege's mobile controls.

Mobile

LESSON 50

🏆 Deploy — Netlify upload

How does the game get onto the internet? Netlify account, drag-and-drop deploy, custom URL. Course wrap-up.

Deploy

What you'll have at the end

After completing the course you'll be able to independently design and build simple browser games using HTML and JavaScript, and publish them online — using nothing but a text editor and a browser.

📊

Summary table

The full course at a glance

Phase	Topic	Lessons	Est. time	Example game
1. HTML & CSS	Webpage structure, styles, responsive design	1–10	~5 weeks	Castle Siege (HUD)
2. JavaScript	Variables, conditions, loops, functions, arrays, objects	11–20	~6 weeks	Froggy Rush (logic)
3. Canvas	Drawing, animation, collision, physics, camera	21–30	~6 weeks	Turtle Race (graphics)
4. Games	Full game dissection, AI, state machine, level generation	31–45	~8 weeks	All three games
5. Advanced	Saving, sounds, mobile UI, deploy	46–50	~3 weeks	Full implementation
Total		50 lessons	~6 months	3 games live online

Next step

This document is the introductory part of Lesson 1. The individual lesson files contain detailed explanations, code examples and exercises — always connected to specific lines of the games above.

HTML & JavaScript — From Zero to a Playable Game

Introduction — Why do we learn this way?

What will you be able to do by the end?

Required tools

Course structure — 50 lessons, 5 phases

HTML & CSS Basics — Lessons 1–10

JavaScript Basics — Lessons 11–20

Canvas API & Animation — Lessons 21–30

Dissecting Full Games — Lessons 31–45

Advanced Features & Publishing — Lessons 46–50

Phase 1 — HTML & CSS Basics

HTML document structure

Text, headings, paragraphs

Links, images, lists

div, span, id, class

Buttons and input elements

CSS — Colour, font, size

CSS — Box model

CSS — Flexbox layout

CSS — Responsive design

🏆 Project: Game List Page

Phase 2 — JavaScript Basics

Variables: let, const, var

Conditions: if, else, switch

Loops: for, while, forEach

Functions — reusable code

Arrays and array methods

Objects and properties

Event handling — keyboard

Event handling — mouse and touch

Math and randomness

🏆 Project: Mini quiz game

Phase 3 — Canvas API & Animation

Canvas basics — the first line

Circles, arcs, curves

Colours, transparency, gradients

The game loop — requestAnimationFrame

Coordinate system & transformations

Drawing text

Collision detection — circle and rectangle

Scroll and camera follow

Sprite animation — walking, jumping

🏆 Project: Moving character

Phase 4 — Dissecting the Three Games

Procedural level generation

Surfaces and speed — strategy pattern

Jump physics — Math.sin() parabola

Multi-state game — State Machine

Difficulty levels — DIFF_CFG object

AI opponent — targeting and navigation

Resource management — Energy system

Camera and world-space coordinates

Drawing characters in layers

Tower Defense architecture

Dynamic level generation — genLevel()

Bullet prediction — lead prediction

🏆 Project: Your own mini game

Phase 5 — Advanced Features & Publishing

localStorage — saving in the browser

Top 10 leaderboard implementation

Web Audio API — music and sound effects

Mobile D-pad and touch handling

🏆 Deploy — Netlify upload

Summary table