Riddle Me Batman

View the live project here.

Goal for this Project

The goal of this project is to save Robin by guessing words set forth by The Riddler. These words will be associated with other superheroes/villains from the DC Universe. The player will get to choose letters from the whole english alphabet in order to spell out the hero/villain that he/she thinks The Riddler is referring to. (You) the user are Batman aka your own username and your job is to save Robin who is currently kidnapped. The player will have 6 chances at guessing out the word otherwise The Riddler will hang Robin.

Table of Contents

• UX
  • User Goals
  • User Stories
  • Site Owners Goals
  • User Requirements and Expectations
    • Requirements
    • Expectations
  • How to Play
  • Design Choices
    • Fonts
    • Colours
    • Images
    • Structure
  • Wireframes
  • Features
    • Existing Features
    • Features to be implemented
  • Technologies used
    • Languages
    • Libraries and Frameworks
    • Tools
  • Testing
    • UX Testing
    • Code Validation
    • Bugs
    • Unfixed Bugs
  • Deployment
  • Credits

UX

User Goals

• Type in a username
• View High Scores
• Exit the Game

User Stories

• As a user, I want to be able create a user name
• As a user, I want to read the rules
• As a user, I want to skip through game instructions if required
• As a user, I want to know the outcome of the game

Site owners Goals

• Have a visual presentation of the game
• Give the user feedback on performance
• Ensure that there is validation for expected keystrokes on all user inputs
• Simple user input instructions

User Requirements and Expectations

Requirements

• Single page layout
• Feedback on performance
• Clear instruction as to when the game starts and finishes
• Validation of user inputs
• Feedback to the user on their input to the game

Expectations

• I expect to have a username
• I expect to know when the game starts and finishes
• I expect the game not to crash if the incorrect input is entered
• I expect feedback on performance

  Back to Top
 

How to Play

• Will play like the standard paper and pencil game of hangman
  • 1 Player Game
  • Words will be randomized
  • Lives will be deducted for incorrect guesses or same letter guesses
  • The player creates a username
  • Words are completely randomized
  • The user decides what letters they choose
• Player will be given 6 chances to figure out the word
• If player can't figure out the word they lose the game
• If player figures out the word they win the game then choose to play again or not
  • Choosing to play again randomizes a new word
  • Choosing not to play again takes the user back to the main menu

  Back to Top
 

Design Choices

Fonts

The terminal that was provided by Code Institute to complete this project, used a standard monospace font. Which is the font I decided to keep using.

Colours

The colour scheme I have chosen is based on what The Riddler uses as his colours in the comics Riddler Costume. Which was a bright lime green and electric purple. I used Coolors to create the colours myself instead of generating them randomly since I already knew what I wanted. Contrast checker was used to contrast the colours as my background choice with a black foreground text. Only the electric purple didn't pass in one catergory. Regardless I won't have text over these colours since they will only be the background colors and not run in the termimal.

Colour Scheme

Images

No images were used for this game, however, to have the title stand out, I used patorjk.com with the font set to Calvin S to create giant text that would appear as though it's an image on the home terminal.

Structure

The structure of this project has been mapped out using App Diagrams, all the shapes were chosen by me to diagram the flow of the project.

I created 3 choice inputs for the start of the game.

1. Start Game
2. High Scores
3. Exit

From there the logic can be followed with the flow chart structure below.

  Back to Top
 

Wireframes

The game will be built using a pre-built template that Code Institute has provided. This template already scales down for different screen sizes. For this reason I kept my wireframes simple.

• Mobile Wireframe

• Tablet Wireframe

• Desktop Wireframe

  Back to Top
 

Features

Existing Features

Image of the home screen when the player runs the program. The user will be greeted with the 3 input options. With a text at the very bottom that will ask the user to

Please choose an option :

Typing 1 = Play Game
Typing 2 = High Scores
Typing 3 = Exit

(Input 3 will close out the terminal like exiting any program)

• The next image is of the game itself which is that of the old school hangman game but with the twist that it's Robin you have to save from being hung. The user will have to guess letters one by one in order to solve the word. When the user makes a guess whether correct or wrong a '*' asterisk will fill the place of the letters guessed so that user knows not to choose that letter again. However in this game if the user types in a letter already guessed then they will have wasted an attempt.

