Module 1: Introduction to Browser Game Development

Objective: To introduce students to the basics of web gaming and gameplay.

Topics:

• What are browser games and how do they work?
• Basics of web development for games: HTML, CSS, JavaScript;
• Game page structure: Canvas, DOM, and events;
• Developer tools: browser, code editor, Git.

Practical work:

• Creating a simple HTML page with Canvas;
• Displaying text and graphics on the screen;
• Setting up the development environment.

Module 2: JavaScript basics for games

Objective: to learn the key JS constructs needed to create games.

Topics:

• Variables, data types, functions, arrays, and objects;
• Conditional statements and loops;
• Event handling (keyboard, mouse);
• Basics of code debugging.

Practice:

• Implementing a simple interactive element (e.g., a moving square);
• Creating buttons and responding to clicks.

Module 3: Canvas and animation

Objective: learn how to draw and animate objects on Canvas.

Topics:

• Introduction to the Canvas API;
• Drawing shapes and images;
• Working with coordinates and coordinate systems;
• Basics of animation with requestAnimationFrame.

Practice:

• Animating a moving object;
• Creating a simple game field;
• The simplest game loop.

Module 4: Game logic

Objective: to teach students how to create interactive and dynamic games.

Topics:

• Game states (start, play, pause, end);
• Collisions and collisions between objects;
• Character control (keyboard, mouse);
• Scoring and points.

Practice:

• Creating a simple game called “Catch the Object”;
• Implementing a score counter;
• Setting up game end rules.

Module 5: Working with game libraries

Objective: to introduce students to frameworks that simplify game development.

Topics:

• Phaser.js: basics and project structure;
• Pixi.js: visual effects and sprites;
• Sprite animation and character control;
• Sound effects in games.

Practice:

• Creating a small game on Phaser.js;
• Adding animation and sound effects;
• Customizing the user interface.

Module 6: Advanced features

Objective: to show how to improve the game and add additional features.

Topics:

• Generating levels and random events;
• Saving game progress (localStorage);
• Basic server interaction (optional);
• Optimization and performance.

Practice:

• Adding a level system;
• Saving game results in the browser;
• Optimizing animation and game speed.

Module 7: Final project

Goal: apply all the knowledge you’ve gained and create a full-fledged browser game.

Tasks:

• Developing the game concept: genre, rules, design;
• Implementing game mechanics and interface;
• Adding sounds, animations, and a score counter;
• Publishing the game in a browser and demonstrating it.

Practice:

• Creating a game from scratch;
• Testing and debugging;
• Presenting the project to other students.