Input & User Interaction
Motivation: Understand how the game receives and processes user input from keyboard, mouse, or touch events.
Overview: The InputManager class in src/input/input-manager.ts is responsible for managing all input events.
// src/input/input-manager.ts
class InputManager {
private _keysDown: Set<string>; // Store keys currently pressed
private _keysPressed: Set<string>; // Store keys pressed in the current frame
private _mouseDown: boolean; // Flag for mouse button down
private _mousePosition: { x: number; y: number }; // Store mouse position
private _touchPosition: { x: number; y: number }; // Store touch position
private _touchStart: boolean; // Flag for touch start
private _touchEnd: boolean; // Flag for touch end
private _previousTouchPosition: { x: number; y: number }; // Store previous touch position
constructor() {
// Initialize instance variables
this._keysDown = new Set();
this._keysPressed = new Set();
this._mouseDown = false;
this._mousePosition = { x: 0, y: 0 };
this._touchPosition = { x: 0, y: 0 };
this._touchStart = false;
this._touchEnd = false;
this._previousTouchPosition = { x: 0, y: 0 };
// Event Listeners for keyboard, mouse, and touch events
window.addEventListener('keydown', this.onKeyDown);
window.addEventListener('keyup', this.onKeyUp);
window.addEventListener('mousedown', this.onMouseDown);
window.addEventListener('mouseup', this.onMouseUp);
window.addEventListener('mousemove', this.onMouseMove);
window.addEventListener('touchstart', this.onTouchStart);
window.addEventListener('touchmove', this.onTouchMove);
window.addEventListener('touchend', this.onTouchEnd);
}
// Event Handlers for keyboard, mouse, and touch events
private onKeyDown = (event: KeyboardEvent) => {
// ... logic to handle key down events
};
private onKeyUp = (event: KeyboardEvent) => {
// ... logic to handle key up events
};
private onMouseDown = (event: MouseEvent) => {
// ... logic to handle mouse down events
};
private onMouseUp = (event: MouseEvent) => {
// ... logic to handle mouse up events
};
private onMouseMove = (event: MouseEvent) => {
// ... logic to handle mouse move events
};
private onTouchStart = (event: TouchEvent) => {
// ... logic to handle touch start events
};
private onTouchMove = (event: TouchEvent) => {
// ... logic to handle touch move events
};
private onTouchEnd = (event: TouchEvent) => {
// ... logic to handle touch end events
};
// Methods to retrieve input state
isKeyDown(key: string): boolean {
// ... logic to check if key is currently pressed
}
isKeyPressed(key: string): boolean {
// ... logic to check if key was pressed in the current frame
}
isMouseDown(): boolean {
// ... logic to check if mouse button is currently pressed
}
getMousePosition(): { x: number; y: number } {
// ... logic to return current mouse position
}
isTouchStart(): boolean {
// ... logic to check if touch start event occurred
}
isTouchEnd(): boolean {
// ... logic to check if touch end event occurred
};
getTouchPosition(): { x: number; y: number } {
// ... logic to return current touch position
};
}
Input Handling:
The InputManager class handles various input events:
Keyboard Events:
onKeyDown: This method captures keyboard key presses.onKeyUp: This method captures keyboard key releases.
Mouse Events:
onMouseDown: This method captures mouse button presses.onMouseUp: This method captures mouse button releases.onMouseMove: This method captures mouse movement.
Touch Events:
onTouchStart: This method captures touch events when a finger touches the screen.onTouchMove: This method captures touch events when a finger moves on the screen.onTouchEnd: This method captures touch events when a finger lifts off the screen.
Input State Retrieval:
The InputManager provides methods for retrieving current input state:
isKeyDown(key: string): Checks if a specific key is currently pressed.isKeyPressed(key: string): Checks if a specific key was pressed in the current frame.isMouseDown(): Checks if the mouse button is currently pressed.getMousePosition(): Returns the current mouse position.isTouchStart(): Checks if a touch start event has occurred.isTouchEnd(): Checks if a touch end event has occurred.getTouchPosition(): Returns the current touch position.
Examples:
1. Handling Key Presses:
// Example: Moving the Pacman using arrow keys
const inputManager = new InputManager();
update() {
if (inputManager.isKeyDown('ArrowUp')) {
pacman.moveUp();
} else if (inputManager.isKeyDown('ArrowDown')) {
pacman.moveDown();
} else if (inputManager.isKeyDown('ArrowLeft')) {
pacman.moveLeft();
} else if (inputManager.isKeyDown('ArrowRight')) {
pacman.moveRight();
}
}
2. Handling Mouse Clicks:
// Example: Starting the game with a mouse click
const inputManager = new InputManager();
update() {
if (inputManager.isMouseDown() && !gameStarted) {
startGame();
}
}
3. Handling Touch Events:
// Example: Controlling Pacman with touch input
const inputManager = new InputManager();
update() {
if (inputManager.isTouchStart()) {
// Get touch position
const touchPos = inputManager.getTouchPosition();
// Calculate direction based on touch position
// ...
// Move Pacman
pacman.move(direction);
}
}
Source:
