Project Requirements
IGME-330-Fall-2021/project-3.mdResources Utilized
- JavaScript Raycasting - The Coding Train
- Canvas Delta Time Calculations - StackOverflow
- A Complete Guide To Flexbox - CSS Tricks
Noteworthy
This project utilizes Canvas to render out a customizable JavaScript stealth game.
Each game element is drawn using Canvas paths, with methods such as arc(), lineTo(), and moveTo().
The rest of the website is formatted using a CSS stylesheet and the Bulma CSS Framework.
A number of sliders below the game allow the user to alter the game's values in real-time.
A number of preset difficulties are also stored in a JSON file that can be applied through a dropdown above the sliders.
Player collision and enemy sight-cones are determined through raycasting, which is calculated mathematically every frame.
If an enemy catches sight of the player, their cone will grow and follow the player until they've lost sight of them for a long enough time.
The enemy patrol patterns are also very flexible, allowing for them to pause between waypoints, facing either towards the next waypoint or in the direction they were originally facing.