A Virtual Reality Hackysack game prototype playable over the web. Use your virtual legs to keep the sack up. Best experienced with a VR Headset.
Uses the A-Frame web framework for VR.
Kicks - S D F J K L
Launch - Space
Reset - R
hack-preload.js - Components that need do be loaded before the game scene is loaded. Custom A-Frame components that generate and modify Three.js materials to apply to the glTF models.
hack-main.js - The main game loop, button input, animation and other main functionality.
hack-kicks.js - The raycasting and physics involved with each kick.
hack-domeManager.js - Manages the rotation for each of the wireframe domes.
hack-creditsManager.js - Manages the 'credits' and 'controls' information display, rotating them out of the scene when the player is playing and back in after the player is idle.
hack-songManager.js - Manages the song, adding layers to the music as the player's streak gets longer.
Kick Accuracy
The X force applied by each kick is determined by where the sack hits the kick ray compared to the kick ray's Hit Point (kick.hitPoint). For example here is a diagram showing the X force that would be applied by a kick on the player's left:
Knee hits (kick.type === 'KNEE') launch the sack away from the Hit Point based on the sack distance from the Hit Point:
The xVeloFix() function adds a small but cumulative amount of X force if the X force is below a certain value. This fixes the tendency of a hit at or near the hit point to land back at the hit point causing the sack to go straight up and down continuously.
Kick Timing
A well timed kick hits the sack between 70 ms and 150 ms after the player presses the button. If the kick is too early or too late it applies a relative multiplier to the X force and KickForce (or Y force). That is, early and late hits go farther out and not as high.
The Blender 3D .blend files are found in the src folder. The models folder contains the exported glTF (.glb) files for use with A-Frame.
Thanks to Jayson G. for testing VR Headset functionality and providing the demo video shown above.