Toolbox Aid

October 20th, 2024 4:04 PM Mr. Q Categories: JavaScript

Welcome to the Building Interactive Canvas-Based Games series! In this learning journey, you’ll explore how to develop canvas-based games using JavaScript. By understanding the hierarchy of classes and files in a structured project, you’ll gain the skills to build interactive games.

This post will cover the essential classes and methods used to manipulate the game canvas, handle user mouse input for full screen, and maintain smooth gameplay. Additionally, we will break down the project’s file structure, which ties together the different components of the game & engine.

---

1. Project Structure and Class Hierarchy
The game project is organized into multiple files and classes, each serving a distinct purpose. Here’s a breakdown of the file structure and class responsibilities:

/HTML-JavaScript-Gaming/
├── Game Engine Template
│   ├── index.html    # Main HTML file for the game canvas
│   ├── styles.css    # CSS for styling the game canvas
│   ├── game.js       # JavaScript game code
│   ├── globals.js    # game spicific global variables
├── scripts (reusable code)
│   ├── fullscreen.js # Fullscreen handling logic
│   ├── canvas.js     # Canvas drawing utilities and methods
│   ├── game.js       # Game loop and logic
│   ├── global.js     # Global variables for canvas settings
│   ├── (more to be added as the series continues)

Class Hierarchy

Fullscreen (fullscreen.js)

• Manages fullscreen functionality and canvas resizing.
• Key methods:
  • initialize(): Sets up event listeners to enable toggling fullscreen.
  • openFullscreen(): Switch the canvas to fullscreen mode.
  • closeFullscreen(): Exits fullscreen mode.
  • toggleFullscreen(): Toggles between fullscreen and windowed mode.
  • resizeCanvas(): Resizes the canvas based on screen or window dimensions.

CanvasUtils (canvas.js)

• Provide utility methods to draw on the canvas.
• Key methods:
  • initCanvas(ctx): Initializes the canvas with a background color.
  • drawFPS(ctx): Displays the current FPS on the canvas.
  • drawBorder(ctx): Draw a border around the canvas.
  • drawLine(ctx, x1, y1, x2, y2): Draws a line between two points.
  • drawCircle(ctx, point): Draws a circle at a specified point.

gameLoop (game.js)

• The main game loop that handles frame updates and animation.
• Key methods:
  • gameLoop(ctx, deltaTime): Continuously updates the canvas with game objects and logic.
  • Imports and utilizes CanvasUtils and Fullscreen for rendering and interactivity.

Global Variables (global.js)

• Defines global variables that control canvas size, scaling, and FPS settings.
• Examples:
  • window.gameAreaWidth: Width of the game canvas.
  • window.gameScaleWindow: The scale factor for the game canvas.
  • window.fpsShow: Toggle for showing FPS in the game.

---

Unique List of Methods and Commands to Learn for each class (*.js)

Here’s a breakdown of unique commands and methods used across the projects:

Canvas Commands

• Canvas Drawing & Manipulation:
• getContext('2d'): Acquire the 2D drawing context.
• fillRect(x, y, width, height): Draw a solid rectangle on the canvas.
• arc(x, y, radius, startAngle, endAngle): Draw circular or arc shapes.
• setTransform(a, b, c, d, e, f): Apply transformations (scaling, translation, etc.) to the canvas.
• clearRect(x, y, width, height): Clear a portion or the entire canvas.
• Text Rendering:
• fillText(text, x, y): Render text, useful for displaying scores, messages, or FPS.
• FPS & Animation:
• requestAnimationFrame(callback): Repeatedly calls the game loop for rendering frames.
• performance.now(): Get the current timestamp for frame delta calculation.

Fullscreen & Input Handling

• Fullscreen Commands:
• requestFullscreen(): Enter fullscreen mode.
• exitFullscreen(): Exit fullscreen mode.
• addEventListener('fullscreenchange', callback): Listen for changes in fullscreen mode.
• Event Listeners:
• addEventListener('click', handler): Handle click events on the canvas.
• addEventListener('resize', handler): Dynamically resize the canvas when the window changes size.

Canvas Utilities

• Canvas Utility Methods:
• drawFPS(ctx): Displays the current frames per second (FPS).
• drawBorder(ctx): Draws a border around the canvas area.
• drawLine(ctx, x1, y1, x2, y2): Draws a straight line between two points.
• drawCircle(ctx, x, y, radius): Draws a circle at the specified coordinates.

---

Summary

By understanding the class hierarchy and methods used in each module, you will be equipped with the tools necessary to build and manage a game project. The combination of canvas utilities, fullscreen functionality, and an efficient game loop lays a strong foundation for creating interactive, dynamic games using JavaScript.

This learning series focuses on these methods and their practical implementation, ensuring that by the end, you’ll have a solid grasp of canvas-based game development.

Let’s start building your game!