Giter VIP home page Giter VIP logo

yahtzee's Introduction

Yahtzee

Yahtzee is a game where you have to roll 5 dice and fill in a score sheet to get the highest score possible. All 5 dice can be held at any point to get the best score possible for that round, and dice can be rolled up to 3 times per round, playing a total of 13 rounds per game

Responsive Design

User Stories

First Time Visitors

  • As a first time visitor, I would like to be able to recognise that this is a game.
  • As a first time visitor, I would like to understand the rules of the game, so I know how to play.
  • As a first time visitor, I would like to know what each scoring section means, so I understand what I would need to roll.
  • As a first time visitor, I would like to know what each section scores, or can score, with the best possible dice rolls.

Returning Visitors

  • As a returning visitor, I would like to understand what strategies there are to maximize my score.
  • As a returning visitor, I would like to have the ability to see what scores I can get for each valid move.

Frequent Visitors

  • As a frequent visitor, I would like to see my highest score for this session, so I can try and beat it.

Author Targets

  • As the author, I would like people to know when they load the page that this website is a game of yhatzee.
  • As the author, I would like anyone visiting the page to understand the rules of the game.
  • As the author, I would like to give visitors the best chance of getting the best score by showing them simple game strategies.
  • As the author, I want people to see what scores they can get with each valid play, with the dice they have rolled.
  • As the author, I would like to display all confirmed scores for each round so that visitors know what scores have been selected already.

Features

Heading

  • Displays what the game is called
  • Explains what the game is about

Header

Rules Button

  • Displays the rules of the game

Rules Button

Rules

  • Explains in detail what the rules of the game are
  • Shows examples of dice rolls to further explain what scores a user can get with the game

Rules

Rules Nav Bar

  • Allow the user to switch between the rules of the game, basic strategies for the game and advanced strategies for the game
  • Shows the user which section they're currently on, and which section their mouse is hovering over

Rules Nav Bar

Basic Strategies

  • Allows the user to understand one of the basic features of the game
  • Includes an example of how to use the feature

Basic Strategies

Advanced Strategies

  • Allows the user to understand some more advanced strategies when the user has no dice rolls left, allowing them to potentially improve their scores
  • Includes examples of the strategies, to give the user and idea of the situations the strategies can be used in

Advanced Strategies

Rules Close Button

  • Allows the user to close the rules of the game
  • Can easily see if the user is hovering over the close button
  • Only displays when the rules and strategies are open

Close Button

High Score Display

  • Updates the players high score after each game whenever they get a new, higher score.

High Score Display

Gameboard

  • Fully responsive, when a score is clicked on will update the score for that game to represent the current score for the player.
  • Score updates will only work if the player doesn't have a score there already.
  • Clickable score boxes change to a pointer when hovered over.
  • Scores update with a grey score, representing what score a player would get if they were to select the score.
  • Grey score updates with every dice roll.

Gameboard

Total Scores

  • Updates as the game goes on to match the full game score.

Total Scores

Dice Section

  • Fully responsive, pointer cursor visible when hovered over the dice and button.
  • Random dice numbers shown when Roll the dice button is clicked.
  • Visible change will be made when a dice is clicked on, to display which is being held.

Dice Area Dice Area With Held Dice

Testing

  • I have tested the website on the following browsers: Google Chrome, Safari (mobile version), Microsoft Edge.
  • I can confirm the website is fully responsive to all screen sizes on the browsers stated.
  • When testing each of the game scores, I done manual testing by manually changing the dice numbers to match the code I was testing, to make sure it worked as intended

Bugs

