File
project-2 CIS 111 Introduction to Web Programming Project 2 – 1. Goals This project aims to implement a rock-paper-scissors game on a web page. You are to solve the problem using only the JavaScript elements studied so far in class. This project allows you to earn up to 20 extra credit points by adding additional functionality. After completing this project, you will gain experience with: • creating a more complex JavaScript program • generating random numbers • implementing conditionals • producing formatted output to the Chrome Console • modifying a web page using JavaScript 2. Reminders Honesty: While you are encouraged to have high-level discussions with your fellow students, you must be able to complete the details of this project on your own. Late Policy: All projects are due by 11:59 pm of the stated due date. Projects submitted after the due date/time are considered late and will not be graded. 3. Game Rules In rock-paper-scissors, two players will each randomly choose one of three hand signs: rock ( ), paper ( ), or scissors ( ). Both players show their signs simultaneously to see who will win. Here are the rules that determine which hand sign beats another: • Rock wins over scissors (because rock smashes scissors) • Scissors wins over paper (because scissors cut paper) • Paper wins over rock (because paper covers rock) If both players show the same sign, it is a tie or draw. And that is the whole game! It’s often played in a best-two-out-of-three format as a quick contest to decide who gets to go first or something like that. In your program, the user selects a hand sign, and the computer, not knowing what you have chosen, randomly selects its hand sign. It is not simultaneous but is equivalent to blindfolded. You can find the images on Canvas->Projects->project-2- images. 4. Incremental Development Incremental development means building part of a program before making it all. It is a staging strategy in which product features are developed and delivered to users at different times, increasing its functionality and complexity. Complete each of the following project stages. 4.1. [20 pts] Lab 3 and 4 Products Complete Labs 3 and 4 and upload the files required in them. 4.2. [20 pts] Buttons You start implementing the rock-paper-scissors game by displaying three buttons with images of the hand signs. When you click on each button, it must display your selection on the console log. Fig. 1 shows a web page that illustrates this behavior. Fig. 1. Behavior of the web page buttons.html after clicking on the paper button. As part of this first partial solution, you must implement the Cascade Style Sheet required to display the buttons and their images adequately formatted. All three button HTML elements must execute the function play included in your JavaScript file. play receives the button’s name the user clicked on as an argument. You will find the three hand-sign images on Canvas->Files->Projects->project-2-images. The required files in this part are 111/p2/buttons.html, 111/p2/rps.css, and 111/p2/rps-b.js. 4.3. [30 pts] Computer Plays As a second step towards the game’s solution, you will now make the computer select a hand sign and log the results on the console. After you click a button, the program generates a random number from 0 to 2 representing the hand sign the computer has selected. Log the human and computer choices on the console, also log who wins. Fig. 2 shows a web page that illustrates this behavior. Fig. 2. Example of the behavior of the web page computer-plays.html. Extend the function play to call the function randomSelection( ); this function returns a string representing the hand sign name (i.e., “paper”, “rock”, or “scissors”.) After selecting the computer’s hand sign, play must call a function called whoWins(human, computer); this function takes as arguments two strings that represent the hand signs chosen by the human and computer, respectively, and returns the identifier of the winner. whoWins returns “human”, “computer”, or “draw”. whoWins must call the Boolean function beats(A, B), where A and B are selections (i.e., “paper”, “rock”, or “scissors”.) beats(A, B), returns true if A beats B, and false otherwise. Extend the style file rps.css as needed. The required files in this part are 111/p2/computer-plays.html, 111/p2/rps.css, and 111/p2/rps-cp.js. 4.4. [30 pts] Final Version Even though computer-plays.html already solves the problem, it would be nice to have a visual result produced by the web page. The last version you will create must convert the choices made by the human and computer into their graphical versions and displayed on the web page, together with the result. Fig. 2 shows a web page that illustrates this behavior. Fig. 3. Behavior of the final version of the solution to the rock-paper-scissors game. The human player clicked on paper, and the computer selected scissors. The computer wins. The web page rock-paper-scissors.html must now include a placeholder for the graphical results. This placeholder can be a table element with two rows and three columns. The second row is where the results are to be stored; the three cells on that row must contain “human”, “computer”, and “wins”. The function play of the final version of the JavaScript file, rps.js, now includes three calls to a function named displayResult(what, where). The parameter what indicates the contents of the result, and the parameter where indicates the table cell where it must place it, i.e., the id of the HTML element that the JavaScript program will modify. In HTML, an element can be identified by an id. For instance, a div can be identified as “target” using , so that it can be later on searched in the whole HTML document. document.getElementById(“target”) searches the element identified as “target” and returns it, so it can be used, assigned to a variable, etc. Any previously identified web page element can be modified by assigning its innerHTML property. All of that can be accomplished in one single instruction document.getElementById(elementID).innerHTML = newContent; where elementID is a string variable that stores the target element id, and newContent is variable storing the new content for that element. Generally, newContent is a string that represents HTML code. Extend the style file rps.css as needed. The required files in this part are 111/p2/rock-paper-scissors.html, 111/p2/rps.css, and 111/p2/rps.js. 4.5. [10 pts] Extra Credit Extend the implementation with a scoring record that counts how many times the human and the computer have won. Figure 4 shows how the web page must behave. You are free to implement this option any way you want, using the JavaScript constructs studied in class so far. Extend the style file rps.css as needed. The required files in this part are 111/p2/extra-credit.html, 111/p2/rps.css, and 111/p2/rps-ec.js. Fig. 4. Extra credit – the program must keep a score of all the games played so far, with a Reset button. 4.6. Upload and Test Remember to upload all Project 2’s files to Coding Rooms. You may copy and paste the content of your files or upload them directly to Coding Rooms. The files to be uploaded to Coding Rooms are: • Products from Labs 3 and 4 (lab-3.html, lab-3.js, and lab-4.html) • buttons.html • rps-b.js • computer-plays.html • rps-cp.js • rock-paper-scissors.html • rps.js • rps.css • Optional for extra credit – extra-credit.html and rps-ec.js Remember: Lab 1 session and the document on Canvas->Files->labs->lab-1->coding- rooms.pdf briefly describe how to interact with Coding Rooms. Do not change any variable, function, or file name. Keep them as requested in this document. The grader is case-sensitive.