tricia-holmes / rock-paper-scissors

A Sailor Moon themed rock, paper, scissors game!

✨ Sailor Scout Battle! ✨

Sailor.Scout.Battle.mp4

Play Sailor Scout Battle here!

How to Play:

I created a rock, paper, scissors game with a Sailor Moon themed twist called ✨Sailor Scout Battle!✨

• Players will be greeted to a home page with an illuminating moon and stars background and upon clicking in the app will be able to hear an 8bit version of the Sailor Moon theme song!

• There are two game modes to Sailor Scout Battle, classic and difficult.

Classic Mode 🌊 🔥 🌙

---

• If a player chooses to play classic mode, they will be taken to the classic game page (dark purple background) and see three Sailor Scout fighters for their battle.

• The Sailor Scouts for classic are:

  1. Sailor Mercury 🌊,
  2. Sailor Mars 🔥,
  3. Sailor Moon 🌙

• The player's side will be on the left and their score will be kept in the wins underHuman 🌙.

• The opponent is a computer and their score will be kept on the right side in the wins under Computer 👾.

• In order to start a round, a player must select the fighter of their choice by clicking on one of the Sailor Scouts in the center of the page. Once a player has selected a fighter, then the round will play out.

• The player's fighter will go up against the computer's fighter and will see who wins by watching the Sailor Scouts battle in the middle.

• Whoever attacks wins and whoever falls loses. The winner will then celebrate 🎉

• If it's a draw, the chosen Sailor Scout fighters will stand idly by waiting for another scout battle to commence.

• The results will also be displayed in the subtitle under Classic Battle.

• After a round had been played the wins will be updated for the winner and the board will reset. It's now time to play another round!

• Want to change it up? There's a Change Game? button in the bottom left-hand corner. A player can click on this button to go back to the home page and select a different game mode.

Difficult Mode 🌊 🔥 🌙 💕 ⚡️

---

• If a player chooses to play difficult mode, they will be taken to the difficult game page (pastel purple blue background) and see five Sailor Scout fighters for their battle.

• The game is setup the same as classic with more fighters to choose from and more outcomes.

• The Sailor Scouts for difficult are:

  1. Sailor Venus 💕,
  2. Sailor Mercury 🌊,
  3. Sailor Mars 🔥,
  4. Sailor Moon 🌙,
  5. Sailor Jupiter ⚡️

• Just like with classic, a player can go back to the home page using the Change Game? button on the bottom left-hand side.

Win Map

---

Context + Resources:

Early on in developement, I knew I would like for the game to have a Sailor Moon theme with an animated background in an 8bit retro game aesthetic. A very specific style, but I was very hopeful it could all come together!

I was so lucky to find the sprites of my dreams on The Spriters Resource. Someone had uploaded a spritesheet from an old Nintendo DS Italian Sailor Moon game called Sailor Moon: La Luna Splende.

Besides setting up the initial data model for the game, finding these sprites was my first huge win!

Along with finding the sprites, another amazing find was this animated background on Etsy by KaeriCorner. Originally, it was created with text for Twitch Strems. They were so kind and updated the background to not have any text so it could be used as the background for the game. I ended up getting 3 varying color schemes of this background so each screen in the game has a subtly different background.

After getting the game logic setup and the placeholder CSS and HTML, I focused on getting the CSS Animations created. The Sailor Scouts are animated using CSS Keyframes. In order to get the flow right, I used Figma to splice out the sprites I needed from the original spritesheets and then created my own spritesheets. Each Sailor Scout needed to have the same dimensions in order to have a minimal amount of CSS classes and keyframes. Below is an example of a spritesheet I created in Figma. The Sailor Scout first got spliced out of the original sheet, then was equally spaced out and placed with colorful squares to help visualize. Once all the frames were completed for the Sailor Scout, the spritesheet was exported with a transparent background.

The final fun find for this project was discovering that there is an awesome 8bit version of the Sailor Moon theme song on Amazon by 8 Bit Universe.

Installation Instructions

• Fork this repo to your own Github account
• Clone the repository to your local machine
• cd into the repo
• View the project in the browser by running open index.html in your terminal

Contributors:

Tricia Holmes