This is a solution to the Rock, Paper, Scissors challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the game depending on their device's screen size
- Play Rock, Paper, Scissors against the computer
- Semantic HTML5 markup
- CSS custom properties
- CSS Flexbox
- CSS Grid
- Mobile-first workflow
- BEM naming convention
- JavaScript classes
- JavaScript modules
I challenged myself to write the game logic using a mix of JavaScript classes and pure functions. A mix of OOP (or more accurately OLOO in JavaScript's case) and functional paradigms. OOP is useful for tracking the state of the game and accommodating more states if new features are added.
Using JavaScript modules, I wrote each class as its own file. Game elements are instances of a class and function in a semi-modular manner, in the spirit of React components, as they are added and removed from the DOM depending on the game's state and user's input.
Working with JavaScript classes also meant working with the idiosyncrasies of JavaScript's this keyword as well as using features such as arrow functions, and function methods such as call, apply, and bind to tame the this reference in relation to its calling context.
In addition, there are various pure helper functions, notably one to generate sub-elements that are too small to warrant its own class and one to generate the game results using conditional checks, that abstract away significant lines of code from the class declarations.