🎮 HTML + JavaScript: Simple Game Development
📘 Module Overview
This learning module builds on the student’s prior knowledge of drawing basic shapes using HTML
Canvas. In this lesson, students will learn how to create a simple playable game by applying core game
development concepts such as movement, controls, collision detection, scoring, and a basic game loop.
By the end of this module, students will have created a fully working mini-game using only HTML,
JavaScript, and Canvas.
🎯 Learning Objectives
After completing this module, students will be able to: - Understand what a game loop is and how it
works - Control objects using keyboard inputs - Move objects smoothly on the canvas - Detect collisions
between game objects - Track score and player lives - Apply simple game rules (win / lose) - Organize
game code properly
🧠 Prerequisites
Students should already know: - Basic HTML structure - JavaScript variables and functions - Drawing
shapes on HTML Canvas (fillRect, arc, etc.)
🧩 What Makes a Game?
A simple game usually includes: - A player (something you control) - Controls (keyboard or touch) -
Movement - Obstacles or targets - Rules (score, lives, game over) - A game loop (updates and redraws
the game)
🖼️ Game Canvas Setup
Create the HTML canvas where the game will run.
Why this is needed:
• The <canvas> element is the game screen
• getContext("2d") allows us to draw shapes and text
• This setup is required before anything can be drawn or animated
Sample Code:
<canvas id="gameCanvas" width="400" height="500"></canvas>
<script>
const canvas = [Link]("gameCanvas");
const ctx = [Link]("2d");
[Link] = "blue";
[Link](150, 200, 100, 100);
</script>
🔁 The Game Loop
Why this is needed:
• Games must update and redraw continuously
• The loop keeps the game alive
• requestAnimationFrame makes animations smooth and efficient
Sample Code:
function gameLoop() {
[Link](0, 0, [Link], [Link]);
// draw player placeholder
[Link] = "green";
[Link](180, 450, 40, 20);
requestAnimationFrame(gameLoop);
}
gameLoop();
🎮 Player Object
Why this is needed:
• Groups player data into one object
• Makes movement and drawing easier to manage
• Allows quick changes to size, speed, or position
Sample Code:
let player = {
x: 180,
y: 450,
width: 40,
height: 20,
speed: 5
};
function drawPlayer() {
[Link] = "green";
[Link](player.x, player.y, [Link], [Link]);
}
⌨️ Keyboard Controls
Why this is needed:
• Allows the player to control the game
• Key tracking prevents choppy movement
• keydown and keyup create smooth continuous motion
Sample Code:
let keys = {};
[Link]("keydown", e => keys[[Link]] = true);
[Link]("keyup", e => keys[[Link]] = false);
function movePlayer() {
if (keys["ArrowLeft"] && player.x > 0) {
player.x -= [Link];
}
if (keys["ArrowRight"] && player.x + [Link] < [Link]) {
player.x += [Link];
}
}
🚀 Movement & Physics (Simple)
Why this is needed:
• Updates player position every frame
• Connects keyboard input to movement
• Introduces the idea of game physics using simple math
Sample Code:
function update() {
movePlayer();
}
💥 Collision Detection
Why this is needed:
• Detects when objects touch or overlap
• Used for catching items or hitting obstacles
• This rectangle method is beginner-friendly and fast
Sample Code:
function isColliding(a, b) {
return a.x < b.x + [Link] &&
a.x + [Link] > b.x &&
a.y < b.y + [Link] &&
a.y + [Link] > b.y;
}
🧮 Score and Lives
Why this is needed:
• Gives the player goals and consequences
• Makes the game more engaging
• Text display provides real-time feedback
Sample Code:
let score = 0;
let lives = 3;
function drawHUD() {
[Link] = "black";
[Link] = "16px Arial";
[Link]("Score: " + score, 10, 20);
[Link]("Lives: " + lives, 320, 20);
}
☠️ Game Over Condition
Why this is needed:
• Defines when the game should stop
• Prevents further updates after losing
• Displays clear feedback to the player
Sample Code:
let gameOver = false;
function checkGameOver() {
if (lives <= 0) {
gameOver = true;
[Link] = "red";
[Link] = "30px Arial";
[Link]("GAME OVER", 100, 250);
}
}
🧼 Code Organization
Best Practices for Beginners:
• Separate sections for:
o Variables
o Functions
o Event listeners
• Use clear function names
• Comment important logic
🏁 Exercise: Mini Game
🎯 Game Concept Example:
“Catch the Falling Objects”
Game Rules:
• Player moves left and right
• Objects fall from the top
• Catch = +1 score
• Miss = -1 life
• Game over when lives reach 0