Building a Game

Playing Rock, Paper, Scissors

In this assignment, you'll build a game application using our new skills. We hope it's fun! Here's a screenshot from the game you'll build:

Rock, Paper, Scissors
A screenshot of the "Rock, Paper, Scissors game" page.

Overview

In this assignment you will practice several Javascript functionalities:

  • using arrays to store information
  • write functions that have parameters and return values;
  • write event-handlers
  • test your code for many situations
  • dynamically update the HTML and CSS
  • create a slideshow of images / animation

You will need to create HTML, CSS, and JavaScript files for this assignment.

This is a screencast of the solution.

Recommendations

We recommend that you keep the browser Console open at all times when you are writing and debugging JavaScript. In fact, you will mostly test your functions in the JavaScript console.

Pair Programming

We are requiring pair programming for this assignment, which will work exactly like it did last week. We have added another worksheet to the same Google Doc for the purpose of creating teams. We strongly encourage you to find a different partner from last week. People have different strengths and weaknesses, and working with different partners will help you become more well-rounded.

How to Partner?

Use this shared Google Doc to record who your pair partner is for this assignment or find a partner who has similar scheduling constraints. Please use the hw8 tab, leaving the hw7 tab alone, to record those choices. It is not required to pair with your project partner, you can pair with anyone in any section, as long as you are able to find time to work together.

You must enter the names of team members in this spreadsheet (or if you got permission, your name alone), since the graders will use this document for grading purposes.

Requirements

You'll use all your skills in this assignment:

  • HTML to set up the game layout
  • CSS to format it, especially the slideshow of computer plays
  • JavaScript to give it the behavior.

The HTML/CSS code

Start by downloading the images you'll need from the Downloads folder.

Create the assign8.html file, to match the screenshot shown above. Make sure that you copy the contents of the README file into your html file, so that proper credit is given. It's sufficient to put that information into a comment, say in the head. The requirements of the HTML file are:

  1. The page should contain three main sections; the player throw, the computer throw, and the outcome.
  2. The player throw section contains three figures, with images representing the three plays. When the user clicks on an image, a border should appear around it (to mark the player's throw), and the computer throw is then decided.
  3. The computer throw sections contains a slideshow of 5 images. In order, they are (1) the question mark, (2) rock, (3) paper, (4) scissors, and (5) the computer's throw. When the page is first opened, the question mark image should appear. When the user picks a throw, a play is chosen at random by the computer, and the slideshow is animated (giving a little suspense to the game) until the image representing the computer's pick appears. Your code will have to dynamically set that 5th image.
  4. The CSS for this section will have to use the tricks we learned for sliding animations: the container will be big enough for only one image and will say overflow:hidden and then the contents will be wide enough for all five images to fit side-by-side.
  5. The outcome sections displays the results of the play, namely who won (computer, player or tie). It also has a button to reset the game to play it again.
  6. Define a set of appropriate CSS rules to match the layout of the page displayed above.
  7. Make sure you include your HTML and CSS validation icons.
  8. Also, don't forget to include a link to the jQuery library, and to our predefined infrastructure.js file, which is in this directory, so link to http://cs.wellesley.edu/~cs110/assignments/a08/infrastructure.js. You're welcome to look in that file; there's nothing secret in there.

The Javascript Code

We've broken down the solution to this assignment into a series of small functions that you can and should test individually, using the JavaScript console. (If you go on in Computer Science, you'll learn different ways to break down programming problems and tradeoffs among them.) Many of them build on others, so it makes sense to solve them in sequence. We've tried to phrase the descriptions the way that we would on the final exam, so practice understanding these descriptions.

Write your code in assign8.js and link to that from the HTML file, after the first two (three script tags, total).

Task 1: rpsJudge function

Define a function named rpsJudgethat takes two arguments, a playerChoice and a computerChoice, and returns the outcome of the game.

playerChoice is a string like "rock".

computerChoice is a string like "paper".

The return value is a number between 0 and 2:

  • 0: it's a tie
  • 1: player wins
  • 2: computer wins

You can test this function in the JS console. This function will not interact with the page at all.

To help you test this, we put a function named rpsJudge_tester in the infrastructure.js file that your html page loads. You can use that function like this:

    rpsJudge_tester();

But don't start with our function; start with your own testing, and use ours to make sure you've tried all 9 test cases. (Why is it 9?).

Task 2: highlightPlayerChoice function

Define a function named highlightPlayerChoicethat takes one argument, the player's choice, and dynamically updates the CSS of the figure corresponding to that choice to draw a blue border around it.

Hint 1: While it would be possible to use this to code this function, that approach is harder to test in the JS console. So, don't use this for highlightPlayerChoice. Instead, think about how you could construct the right selector string based on the function's argument.

Hint 2: you can easily add a border, but that may cause the page elements to shift around, since they're a little bigger than they were. It's better to have an existing border, but white, and just change the border color from white to blue.

You can test this function in the JS console.

Task 3: animateComputerChoice function

