Vie live site here: Rick & Morty Adventures
Rick & Morty Adventures is a simple memory card game based on the Rick and Morty tv show. The application is for users of all ages that want to enjoy a classic memory card game.
- As a first time user I want to quickly understand what the application is about.
- As a first time user I want to get clear instructions on how to play the game and what the rules are.
- As a first time user I want the easily navigate the site and start a game.
- As a returning user I want to have an enjoyable experience while playing the game.
- As a returning user I want to be able to see and achieve a better score.
- As a frequent user I want to be able to master the game.
As the theme of the game is the tv-show Rick and Morty, I tried to use the colors that tipically appear on the show. I used the images of Rick and Morty to be able to create a palette.
Bistre, Maize and Amaranth Pink fits perfectly with the background image and gives a vibe of the actual tv-show.
Google Fonts was used to import the following fonts:
- The font Boogaloo was used for the titles and the majority of content. I think it has a playful appearance and fits perfectly with the theme of the game.
- The font Open Sans was used mainly in the instructions section. I think the font gives the site balance.
As the site has a specific theme, I used images from the Rick and Morty tv-show. I chose a background that displays the characters in the shows and for the flipcards I chose to have different characters.
- The home page is simple and intuitive. It display the site title and two buttons.
- The Play button will first display a prompt that encourages the users to input their names. After the name input, the game board will display.
- The Instructions button will display a pop-up with the rules of the game.
- The instructions feature display the rules of the game.
- Helps the user to understand how the game is played.
- Contains a Close button so the user can go back to the home page.
- The user now sees all the cards face down. The Timer will start once the user clicks on any card to flip it.
- Contains a Restart button so the user can restart the game at any moment.
- A pop-up message that appears once the users find all the card pairs.
- It informs the users that they won the game and displayes the score.
- Contains a Restart button so the users can restart the game again and beat the last score.
- HTML
- CSS
- JavaScript
- Figma - Used for wireframes
- Google Fonts - Used to import fonts
- VS Code - Used to develop the website
- Git - Used for version control
- GitHub - Used to store files and deploy
- Google Developer Tools - Used for troubleshooting, test features and styling
- FireFox Developer Edition - Used for troubleshooting, test features and styling
- Am I Responsive - Used to show the websites responsiveness on different devices.
- MDN Web Docs - Used for learning
I used GitHub pages to deploy the website:
- Log in to GitHub.
- Select the project's repository.
- Go to "Settings".
- Click on "Pages".
- In the Source section, select branch "Main" and then select "Root" from the dropdown menu.
- Click "Save".
- Wait a couple of seconds and GitHub will provide the link to deployed website.
- Log in to Github.
- Select project Repository.
- Click on the "Code" button.
- Copy the URL under HTTPS.
- Open VsCode.
- Log in to VsCode with your Github account.
- Press SHIFT + CMD + P (For Mac), type "Clone" and select "Git:Clone".
- Paste in the URL and press Enter to create the local clone.
Used w3c to validate HTML and CSS code and jshint for the JavaScript.
HTML
CSS
JavaScript
