EECS 485

Lecture 03 and 04 Mini-Project

In this mini-project, you will be implementing a web-based rock-paper-scissors game. You will be given starter code for a Flask app (the same technology you will be using in Project 2), and extending it to make your game.

Setup

Download the starter files, and extract them.

Set up a virtual environment and install the project dependencies:

$ python3 -m venv env
$ source env/bin/activate
$ pip install -r requirements.txt
$ pip install -e .

You can run the Flask app using the command:

./run.sh

Then, visit localhost:8000 in your browser to access the app. You should see a picture of a rock, with buttons to increment and decrement a counter.

Exploration

To familiarize yourself with the code, complete the following tasks:

1. Add a “Reset” button that resets the counter to 0.
2. Add a picture of scissors that you find online to the page.
3. Make the counter value blue.

Initial Rock-Paper-Scissors Game

Change the project from a counter to a rock-paper-scissors game.

• There must be three buttons the user can choose from: rock, paper, or scissors
• The user is playing against a computer player. The computer always cycles between rock, then paper, then scissors, and so on.
• There must be a visualization for the matchup using images, showing what the computer played vs. what the user played, and a message about who won.
• There must be a scoreboard for the number of games won by the computer and the human

Better Rock-Paper-Scissors AI

Use Markov chains to predict what the user is going to play next, by building a data structure similar to this, where the keys are a sequence of moves the user has previously made, and the values are the counts of the moves the user has made after that sequence.

{
    # means after playing RR, human played R twice, P once, S once
    "RR": { "R": 2, "P": 1, "S": 2 },
    "SS": { "R": 1, "P", 2, "S": 0 },
    ...
}

Here is a walkthrough of how to build it. Suppose that the user has played the following sequence of moves:

RRPRRS

Based on this, we know that when the previous 2 moves were “RR” the next move was “P” one time and “S” one time, when the previous 2 moves were “RP”, the next move was “R”, and when the previous 2 moves were “PR”, the next move was “R”. Therefore, the data structure we could build is:

{
    "RR": { "R": 0, "P": 1, "S": 1 },
    "RP": { "R": 1, "P": 0, "S": 0 },
    "PR": { "R": 1, "P": 0, "S": 0 }
}

Then, when making a move, the AI looks at the last 2 moves the player made, and plays the move that would defeat the most likely move by the player. In the example above, if the last 2 moves were PR, the AI would play P.