Module 1: Introduction to JavaScript for Games

Objective: To introduce students to JavaScript in the context of game development.

Topics:

• The role of JavaScript in web gaming;
• Connecting JS to HTML and the basics of project structure;
• Syntax basics: variables, data types, functions;
• Working with the console and debugging code.

Practice:

• Displaying text and numbers on the screen;
• A simple interactive button that changes color/text when clicked;
• A mini-game called “guess the number”.

Module 2: DOM and event basics

Goal: teach students to control page elements and respond to user actions.

Topics:

• Document Object Model (DOM) for games;
• Keyboard and mouse events;
• Element manipulation: changing style, text, position;
• Basics of timers and setInterval / setTimeout.

Practice:

• Moving object when keys are pressed;
• Creating character control buttons;
• Animating a simple object using timers.

Module 3: Canvas API and basic graphics

Objective: to master the graphics component of 2D games.

Topics:

• What is Canvas and how to connect it;
• Drawing shapes and images on Canvas;
• Coordinate system and element sizes;
• Basics of animation with request Animation Frame.

Practice:

• Creating a game field;
• Animating a moving object;
• Creating a simple background and sprites.

Module 4: Game mechanics and logic

Objective: to teach students how to create interactive game elements.

Topics:

Fundamentals of game logic: game states, levels, points

• Collisions and collisions between objects;
• Controlling characters and enemies;
• Simple physics: speed, gravity, jumping.

Practice:

• The “Catch the Falling Object” game
• Implementing a scoring system
• A character that jumps and dodges obstacles

Module 5: Sprites and animation

Goal: Add visual appeal and character animation.

Topics:

• Sprites and sprite sheets;
• Character animation (walking, jumping);
• Collision handling with sprites;
• Background animation and parallax.

Practice:

• Character with movement animation;
• Animated enemies and objects;
• Creating a simple level with moving platforms.

Module 6: Sounds and interface

Goal: Add sound and interface elements to the game.

Topics:

• Inserting sound effects (HTML Audio, JS);
• Adjusting volume, playing events;
• Creating a HUD (points, health, timer);
• Pause and restart buttons.

Practice:

• Sounds when collecting items and collisions;
• Displaying points and character status;
• Pause/Play button.

Module 7: Working with game libraries

Objective: Speed up development using libraries and ready-made tools.

Topics:

• Phaser.js: basics and scene creation;
• Controlling characters, sprites, and animation in Phaser;
• Working with TileMap and levels;
• Pixi.js basics for visual effects.

Practice:

• Creating a small game in Phaser.js;
• Adding multiple levels and character animations;
• Using ready-made libraries to speed up development.

Module 8: Final project

Goal: Create a complete 2D online game using all the skills you have learned.

Tasks:

• Developing the game concept: genre, mechanics, design;
• Creating the game world and characters;
• Adding animation, sounds, and interface;
• Testing, bug fixing, publishing.

Practice:

• Fully completed game;
• Demo version for other students;
• Publishing in a browser or on a platform such as GitHub Pages.