2023: A Flat Rent Odyssey

Technology Used

We developed it using the HTML5 <canvas> element, which provides an API for drawing 2D graphics and animations, and JavaScript to implement the game's logic and manipulate the canvas elements.

Graphic Rendering

The game uses the 2D context of the canvas to draw graphic elements such as the background, player, enemies, bullets, and other objects. Functions like fillRect(), fillText(), among others, are used to draw shapes and text on the canvas.

Animations

Animations in the game are achieved by updating and redrawing the canvas at regular time intervals. This can be accomplished using the requestAnimationFrame() function or by using `setInterval()` to call a game update function at a specific frames-per-second (FPS) rate.

User Interaction

User interaction is captured through keyboard events. For example, to move the player, keyboard events like `keydown` and `keyup` are used, and to fire bullets, the letters 'a' and 'd' are used.

Collisions

The game implements collision detection between different elements, such as the player and enemies or bullets and enemies. These collisions are detected through checks of coordinate and size overlap of elements on the canvas.

Styles and Fonts

Attributes like fillStyle, strokeStyle, lineWidth, font, etc., are used to apply different styles, colors, and fonts to the graphic elements on the canvas.

Optimization

To avoid performance issues and excessive memory consumption, the game implements logic to remove elements that are no longer needed, such as bullets that have left the canvas, ensuring smooth and efficient operation.

Relative Coordinates

The application uses relative positions and sizes to place elements on the canvas. This means that coordinates and dimensions are calculated based on the canvas's size, making the game more flexible and adaptable to different screen resolutions.