DEV Community

loading...
Cover image for Paper, Rock, Scissors Game Planning Guide

Paper, Rock, Scissors Game Planning Guide

JC Smiley
Front End Developer with a focus on React (web) and React Native (mobile), Code Connector national team Online Content Manager and a leader for the Memphis chapter, Gardner, and Outdoor Enthusiast
・3 min read

I think building games is the absolute greatest way to learn how to code and express yourself. The best part is that you can recreate any game and make it authentically you with unique designs and business logic. It is exhilarating to create a simple to understand UI but at the same time fun & challenging.

πŸ˜‡ My hope is that you build this as quickly as possible. Then rebuild it in your image and in a way that shows the world how inspiring you are.

Directions πŸ—Ί

You can use any framework or basic HTML, CSS, & JavaScript. It’s essential to make yourself more job ready by utilizing good git commit practices, coding practices, and hosting your project so it can be demoed by others.

The purpose of this guide is to point you in a direction so you can spend more time coding then planning. The primary question, "If given a small project, can you build it within a small time frame"?

Users Stories πŸ“ƒ

  • For each iteration of the game, an user can pick either paper, scissors, or rock as a choice
  • For each iteration of the game, the computer will choose a random option of the three choices to play against the user.
  • For each iteration of the game, an user can visually see what they choose and what the computer choose.
  • For each iteration of the game, an user will immediately know the outcome of their choice vs the computer choice.
  • An user can see a score that is continuous beyond each iteration of the game.
  • An user can use an UI element to play again.

Suggested Wireframes πŸ”

🎈 This section is a suggestion. Yours can look however you like as long as it has the basic functionality described in the user stories. A hot tip is to code with the end goal in mind. Have a wireframe of what you are building drawn before you start coding.

A tip is to design color-less (except for images) wireframes to focus on the UI/UX before later adding color.

Suggested Wireframe of the UI in a Mobile responsive design
Wireframe of the paper, scissors, rock game in mobile view.

Suggested Wireframe of the UI in a Tablet responsive design
Wireframe of the paper, scissors, rock game in tablet view.

Suggested Wireframe of the UI in a Desktop responsive design
Wireframe of the paper, scissors, rock game in desktop view.

Another tip is to add colors and designs after:

  1. User feedback on the colorless wireframes
  2. Thinking through how the app will change visually based on user actions.
  3. Considering how the data or state will change in the app

Final iteration on the design
Before and after image of the wireframe with colors and design added

Suggested Todo List 🏁

🎈 This section is a suggestion. I highly recommend using something to organize your thoughts into small doable tasks.

My approach to coding is to build out the visual framework (HTML) and styling/responsive design (CSS) before adding functionality.

Todo list of actions to complete the visual parts of the project

Todo list of actions to complete the logical functionality of the project

Resources πŸ› 

Rock, Paper, Scissors Game Tutorials/Inspirations

Task Manager

Wireframes

Images, SVGs, Etc.

Summary 😎

⭐ Stay tuned for a follow-up post that will include GIFs of a working solution, code examples, a link to a demo, GitHub repository as a guide, and more!

This is the second project in a series of 8 front-end focus projects for the Front-end Developer Finishing Academy. Each project will have 3 blog posts to help aspiring developers:

  1. Planning blog
  2. Development tips blog
  3. Updating your project to the next step beyond the basic skills blog. Includes: Accessibility, Animation, UI/UX Concepts, Good Git Commits, API Usage.

I’m not trying to teach you how to code but to assist you in building basic projects quickly to build a firm foundation of coding skills. Similar to a job, can you build software with a set of user stories and wireframes?

Discussion (0)