• The score image list the top 5 players who were able to guess the most DC characters ever. If a user surpasses the score of of anyone of the top 5 players they will be added to the top 5 list and remove those that have the lowest score.

• The username input field appears at the bottom underneath the game letters. From there the player will create a username that will allow them to play the game and have the chance to have their name recorded into the top 5 list if they are good enough.

• Guessing the letters screen allows the player to guess what letters belong in the word.

• Guessing incorrectly results in the following image within the game.

• Guessing correctly results in the following image within the game.

• A repeated guess results in the following image.

• Winning the game results in the following image with two options, to play again or not by using the following inputs.
  • 'Y' for Yes
  • 'N' for No

• Losing the game results in the following image with two options, to play again or not by using the following inputs.
  • 'Y' for Yes
  • 'N' for No

• Google spreadsheets works with the data being sent to it by the game.
  • Username
  • Score

Features to be Implemented

1. Riddle array that attaches at the bottom of the game letters box by corresponding to a specific word
2. Sound effects for guessing the correct letter and wrong letter

  Back to Top
 

Technologies used

Languages

• HTML for the structure of the site
• CSS for the design of the site
• JavaScript was built into the template supplied by Code Institute
• Python for the game code
• StackEdit for the content in my README file

Libraries and Frameworks

• Python package for Google Sheets gspread
• For delying the appearance of the text python time library
• For selecting a random word from the word list python random library

Tools

• For construction Gitpod
• For wireframes Balsamic
• For CSS validation W3C CSS Validation Service
• For python code validation PEP8 online
• For HTML validation W3C HTML Validation Service
• For the contract checking WebAIM
• For general code queries W3Schools
• For python queries python
• For the colour pallet Coolors
• For the API Google Cloud Platform
• To hold the completed game data Google Sheets

Testing

I tested using friends and families and asked them for their input.

I informed everyone that it's based on a hangman game but with the twist that it's centered around 'The Riddler' a villain of Batman and you have to save Robin by guessing the words which are based on the DC Universe characters from the comics.

I asked them to cover all bases, from losing to winning and trying all inputs within the game.

From this testing, I implemented the changes that were recommended as they were all within my capabilities and not time-consuming to achieve.

UX Testing

  Back to Top
 

Code Validation

Using the PEP8 code validator for the Python code, I was able to eliminate all errors and have listed the images for the corresponding file names.

• Data Validation

• Functions Validation

• Utils Validation

• Words Validation

Bugs

I had a few bugs in the creation of the project.

• I had a major issue sending the data over to google sheets and would receive a index error. So instead of having the username and score on the same column I opted to have both on back to back columns as you can see on this image and just have the data progress that way.

  • This is on my list of things I would of wished I would of had time to fix

• Another issue I encountered was that I didn't set up the while loop correctly for the attempt lives which gave the player infinite lives on taking guesses. This was fixed after about a day and a half when I reliazed it.

Unfixed Bugs

• On mobile screens the game is chopped up and I was unable to fix this issue on time. You can see most of the terminal but the left and right end disappear on the screen.

  • Mobile Image Issue

  Back to Top
 

Deployment

The site was deployed via Heroku. Here is the live link - Riddle Me Batman

The project repository was created using the Code-Institute-Org/python-essentials-template on GitHub and edited using GitPod.

Create a Google Sheets document

• Log in to your Google account. If you do not have one, create a personal one here
• In the Google Apps, waffle in the top right corner of the screen select Sheets
• In the Start a new spreadsheet section, select Blank
• These next naming stages are critical, please ensure they are correct
• Give your new Google Sheets workbook a name of riddle_me_batman in the top left corner
• Give your worksheet a name of highscores in the bottom left corner
• Create your column headings

Activate API Credentials

