Skip to content

Latest commit

 

History

History
61 lines (43 loc) · 4.11 KB

README.md

File metadata and controls

61 lines (43 loc) · 4.11 KB

VR-wordle-front-end

Table of Contents

Introduction

This project is an attempt to recreate Wordle in VR using React Three Fiber and React XR. The most up to date release can be found deployed at this link. This project has not been tested with a wide range of VR devices and was built with Oculus Quest 2 in mind and should work as long as one right handed controller is connected. It is not compatible with Oculus Go. The game plays as normal Wordle, where an alphabet of blocks can be found on the table infront of the player, and a set of five pillars behind. To make a selection the player needs to place their chosen letters on each pedestal and then click the submit button. If any letters have been lost or displaced into unreachable locations the reset button can be used to drop all the letters back to the table. After a guess, the letters chosen that were not used will disappear from the game world and another guess can be made, until the correct word has been found or the player uses up all six guesses!

Gameplay

Landing Page

Screenshot 2022-03-03 at 15 23 50

The first page the user will be directed to will be the Homepage, where users can enter a Username or have one randomly generated. The user can also choose to toggle Colour-Blind Mode, which changes the colour-palette for the grid to be more accessible for those who are colour-blind. After submitting a username, the page will begin to load the app, after which a prompt will appear at the bottom of the page, allowing the user to enter a WebXR-powered interactive experience.

Main Game

Screenshot 2022-03-03 at 13 21 21

Entering VR here allows you to play the game fully. Pick up the letters and place them on the pedestals in front of you. Once your guess has been constructed, point at the SUBMIT button on your right and click select to check your guess against the day's answer. If you lose a few blocks or they get out of reach, hit the red RESET to your left to respawn the current pool of letters. When the game ends, either after you guess correctly or run out of guesses, the app will close the current XR session and redirect you to the results page, where you can see how you did compared to other users.

Screenshot 2022-03-03 at 15 24 37

Screenshot 2022-03-03 at 15 25 26

Screenshot 2022-03-03 at 15 26 53

Screenshot 2022-03-03 at 15 30 03

Results Page

Screenshot 2022-03-03 at 16 34 37

Assets

Technologies

  • react-three/cannon @4.7.0
  • react-three/drei @8.10.6
  • react-three/fiber @7.0.26
  • react-three/xr @3.4.0
  • use-gesture/react @10.2.6
  • date-fns @2.28.0
  • react @17.0.2
  • react-spring @9.4.3
  • three @0.137.5

Contributors