Frontend Mentor - Rock, Paper, Scissors solution

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.

Table of contents

• Frontend Mentor - Rock, Paper, Scissors solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • Continued development
  • Author

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

The challenge

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
• Maintain the state of the score after refreshing the browser (optional)
• Bonus: Play Rock, Paper, Scissors, Lizard, Spock against the computer (optional)

Screenshot

Links

• Solution URL: Add solution URL here
• Live Site URL: Github pages

My process

Built with

• Semantic HTML5 markup
• CSS absolute and relative position
• CSS flexbox
• Mobile-first workflow

What I learned

Instead of doing a monster if statement to check if the player win or lose, I used a 2D array to represent every situation

const RULE_SET = [
	[0, -1, 1, 1, -1],
	[1, 0, -1, -1, 1],
	[-1, 1, 0, 1, -1],
	[-1, 1, -1, 0, 1],
	[1, -1, 1, -1, 0]
];

const RESULT_FEEDBACK = {
	"-1":"YOU LOSE",
	"0":"TIE",
	"1":"YOU WIN"
};

// usage
let result = RULE_SET[playerChoice][cpuChoice];

This way, it's super easy to know if the player won or lost the battle.

Continued development

The area I would like to focus more is CSS animation. My project here have a minimum amount but it sure would help to make the game feel more alive.

Author

• Github - Z0ul0u25
• Frontend Mentor - @yourusername