• Open the Google Cloud Platform by following this link
• Ensure the correct account is selected in the top right corner of the screen
• Click on the Select a project button in the main navbar
• Then select New Project
• Give the project a name and click Create
• In the information box, select Select Project
• Open the hamburger in the top left corner and select APIs and Services and the Library
• In the Search bar type Google Drive and then select Google Drive API
• Click Enable
• Click Create Credentials button in the top right corner of the screen
• From the dropdown, select Google Drive API
• Select Application data and then No, I'm not using them and click on Next
• Enter a Service account name, this can be anything you like and click on Create and Continue
• From the Select a role dropdown, hover over Basic and select Editor the click on Done
• On the next screen, click on the long email address in the Service Accounts section
• In the navigation tabs below your service account name, select KEYS
• Click on the ADD KEY dropdown and select Create new key
• Ensure JSON is selected and then click on Create
• This downloads the credentials file, usually this will be downloaded to your downloads folder, but check its location by right-clicking on it at the bottom of the screen and select Show in folder
• Open the hamburger in the top left corner and select APIs and Services and the Library
• In the Search bar type Google Sheets and then select Google Sheets API
• Click Enable

Clone the repo with GitPod

• Log in to your GitHub account
• Follow this link to access this repository - Riddle-Me-Batman
• Select the Code dropdown button situated above the list of files
• Make sure that the HTTPS tab is selected
• Click on the Copy button to the right of the URL
• Open a new GitPod workspace
• In the terminal type the following code and then press enter

git clone https://github.com/CHAMPION316/Riddle-Me-Batman

• The repo will now be downloaded and cloned
• Open your GitPod workspaces
• Select the three dots to the right-hand side of your workspace and select Pin

Set up your Workspace

• Locate your credentials file that you downloaded in the Activate API Credentials section.
• Drag and drop it into your workspace, below the files.
• Right-click on the file and rename it to creds.json
• Open the creds.json file and copy the content of the client email

"client_mail": "____copy_this_____"

• Open your Google Sheets worksheet previously created.
• Click the Share button in the top right corner
• Paste in the client email
• Ensure Editor is selected in the dropdown
• Unselect the Notify people checkbox
• Click the Share button
• Go back to your workspace
• Open the file gitignore
• Add creds.json to the bottom of the list and save the file (Ctrl + S)
• In the terminal in your workspace, type the following and then press enter:

git add .

• In the terminal then, type the following and then press enter:

git status

• If your creds.json file appears in the terminal, please revisit from the 'Go back to your workspace' point as a mistake has been made.
• To install your dependencies into the workspace, enter the below code into the terminal and then hit enter

pip3 install gspread google-auth

Deployment via Heroku

• Visit heroku.com
• Create a new account or sign in
• From the dashboard, select New and then Create new app
• Enter an individual app name into the text box, select a region from the dropdown and then press Create app
• A Heroku app has now been created and the Deploy tab is opened.
• Select the Settings tab
• Click on the Reveal Config Vars button
• In the textbox with KEY as the placeholder, enter CREDS
• In the textbox with VALUE as the placeholder, enter the content from the creds.json file and press Add
• In the textbox with KEY as the placeholder, enter PORT
• In the textbox with VALUE as the placeholder, enter 8000
• press Add
• In the buildpacks section of the settings tab, click on Add Buildpack, select python and then save changes
• Click on Add Buildpack again, select node.js and then save changes
• When they are on the dashboard, ensure that python is above node.js on the list
• Open the Deploy tab
• In the deployment method section, select GitHub and confirm the connection.
• Enter the repo-name into the text box and click Search. When the correct repo appears below, click Connect
• In the Automatic deploys section, click Enable Automatic Deploys. This updates every time GitHub code is pushed
• To complete the process click on the Deploy Brach button in the Manual deploy section, this will take a few seconds to complete while Heroku builds the app
• A message will appear informing you that the app was successfully deployed and a View button will bring you to the live site

  Back to Top
 

Credits

• Code Institute for the template as well as the tutors and student care
• Simen Daehlin for being the best mentor ever
• Stackoverflow for having users breakdown code and helping others with similiar questions
• Emelie Sandberg My beautiful wife for always being there when I need her during my days of struggle with the course
• Friends and Family who tested out the game and gave me feedback

  Back to Top