Implement Basic Pixel FPS Raycast Demo in Multiplayer-FPS #48
Description
Overview
Create a basic pixel-style first-person shooter (FPS) demo using raycasting within the Armour/Multiplayer-FPS repository. This proof-of-concept should utilize only vanilla JavaScript and Canvas, providing a minimal, retro-styled 3D effect and player controls for educational or prototyping purposes.
Goals
- Integrate a raycasting engine into the project for simple pseudo-3D rendering.
- Set up a grid-based environment/map using an array where
1= wall and0= open space. - Allow WASD movement and view rotation for the player.
- Render enemies (red block for demo) when within player field of view.
- Ensure all logic is contained in a single HTML file for easy execution and learning.
Example Features
- Canvas-only 3D effect via raycasting
- Player controls & collision via map data
- Minimal enemy rendering (static sprite)
Stretch Ideas (Optional)
- Add textures for walls/floors.
- Enable shooting or enemy AI movement.
- Add HUD or scoring elements for enhanced experience.
Motivation: Demonstrates raycasting from scratch in JS and Canvas. Useful as a learning or prototyping resource.
Acceptance Criteria:
- WASD movement + rotation works in browser.
- Raycast engine draws walls in a pseudo-3D fashion.
- Enemy sprite is visible in player's FOV.
- Standalone HTML file, no dependencies.
See previous context in this conversation for reference code and further details.