Gem Rush

Gem Rush is a simple HTML canvas game. The goal is to collect as many gems as possible within 20 seconds while moving around the game area with the lecture sprite character.

Overview

In this game:

• The timer lasts for 20 seconds.
• The player moves around the map to collect gems.
• Only one gem exists at a time.
• The gem changes its colour and location after a period of time.
• The game ends when the countdown reaches zero.

This lab practices:

• HTML canvas programming
• Working with modules written in the module pattern
• Playing audio in a web page

How to Run

Open index.html in a web browser. The game starts with a title screen. Click the start screen to begin.

Controls

• Left Arrow: Move left
• Up Arrow: Move up
• Right Arrow: Move right
• Down Arrow: Move down
• Spacebar: Speed up the player

Game Rules

• Collect gems by touching them with the player.
• When a gem is collected, the score increases and the gem is randomized to a new colour and position.
• If a gem stays too long, it is also randomized automatically.
• When the timer reaches zero, the game over screen appears and movement stops.

Project Structure

The main entry point is index.html. It loads the JavaScript modules and media resources used by the game.

JavaScript Files

• bounding_box.js - Bounding box utilities for collision detection
• sprite.js - Sprite animation and drawing logic
• player.js - Player character module
• gem.js - Gem module
• fire.js - Decorative fire module

Media Files

• background.png - Canvas background image
• player_sprite.png - Sprite sheet for the main player
• object_sprites.png - Sprite sheet for gems and fire
• background.mp3 - Background music
• collect.mp3 - Sound effect when a gem is collected
• gameover.mp3 - Music played when the game ends

Notes

• The game uses a <canvas> element for drawing the animated sprites.
• The UI overlays, such as the timer, start screen, and game over screen, are implemented with SVG.
• The code uses jQuery for event handling and initialization.

Learning Goals

This lab is designed to help you understand:

• Sprite animation on canvas
• Keyboard event handling
• Collision detection using bounding boxes
• Module-based JavaScript structure
• Audio playback in browser games