Define a function named animateComputerChoicethat takes one argument, the computerChoice, and does the following:

  1. Dynamically changes the fifth image in the computer throw section, to correspond to the computerChoice. Your HTML should have the fifth image already there, but with an empty SRC, like we do with the gallery applications. (The empty SRC will cause the validator to complain. You are allowed to have this one error.) Then your JS code dynamically changes the src to the correct relative URL given the computer's choice.
  2. Animates the slideshow to show the computer throw, namely that fifth image.

You can test this function in the JS console.

Task 4: resetRPS function

Define a function named resetRPSthat takes no arguments, and does the following:

  1. Removes the borders from any previous player throw (or changes the color back from blue to white).
  2. Resets the slideshow to the question mark image (the first image in the slideshow)
  3. Resets the outcome section

You can test this function in the JS console.

Attach this function as an event handler to the "Play Again" button. You can use this to clear the results while you think about your next move.

Task 5: playerTurn function

Define a function named playerTurn that takes one argument, playerChoice, and does the following:

  1. Resets the game by invoking the resetRPS function
  2. Highlights the player's choice
  3. Uses the randomElt function, which is already defined for you in the infrastructure.js file, to pick a random choice for the computer. Remember, the choice is among "rock", "paper", and "scissors".
  4. Animate the computer choice, again by invoking one of the functions you defined earlier and passing in the correct argument.
  5. Decide on the winner, and update the outcome section accordingly. You should use the judging function you defined earlier, passing in the arguments for the computer's choice and the player's choice.

You can test this function in the JS console.

Task 6: Event handling

The playerTurn function should be invoked when a figure is clicked in the player throw section. Make sure you send the correct playerChoice argument to the playerTurn function. Hint: It depends on the figure the user clicks on.

This is the trickiest part, but the code is not long. It just requires insight. There are two approaches, and either is acceptable:

  • Use a data-??? attribute on each of the images, writing one event handler function that retrieves that attribute's value and passes it as an argument to the playerTurn function from task 5. Attach this function to all three of the images for the player's choice.
  • Define three short (one line) event handler functions, each of which passes a possible player choice argument to the playerTurn function from task 5. Attach each of these functions to the appropriate image for a player's choice.

Once you get this task working, you'll have a working game!

Extra Credit Challenge

For an extra point, keep track of the number of wins, losses and ties, and update on-screen displays.

You can add a forth section in the HTML file to display the current score. Make sure that you add a "reset" button that clears the counters and displays.

Validation

You must validate the HTML and CSS for both your pages.

Submission

Upload your hw8 folder to the server, into your protected folder.

  • To be sure your pages uploaded properly, enter the full URL in the browser:
    http://cs.wellesley.edu/~myname/protected/hw8/assign8.html
    
    and interact with your game to be sure it works correctly from the server.

    Gradescope

    NOTE: It is only necessary for one member of a pair programming team to submit to Gradescope! There is an option for adding a Group Member when making a submission; the partner's name should be added at that time.

    1. Open the Google Doc we shared with you titled: CS110 Submission to Gradescope, and follow the instructions (make a copy of the file, edit the URL in the copy to correspond to your own assignment, and then create your own .pdf version of the copy).
    2. In your browser, go to gradescope.com and log in.
    3. Under Your Courses, select CS 110.
    4. You will see all of your current assignments. Click on the assignment you are turning in.
    5. In the dialog box that opens:
      • Click Select PDF
      • locate the correct file on your computer
      • Click Upload PDF
      • It may be necessary to reload the page to verify your submission was uploaded.

    Coding Style

    All the usual coding rules apply. See the style rules. Especially important is to not forget including comments in all your files to describe your choices and decisions.

    Assignments are due at midnight on the due date (check the schedule). Assignments may be turned in up to 24 hours late, for a 10% penalty. Furthermore, remember that this policy means that you should not modify work after the due time has passed, or it will be time-stamped late, and will incur the late penalty.

    Honor Code

    The Honor Code applies to this course. You are encouraged to discuss assignments with other students, the tutors, and with your instructors. However, your team must solve, write up, debug, test and document the assignment on your own. In other words, it is acceptable to talk with other students in English (or any other human language), but not acceptable to use any formal language and especially not HTML, CSS or Javascript. You should not be looking at other peoples' code or showing them yours. If you worked with others or you have obtained help from any source, you must acknowledge their contribution in writing.

    Homework assignments must be your own work. You may not look at solutions from other students, either from the current offering of CS110 or from past offerings.

    Grading

    These are the criteria we use to grade the homework:

    • Homework was submitted on the server by the due date. Late penalties apply.
    • Folders and files have the required names and are uploaded to the proper location.
    • Your HTML page shows the player throw, the computer throw, and the outcome.
    • The computer throw animation stops at the correct image.
    • There are no errors in the Javascript console.
    • There are comments in the Javascript file to explain the code you entered.

    Tutors can look at our solution if they need to.

    Help Room

    Our tutors in the help room can help you with concrete problems and questions you have about the assignment, thus, go to the room prepared. If you find that you don't know how to start the assignment, you should visit the instructors during their office hours.