Project Overview
This is an interactive simulation of a person riding a horse, built entirely within a single HTML file. It uses vanilla JavaScript for its logic, the HTML Canvas for rendering, and CSS for styling. All visuals, including the animated horse and rider, are drawn programmatically without using external image files. The simulation offers two modes: a "Free Roam" mode through a procedurally suggested landscape, and a "Maze" mode where the user must navigate a course defined by fences. The project is designed to be educational, demonstrating core principles of a 2D game engine, including a game loop, state management, animated vector sprites, and multi-platform input handling.
How to Use
- Touch: Touch anywhere on the screen to show the joystick. Drag further from the center to increase speed. Use a two-finger pinch to zoom in and out.
- Keyboard: Use W/S or ArrowUp/Down to change speed and A/D or ArrowLeft/Right to turn.
- Mouse: Click and hold on the canvas to have the horse automatically move towards your cursor.
Controls
- Toggle Mode: Click the "Switch to Maze/Free Roam" button to change the environment. The horse's position will be reset.
- Toggle Sound: Click the speaker icon to enable or disable sound effects. Sound is off by default and requires user interaction to activate the first time.
Technical Details
- Single-File Architecture: The entire application—HTML, CSS, JavaScript, and even world data—is contained in one file. This demonstrates a self-contained, portable web application.
- Rendering Engine: The simulation is rendered on an HTML
<canvas> element using its 2D context. A main game loop powered by requestAnimationFrame ensures smooth animation.
- Programmatic Graphics: All visuals are vector-style sprites drawn programmatically using Canvas API commands. The horse and rider are animated based on the horse's speed, with legs moving and the rider bouncing in the saddle.
- Pseudo-3D: A simple depth effect is achieved by sorting all drawable objects (trees, horse, fences) by their Y-coordinate before rendering each frame. This ensures objects that are "further away" (higher on the screen) are drawn behind closer objects.
- Advanced Touch Controls: The simulation features a dynamic joystick that appears at the user's touch point and supports pinch-to-zoom, providing an intuitive mobile experience.
- Sonification: Sound effects are generated in real-time using the Web Audio API for low-latency feedback. Hoof-step sounds are timed dynamically based on the horse's current speed.
Future Directions
- Improved Graphics: Implementing sprite sheets for more complex horse and rider animations (e.g., turning animations, idle animations).
- Dynamic Environment: Adding dynamic elements like wandering animals, changing weather, or a day/night cycle.
- Physics: Enhancing the movement physics to include acceleration, deceleration, and a more natural turning radius.
- Maze Objectives: Adding a timer, collectibles, or a scoring system to the maze mode to increase the challenge.
- Procedural Generation: Instead of using fixed JSON data, the free-roam world could be generated procedurally for infinite exploration.