Fixed Bugs

  • Scores box
    • Scores boxes had unexpectedly changed size so the boxes were almost invisible
      • I noticed I had accidentally changed the height in the score class to 10leftpx when changing the board names
      • The bug was fixed by removing the word "left".
    • Bonus scores box wasn't working properly with design responsiveness.
      • When I was testing screen sizes, the score for the bonus points would drop to the left board total score, moving the box for the total score to the left.
      • The bonus box previously had an explanation of how to get the bonus. This has been moved to the bottom of the gameboard, and is linked appropriately, which has fixed the bug.
      • The rules button had not been created when this bug was fixed. The bonus explanation is now in the game rules.
    • Score for the sixes wasn't updating with the click
      • When Testing, I noticed that whenever I clicked on the sixes box, the score wouldn't update
      • I hadn't added the sixes score function to the new round function, so when the sixes box was selected, the sixes score function was never getting called.
    • Four of a kind and full house weren't displaying truthfully if any dice was held beforehand
      • When testing, I noticed using the potential scores function, that 4 of a kind wasn't displaying when I had held numbers, same with full house.
      • This was because, after the dices array was sorted, whenever the computer found a dice with the held class, it'd skip over it entirely, so if this dice number was in a different place in the array, it wouldn't actually update.
      • I fixed this by checking the class name of the dice being held, and then setting the dice value in that position to the number on the held dice.
    • Full house wasn't displaying when 3 of a kind was smaller numbers than pair.
      • When testing, I found that my full house was resulting in 0 in the full house scores section.
      • I found that I hadn't skipped to the next iteration in the for loop when I had found 3 of a kind, which therefore meant the loop would double check the same condition for the current dice being the same as the next dice, which would in turn break the loop.
    • Yahtzee was scoring 100 instead of 50 when there was a yahtzee for the user
      • I found that when a user would get a yahtzee, they'd get 100 points when they selected yahtzee, instead of 50.
      • I found that I set the gotYahtzee boolean to true before checking if the user had got a yahtzee already.
      • I fixed this bug by checking if the score the user had selected was yahtzee when checking if the user had already got yahtzee, so that there wasn't a double scoring in the yahtzee score
    • Multi Yahtzee wasn't updating total score
      • When I was testing yahtzee, I got 2 yahtzees in one game, and noticed that my score for the left board was lower than the score I had recieved with that one yahtzee
      • I fixed this by checking the class of the parent node of the score I had clicked, and then updating the score with the extra 50 points
    • Multi Yahtzee score was recieved even without yahtzee being recieved
      • If the player selects anything other than yahtzee when they get a yahtzee, the score gives an extra 50 points
      • I found that the boolean gotYahtzee updated to true when potentialScore was being called and the player got a yahtzee
      • I fixed this by moving the gotYahtzee boolean from the yahtzee function to the newRound function, and checked if the player got 50 points from the yahtzee function before calling gotYahtzee as true

Unfixed bugs

  • None

Validation

  • Using the W3C Validator, I can confirm that index.html came back with no errors.

W3C Validator

  • Using the Jigsaw Validator, I can confirm that style.css came back with no errors.

Jigsaw Validator

  • Using JSHint, I found that there were no issues with the code in script.js.

JSHint

  • I found that the page has excellent accessibility rating using lighthouse

Accessibility Check

UX Testing

  • These are the completed goals compared to the user stories I created at the beginning of the project

First Time Visitor

  • Using the header of the page, I have made sure that anyone visiting the website for the first time will recognise that the website is a game
  • I added a rules button in the top left hand corner of the website, so that any users can find out the rules of the game
  • In the rules, I added 1 example of each of the scores so that players have an idea of what scores they can get
  • In the rules section, I explained the different scores, and what scores users can get with each scores box

Returning Visitor

  • In the rules, I have included a navigation bar, that users can cycle through each of rules, basic strategies and advanced strategies to make getting the highest score possible as simple as possible.
  • For the returning visitors ease, I made sure to add a faded score, which represents the score the user can get with the current dice roll

Frequent Visitor

  • I added a high score at the top left of the page so that someone can see their high score. In future, I would like to have the high score saved in a local file, so that the user can close the page, and then see their high score each time they open the website

Author Targets

  • At the header of the page, I have put a h1 heading of Yahtzee! so that all users know the name of the game they're playing
  • At the top left of the page is a rules button, which displays the rules of the game for the user
  • The rules section includes strategies, which can be cycled through via the navigation bar at the top.
  • I added the potential score function to let the user understand what score they can get with their current roll
  • When the user selects a score, the dice will reroll, the number of rolls left will be reset to 3 just before the reroll and will update whatever score they have selected to display the correct score for it

Deployment

  • The website was deployed via github, and the steps to do so are as follows:
    • Find the settings tab at the top of my github repository, and open
    • Along the left hand side of the settings page, find the pages tab under code and automation, and open
    • Click on the dropdown menu under source and select the main branch, then save
    • Once saved, the website will be published

The live link can be found here: Yahtzee!

Credits

Contents

  • I found the bonus score specification and score on Wikipedia
  • I found information on how to code part of the small straight on stack overflow. Some of the other functions codes were inspired by this website as well.

Media

yahtzee's People

Contributors

dylan097 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.