Module 1: Introduction to Web Gaming

Objective: To introduce students to the world of web games and browser capabilities.

Topics:

• What are web games and why are they popular?
• Basics of HTML, CSS, and JavaScript for games;
• Overview of tools: browser, code editor, DevTools;
• Structure of a simple browser game.

Practice:

• Creating your first HTML page with a game canvas;
• Adding a button and simple text to the page;
• Setting up your work environment.

Module 2: JavaScript Basics for Games

Objective: to give students the basic JS skills they need for interactivity.

Topics:

• Variables, data types, and functions;
• Conditional statements and loops;
• Working with keyboard and mouse events;
• Console and code debugging.

Practice:

• Moving square when arrow keys are pressed;
• Start Game and Reset Game buttons;
• Guess the Number mini-game with result display.

Module 3: Drawing and Animating on Canvas

Objective: Teach students how to create graphics and simple animations.

Topics:

• Introduction to the Canvas API;
• Drawing shapes, text, and images;
• Basics of animation with requestAnimationFrame;
• Working with coordinates and object sizes.

Practice:

• Animated ball moving across the screen;
• Simple game field with background;
• Character that responds to keys.

Module 4: Game logic and collisions

Goal: to provide the basics of interactive gameplay.

Topics:

• Creating game states (start, play, pause, end);
• Collisions and object interactions;
• Scoring and winning/losing rules;
• Simple motion physics (speed, direction).

Practice:

• The “Catch the Falling Object” game;
• Score counter and loss processing;
• Moving character and obstacles.

Module 5: Visual effects and sound

Goal: to make the game more lively and interesting.

Topics:

• Inserting sounds (HTML Audio, JS);
• Sprite and background animation;
• Collision and bonus effects;
• HUD interface settings: points, health, timer.

Practice:

• Adding sounds when collecting items;
• Animating bonuses and enemies;
• Visual effects during collisions.

Module 6: Simple games on Phaser.js (optional)

Goal: to demonstrate the capabilities of game frameworks.

Topics:

• Introduction to Phaser.js;
• Creating scenes and managing sprites;
• Simple animations and object interactions;
• Managing difficulty levels.

Practice:

• Creating a small platform game in Phaser;
• Character, enemies, and collecting bonuses;
• Pause button and level restart.

Module 7: Final project

Goal: apply all the skills you have learned and create a full-fledged browser game.

Tasks:

• Choosing a game concept: genre, goal, rules;
• Creating the game world and characters;
• Adding animations, sounds, and interface;
• Publishing the game in a browser.

Practice:

• A fully finished game with a difficulty level;
• A mini-game with points, bonuses, and enemies;
• Demonstrating the project to other students.