✦
RPS
× My role: UX/UI designer & Front-End Developer
× Type of project: Game page | Front-end Development
The Rock, Paper, Scissors game is a classic, reimagined with a vintage 1950's Bauhaus design aesthetic and an energetic color palette. This blend of retro warmth and modern vibrancy creates an engaging and visually pleasing gaming experience.
Initialization
The HTML file establishes the structure of the game, while the linked CSS files defines global styles for the body and HTML elements, setting a background image, color scheme, and font styles.
The Homepage
Implemented navigation between game sections based on user choices. Utilized event listeners to capture user clicks on rock, paper, and scissor buttons.
The makeChoice function determines the user's choice based on the clicked button, allowing for smooth navigation to the relevant game section.
Your choice
Computer choice
Developed logic to randomly select computer choices (rock, paper, or scissors). The JavaScript files (weapon.js, weaponR.js, weaponP.js) handle the dynamic changes in the computer's choice, simulating an animated selection.
Game results
Calculated game results (win, lose, tie) based on user and computer choices.
Redirected users to result pages with appropriate outcomes.
Background
✦
01 Coding tools utilized
HTML / CSS/ Javascript
02 Dynamic user interaction
Integrated event listeners in JavaScript to capture user choices dynamically.
Implemented smooth navigation between game sections based on user clicks.
03 Game Logic
Developed JavaScript logic to determine game results (win, lose, tie) based on user and computer choices.
04 Visual feedback
Incorporated visual feedback through dynamic changes in the computer's choice, adding an animated touch to the game.
✦
SCHEDULE AN INTERVIEW!
REACH OUT
AND SAY HELLO
✦ DESIGNED AND BUILT BY NATALI OVALLES 2024 ✦