ROCK,PAPER,
SCISSOR
A Deep Sea Duel.
This game is an interactive underwater version of Rock, Paper, Scissors built with JavaScript to demonstrate conditional logic, randomization, score tracking, and dynamic UI updates, combining engaging visuals with functional game logic.
OBJECTIVE/SOLUTION
01The objective of this project was to implement core basic JavaScript concepts that we learned, such as conditional logic, randomization, score tracking and dynamic interface updates.
Solution:
Turning a simple game of Rock, Paper, Scissors into a fun and visual experience, as a way to show an understanding of the basic JavaScript concepts learned during the duration of our course. This strategy game and visual engagement goes beyond the traditional one click version of the game.
DESIGN PROCESS
02Using Figma and illustration tools, I helped with structuring the layout, the star system and overall visual hierarchy. I focused on making the interactions clear, so when it came to the development phase I understood how the logic would work.
Assets
Enemy Cards
Player Cards
Player Points
CODING/DEVELOPMENT
03The game was built using JavaScript and developed in Visual Studio Code. In this course, we were encouraged to use AI as long as we understood the content, so I utilized tools such as Cursor and GitHub Copilot to assist with logic and structure.
Challenges
One of the main challenges I faced was displaying the selected card in the center of the screen. This was new to me, and it required careful handling of DOM manipulation and dynamic updates to ensure the correct choice appeared at the right time. I also had to make sure that all elements, including the score and star system, stayed aligned and coordinated properly after each interaction.
While AI helped with the initial structure, integrating everything together was more tedious than expected. I had to debug, fix file paths, and reorganize parts of the project to ensure everything worked smoothly and consistently.
VSFINAL PRODUCT
04Results
The final project demonstrates a complete interactive game loop, where players can choose their card, play against a randomized opponent, and see the score update live. It balances usability with engaging visuals, making the experience fun while clearly showing the underlying JavaScript logic.
Reflection
Overall, I think this was a good learning experience utilizing AI, as well as implementing our knowledge of JavaScript fundamentals. The final product successfully integrates interactive UI elements with dynamic game logic.