AidanPTD/rpsgames.html

## rpsgames.html
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>RPS Games</title>
    <script src="scripts.js"></script>
    <link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
    <table width="50%" border="0">
        <tr>
            <td style="text-align:center">
                <img id="userImage" src="images/Rock.png" title="Rock" alt="Rock" width="100" height="100" />
            </td>
            <td style="text-align:center">
                <p id="outcome">Outcome</p>
            </td>
            <td style="text-align:center">
                <img id="aiImage" src="images/Scissors.png" title="Scissors" alt="Scissors" width="100" height="100" />
            </td>
            <td width="500" style="text-align:center">
                <div class="games">
                    <button onclick="gameDropdown()" class="gamebtn">Games</button>
                    <div id="gameDropdown" class="gametypes">
                        <button onclick="buttons5()">RPS-5</button>
                        <button onclick="buttons7()">RPS-7</button>
                        <button onclick="buttons9()">RPS-9</button>
                        <button onclick="buttons11()">RPS-11</button>
                        <button onclick="buttons15()">RPS-15</button>
                        <button onclick="buttons25()">RPS-25</button>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td style="text-align:center">
                <p id="userPoints"></p>
            </td>
            <td style="text-align:center">
                <button class="gamebtn" onclick="resetPoints()">
                    Reset
                </button>
            </td>
            <td style="text-align:center">
                <p id="aiPoints"></p>
            </td>
        </tr>
    </table>
    <div id="buttons">

    </div>
</body>
</html>

## scripts.js
// Misc
function gameDropdown() {
    document.getElementById("gameDropdown").classList.toggle("show");
}
window.onclick = function (event) {
    if (!event.target.matches('.gamebtn')) {
        var dropdowns = document.getElementsByClassName("gametypes");
        for (var i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
}
// Game functions

var choices5 = ["Rock", "Scissors", "Lizard", "Paper", "Spock"];
var outcomes5 = [[ "crushes Scissors", "crushes Lizard" ], [ "decapitates Lizard", "cut Paper" ], [ "eats Paper", "poisons Spock" ], [ "disproves Spock", "covers Rock" ], [ "vaporizes Rock", "smashes Scissors" ]]
var choices7 = ["Rock", "Fire", "Scissors", "Sponge", "Paper", "Air", "Water"];
var outcomes7 = [ [ "pounds out Fire", "crushes Scissors", "crushes Sponge" ], [ "melts Scissors", "burns Sponge", "Burns Paper" ], [ "cut Sponge", "cut Paper", "swish through Air" ], [ "soaks Paper", "uses Air pockets", "absorbs Water" ], [ "fans Air", "floats on Water", "covers Rock" ], [ "evaporates Water", "erodes Rock", "blows out Fire" ], [ "erodes Rock", "puts out Fire", "rusts Scissors" ] ];
var choices9 = [ "Rock", "Fire", "Scissors", "Human", "Sponge", "Paper", "Air", "Water", "Gun" ];
var outcomes9 = [ [ "pounds out Fire", "crushes Scissors", "crushes Human", "crushes Sponge" ], [ "melts Scissors", "burns Human", "burns Sponge", "Burns Paper" ], [ "cut Human", "cut Sponge", "cut Paper", "swish through Air" ], [ "cleans with Sponge", "writes Paper", "breathes Air", "drinks Water" ], [ "soaks Paper", "uses Air pockets", "absorbs Water", "cleans Gun" ], [ "fans Air", "floats on Water", "outLaws Gun", "covers Rock" ], [ "evaporates Water", "tarnishes Gun", "erodes Rock", "blows out Fire" ], [ "erodes Gun", "erodes Rock", "puts out Fire", "rusts Scissors" ], [ "targets Rock", "targets Fires", "outclasses Scissors", "shoots Human" ] ];
var choices11 = [ "Rock", "Fire", "Scissors", "Human", "Wolf", "Sponge", "Paper", "Air", "Water", "Devil", "Gun" ];
var outcomes11 = [ [ "pounds out Fire", "crushes Scissors", "crushes Human", "crushes Wolf", "crushes Sponge" ], [ "melts Scissors", "burns Human", "burns Wolf", "burns Sponge", "Burns Paper" ], [ "cut Human", "cuts Wolf", "cut Sponge", "cut Paper", "swish through Air" ], [ "tames Wolf", "cleans with Sponge", "writes Paper", "breathes Air", "drinks Water" ], [ "chews up Sponge", "chews up Paper", "breathes Air", "drinks Water", "bites Devil's heiny" ], [ "soaks Paper", "uses Air pockets", "absorbs Water", "cleanses Devil", "cleans Gun" ], [ "fans Air", "floats on Water", "rebukes Devil", "outLaws Gun", "covers Rock" ], [ "evaporates Water", "chokes Devil", "tarnishes Gun", "erodes Rock", "blows out Fire" ], [ "drowns Devil", "erodes Gun", "erodes Rock", "puts out Fire", "rusts Scissors" ],
    [ "immune to Gun", "hurls Rock", "breathes Fire", "immune to Scissors", "possesses Human" ], [ "targets Rock", "targets Fires", "outclasses Scissors", "shoots Human", "shoots Wolf" ] ];
var choices15 = [ "Rock", "Fire", "Scissors", "Snake", "Human", "Tree", "Wolf", "Sponge", "Paper", "Air", "Water", "Dragon", "Devil", "Lightning", "Gun" ];
var outcomes15 = [["pounds out Fire", "crushes Scissors", "crushes Snake", "crushes Human", "blocks (growth of) Tree", "crushes Wolf", "crushes Sponge"], ["melts Scissors", "burns Snake", "burns Human", "burns Tree", "burns Wolf", "burns Sponge", "Burns Paper"], ["cut Snake", "cut Human", "carve Tree", "cuts Wolf", "cut Sponge", "cut Paper", "swish through Air"], ["bites Human", "nests in Tree", "bites Wolf", "swallows Sponge", "nests in Paper", "breathes Air", "drinks Water"], ["plants Tree", "tames Wolf", "cleans with Sponge", "writes Paper", "breathes Air", "drinks Water", "slays Dragon"], ["shelters Wolf", "outlives Sponge", "becomes Paper", "produces Air", "drinks Water", "shelters Dragon", "imprisons Devil"], ["chews up Sponge", "chews up Paper", "breathes Air", "drinks Water", "outruns Dragon", "bites Devil's heiny", "outruns Lightning"],
["soaks Paper", "uses Air pockets", "absorbs Water", "cleanses Dragon", "cleanses Devil", "conducts Lightning", "cleans Gun"], ["fans Air", "floats on Water", "rebukes Dragon", "rebukes Devil", "defines Lightning", "outLaws Gun", "covers Rock"], ["evaporates Water", "freezes Dragon", "chokes Devil", "creates Lightning", "tarnishes Gun", "erodes Rock", "blows out Fire"], ["drowns Dragon", "drowns Devil", "conducts Lightning", "erodes Gun", "erodes Rock", "puts out Fire", "rusts Scissors"], ["commands Devil", "breathes Lightning", "immune to Gun", "rests on Rock", "breathes Fire", "immune to Scissors", "spawns Snake"], ["casts Lightning", "immune to Gun", "hurls Rock", "breathes Fire", "immune to Scissors", "eats Snakes", "possesses Human"], ["melts Gun", "splits Rock", "starts Fire", "melts Scissors", "strikes Snake", "strikes Human", "splits Tree"],
["targets Rock", "targets Fires", "outclasses Scissors", "shoots Snake", "shoots Human", "targets Tree", "shoots Wolf"]];
var choices25 = [ "Rock", "Sun", "Fire", "Scissors", "Axe", "Snake", "Monkey", "Woman", "Man", "Tree", "Cockroach", "Wolf", "Sponge", "Paper", "Moon", "Air", "Bowl", "Water", "Alien", "Dragon", "Devil", "Lightning", "Nuke", "Dynamite", "Gun" ];
var outcomes25 = [ [ "shades Sun", "pounds out Fire", "crushes Scissors", "chips Axe", "crushes Snake", "crushes Monkey", "crushes Woman", "crushes Man", "blocks Tree roots", "crushes Cockroach", "crushes Wolf", "crushes Sponge" ], [ "made of Fire", "melts Scissors", "melts Axe", "warms Snake", "warms Monkey", "warms Woman", "warms Man", "feeds Tree", "warms Cockroach", "warms Wolf", "dries up Sponge", "shines through Paper" ], [ "melts Scissors", "forges Axe", "burns Snake", "burns Monkey", "burns Woman", "burns Man", "burns down Tree", "burns Cockroach", "burns Wolf", "burns Sponge", "Burns Paper", "campfire by Moonlight" ], [ "sharper than Axe", "stab Snake", "stab Monkey", "cut Women's hair", "cut Man's Hair", "carve Tree", "stab Cockroach", "cut Wolf's hair", "cut Sponge", "cut Paper", "reflect Moon", "swish through Air" ],
    [ "chops Snake", "cleaves Monkey", "cleaves Woman", "cleaves Man", "chops down Tree", "chops Cockroach", "cleaves Wolf", "chops Sponge", "slices Paper", "reflects Moon", "flies through Air", "chops Bowl" ], [ "bites Monkey", "bites Woman", "bites Man", "lives in Tree", "eats Cockroach", "bites Wolf", "swallows Sponge", "nests in Paper", "nocturnal with Moon", "breathes Air", "sleeps in Bowl", "drinks Water" ], [ "flings poop at Woman", "flings poop at Man", "lives in Tree", "Eats Cockroach", "enrages Wolf", "rips up Sponge", "rips up Paper", "smashes Bowl", "drinks Water", "infuriates Alien" ], [ "tempts Man", "plants Tree", "steps on Cockroach", "tames Wolf", "cleans with Sponge", "writes Paper", "aligns with Moon", "breathes Air", "eats from Bowl", "drinks Water", "disproves Alien", "subdues Dragon" ],
    [ "plants Tree", "steps on Cockroach", "tames Wolf", "cleans with Sponge", "writes Paper", "travels to Moon", "breathes Air", "eats from Bowl", "drinks Water", "disproves Alien", "slays Dragon", "exorcises Devil" ], [ "shelters Cockroach", "shelters Wolf", "outlives Sponge", "creates Paper", "produces Air", "wood creates Bowl", "drinks Water", "ensnares Alien Ship", "shelters Dragon", "imprisons Devil", "attracts Lightning" ], [ "sleeps in fur of Wolf", "nests in Sponge", "nests between Papers", "nocturnal with Moon", "breathes Air", "hides under Bowl", "drinks Water", "stows away with Alien", "eats eggs of Dragon", "makes men Devils", "hides from Lightning", "survives Nuke" ],
    [ "chews up Sponge", "chews up Paper", "howls at Moon", "breathes Air", "drinks from Bowl", "drinks Water", "chases Alien", "outruns Dragon", "bites heiny of Devil", "outruns Lightning", "Wolf-2 launches Nuke", "outruns Dynamite" ], [ "soaks Paper", "looks like Moon", "uses Air pockets", "cleans Bowl", "absorbs Water", "intrigues Alien", "cleanses Dragon", "cleanses Devil", "conducts Lightning", "cleans Nuke", "soaks Dynamite", "cleans Gun" ], [ "(Paper) Moon", "fans Air", "mache Bowl", "floats on Water", "disproves Alien", "rebukes Dragon", "rebukes Devil", "defines Lightning", "defines Nuke", "encases Dynamite", "outLaws Gun", "covers Rock" ], [ "has no Air", "shaped like Bowl", "has no Water", "houses Alien", "shines on Dragon", "terrifies Devil", "far above Lightning", "too far for Nuke", "suffocates Dynamite", "Moonshine Gunfight", "shines on Rock", "eclipses Sun" ],
    [ "tips over Bowl", "evaporates Water", "chokes Alien", "freezes Dragon", "chokes Devil", "creates Lightning", "blows astray Nuke", "blows out Dynamite", "tarnishes Gun", "erodes Rock", "cools heat of Sun", "blows out Fire" ], [ "contains Water", "shapes craft of Alien", "drowns Dragon", "blesses Devil", "focuses Lightning", "encases core of Nuke", "splashes Dynamite", "splashes Gun", "once made of Rock", "focuses Sun", "snuffs out Fire", "covers Scissors" ], [ "toxic to Alien", "drowns Dragon", "drowns Devil", "conducts Lightning", "short-circuits Nuke", "douses Dynamite", "rusts Gun", "erodes Gun", "erodes Rock", "reflects Sun", "puts out Fire", "rusts Scissors", "rusts Axe" ],
    [ "vaporizes Dragon", "non-believer in Devil", "shoots Lightning", "defuses Nuke", "force-fields Gun", "vaporizes Rock", "destroys Sun", "fuses Fire", "force-fields Scissors", "force-fields Axe", "mutates Snake" ], [ "commands Devil", "breathes Lightning", "lived before Nukes", "flosses with Dynamite", "immune to Gun", "rests on Rock", "blots out Sun", "breathes Fire", "immune to Scissors", "immune to Axe", "spawns Snake", "chars Monkey" ], [ "casts Lightning", "inspires Nuke", "inspires Dynamite", "inspires Gun", "hurls Rock", "curses Sun", "breathes Fire", "immune to Scissors", "immune to Axe", "eats Snakes", "enrages Monkey", "tempts Woman" ], [ "defuses Nuke", "ignites Dynamite", "melts Gun", "splits Rock", "storm blocks Sun", "starts Fire", "melts Scissors", "melts Axe", "strikes Snake", "strikes Monkey", "strikes Woman", "strikes Man" ],
    [ "outclasses Dynamite", "outclasses Gun", "incinerates Rock", "has Power of Sun", "starts massive Fire", "incinerates Scissors", "incinerates Snake", "incinerates Axe", "incinerates Monkey", "incinerates Woman", "incinerates Man", "incinerates Tree" ], [ "outclasses Gun", "explodes Rock", "smoke blots out Sun", "starts Fire", "explodes Scissors", "explodes Axe", "explodes Snake", "explodes Monkey", "explodes Woman", "explodes Man", "explodes Tree", "explodes Cockroach" ], [ "targets Rock", "shoots at Sun", "(Gun) Fires", "destroys Scissors", "chips Axe", "shoots Snake", "shoots Monkey", "shoots Woman", "shoots Man", "targets Tree", "shoots Cockroach", "shoots Wolf" ] ];
var choices101 = ["Dynamite", "Tornado", "Quicksand", "Pit", "Chain", "Gun", "Law", "Whip", "Sword", "Rock", "Death", "Wall", "Sun", "Camera", "Fire", "Chainsaw", "School", "Scissors", "Poison", "Cage", "Axe", "Peace", "Computer", "Castle", "Snake", "Blood", "Porcupine", "Vulture", "Monkey", "King", "Queen", "Prince", "Princess", "Police", "Woman", "Baby", "Man", "Home", "Train", "Car", "Noise", "Bicycle", "Tree", "Turnip", "Duck", "Wolf", "Cat", "Bird", "Fish", "Spider", "Cockroach", "Brain", "Community", "Cross", "Money", "Vampire", "Sponge", "Church", "Butter", "Book", "Paper", "Cloud", "Airplane", "Moon", "Grass", "Film", "Toilet", "Air", "Planet", "Guitar", "Bowl", "Cup", "Beer", "Rain", "Water", "TV", "Rainbow", "UFO", "Alien", "Prayer", "Mountain", "Satan", "Dragon", "Diamond", "Platinum", "Gold", "Devil", "Fence", "Video Game", "Math", "Robot", "Heart", "Electricity", "Lightning", "Medusa", "Power", "Laser", "Nuke", "Sky", "Tank", "Helicopter"];
var userPoints = 0;
var aiPoints = 0;
function addOptions(choiceArray, gameFunction) {
    var docFrag = document.createDocumentFragment();
    var buttonDiv = document.getElementById("buttons");
    for (var i = 0; i < choiceArray.length; i++) {
        var option = document.createElement("input");
        option.addEventListener("click", gameFunction);
        option.type = 'button';
        option.value = choiceArray[i];
        option.className = 'choicebtn';
        docFrag.appendChild(option);
        if (i % 10 == 0 && i != 0) {
            docFrag.appendChild(document.createElement("br"));
        }
    }
    buttonDiv.appendChild(docFrag);
}
function RPS(userNumber, aiNumber, choiceArray, outcomeArray) {
    var userTag = document.getElementById("userPoints");
    var aiTag = document.getElementById("aiPoints");
    var outcomeTag = document.getElementById('outcome');
    var gameOutcome = DetermineOutcome(userNumber, aiNumber, choiceArray.length);
    if (gameOutcome == 0) {
        outcomeTag.innerHTML = "Tie!";
    }
    else if (gameOutcome == 1 || gameOutcome == 2) {
        var choiceIndex = (gameOutcome == 1) ? userNumber : aiNumber;
        if (gameOutcome == 1) {
            var outcomeIndex = (userNumber < aiNumber) ? aiNumber - userNumber : aiNumber - (userNumber - choiceArray.length);
            outcomeTag.innerHTML = choiceArray[choiceIndex] + " " + outcomeArray[choiceIndex][outcomeIndex - 1];
            userPoints += 1;
        }
        else if (gameOutcome == 2) {
            var outcomeIndex = (aiNumber < userNumber) ? userNumber - aiNumber : userNumber - (aiNumber - choiceArray.length);
            outcomeTag.innerHTML = choiceArray[choiceIndex] + " " + outcomeArray[choiceIndex][outcomeIndex - 1];
            aiPoints += 1;
        }
    }
    else if (gameOutcome == -1) {
        outcomeTag.innerHTML = "Error";
    }
    userTag.innerHTML = "Player 1: " + userPoints;
    aiTag.innerHTML = "Player 2: " + aiPoints;
}
function resetPoints() {
    userPoints = 0;
    aiPoints = 0;
}
// Button functions for each of the games
function buttons5() {
    deleteButtons();
    addOptions(choices5, RPS5);
}
function buttons7() {
    deleteButtons();
    addOptions(choices7, RPS7);
}
function buttons9() {
    deleteButtons();
    addOptions(choices9, RPS9);
}
function buttons11() {
    deleteButtons();
    addOptions(choices11, RPS11);
}
function buttons15() {
    deleteButtons();
    addOptions(choices15, RPS15);
}
function buttons25() {
    deleteButtons();
    addOptions(choices25, RPS25);
}
function deleteButtons() {
    var buttonDiv = document.getElementById("buttons");
    while (buttonDiv.firstChild) {
        buttonDiv.removeChild(buttonDiv.firstChild);
    }
}
// Game functions
function RPS5() {
    var aiNumberDecider = Math.random();
    var userImage = document.getElementById('userImage');
    var aiImage = document.getElementById("aiImage");
    aiChoiceNumber = Math.floor(aiNumberDecider * 5);
    aiChoice = choices5[aiChoiceNumber];
    var userchoiceNumber;
    var userChoice = this.value;
    for (var i = 0; i < choices5.length; i++) {
        if (userChoice == choices5[i])
            userchoiceNumber = i;
    }
    userImage.src = 'images/' + userChoice + '.png';
    userChoice.title = userChoice;
    userChoice.alt = userChoice;
    aiImage.src = 'images/' + aiChoice + '.png';
    aiChoice.title = aiChoice;
    aiChoice.alt = aiChoice;
    RPS(userchoiceNumber, aiChoiceNumber, choices5, outcomes5);
}
function RPS7() {
    var aiNumberDecider = Math.random();
    var aiChoiceNumber = Math.floor(aiNumberDecider * 7);
    var aiChoice = choices7[aiChoiceNumber];
    var userchoiceNumber;
    var userChoice = this.value;
    for (var i = 0; i < choices7.length; i++) {
        if (userChoice == choices7[i])
            userchoiceNumber = i;
    }
    userImage.src = 'images/' + userChoice + '.png';
    userChoice.title = userChoice;
    userChoice.alt = userChoice;
    aiImage.src = 'images/' + aiChoice + '.png';
    aiChoice.title = aiChoice;
    aiChoice.alt = aiChoice;
    RPS(userchoiceNumber, aiChoiceNumber, choices7, outcomes7);
}
function RPS9() {
    var aiNumberDecider = Math.random();
    var userImage = document.getElementById('userImage');
    var aiImage = document.getElementById("aiImage");
    aiChoiceNumber = Math.floor(aiNumberDecider * 9);
    aiChoice = choices9[aiChoiceNumber];
    var userchoiceNumber;
    var userChoice = this.value;
    for (var i = 0; i < choices9.length; i++) {
        if (userChoice == choices9[i])
            userchoiceNumber = i;
    }
    userImage.src = 'images/' + userChoice + '.png';
    userChoice.title = userChoice;
    userChoice.alt = userChoice;
    aiImage.src = 'images/' + aiChoice + '.png';
    aiChoice.title = aiChoice;
    aiChoice.alt = aiChoice;
    RPS(userchoiceNumber, aiChoiceNumber, choices9, outcomes9);
}
function RPS11() {
    var aiNumberDecider = Math.random();
    var userImage = document.getElementById('userImage');
    var aiImage = document.getElementById("aiImage");
    aiChoiceNumber = Math.floor(aiNumberDecider * 11);
    aiChoice = choices11[aiChoiceNumber];
    var userchoiceNumber;
    var userChoice = this.value;
    for (var i = 0; i < choices11.length; i++) {
        if (userChoice == choices11[i])
            userchoiceNumber = i;
    }
    userImage.src = 'images/' + userChoice + '.png';
    userChoice.title = userChoice;
    userChoice.alt = userChoice;
    aiImage.src = 'images/' + aiChoice + '.png';
    aiChoice.title = aiChoice;
    aiChoice.alt = aiChoice;
    RPS(userchoiceNumber, aiChoiceNumber, choices11, outcomes11);
}
function RPS15() {
    var aiNumberDecider = Math.random();
    var userImage = document.getElementById('userImage');
    var aiImage = document.getElementById("aiImage");
    aiChoiceNumber = Math.floor(aiNumberDecider * 15);
    aiChoice = choices15[aiChoiceNumber];
    var userchoiceNumber;
    var userChoice = this.value;
    for (var i = 0; i < choices15.length; i++) {
        if (userChoice == choices15[i])
            userchoiceNumber = i;
    }
    userImage.src = 'images/' + userChoice + '.png';
    userChoice.title = userChoice;
    userChoice.alt = userChoice;
    aiImage.src = 'images/' + aiChoice + '.png';
    aiChoice.title = aiChoice;
    aiChoice.alt = aiChoice;
    RPS(userchoiceNumber, aiChoiceNumber, choices15, outcomes15);
}
function RPS25() {
    var aiNumberDecider = Math.random();
    var userImage = document.getElementById('userImage');
    var aiImage = document.getElementById("aiImage");
    aiChoiceNumber = Math.floor(aiNumberDecider * 25);
    aiChoice = choices25[aiChoiceNumber];
    var userchoiceNumber;
    var userChoice = this.value;
    for (var i = 0; i < choices25.length; i++) {
        if (userChoice == choices25[i])
            userchoiceNumber = i;
    }
    userImage.src = 'images/' + userChoice + '.png';
    userChoice.title = userChoice;
    userChoice.alt = userChoice;
    aiImage.src = 'images/' + aiChoice + '.png';
    aiChoice.title = aiChoice;
    aiChoice.alt = aiChoice;
    RPS(userchoiceNumber, aiChoiceNumber, choices25, outcomes25);
}

function DetermineOutcome(userChoice, aiChoice, numOfChoices) {
    // Number of choices can't be even or the game doesn't work properly!
    if (numOfChoices % 2 == 0 || userChoice > numOfChoices - 1 || aiChoice > numOfChoices - 1) {
        return -1;
    }
    // Result is a tie!
    if (userChoice == aiChoice) {
        return 0;
    }
    for (var i = 1; i <= numOfChoices / 2; i++) {
        if (aiChoice == (userChoice + i) % numOfChoices) {
            return 1;
        }
    }
    return 2;
}

## stylesheet.css
p {
    font-family: paragraphFont;
    font-size: 24px;
}
body {
    background-color: darkgray;
}
/*Game Options*/
.gamebtn {
    background-color: gray;
    color: white;
    padding: 16px;
    border: none;
    cursor: pointer;
}
.gamebtn:hover, .gamebtn:focus {
    background-color: lightgrey;
}
.games {
    position: relative;
    display: inline-block;
}
.options {
    background-color: gray;
    color: white;
    padding: 16px;
    border: none;
    cursor: pointer;
}
.gametypes {
    display: none;
    position:absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    z-index: 1;
}
.gametypes button {
    background-color: gray;
    color: white;
    padding: 16px;
    border: none;
    cursor: pointer;
    display: inline-block;
}

    .gametypes button:hover {
        background-color: lightgray;
    }
.choicebtn {
    background-color: gray;
    color: white;
    padding: 16px;
    border: none;
    cursor: pointer;
    display: inline-block;
}
    .choicebtn:hover {
        background-color: lightgray;
    }
.gametypes a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.games a:hover {
    background-color: #ddd;
}
.show {
    display:block;
}
@font-face {
    font-family: paragraphFont;
    src: url(paragraphFont.woff)
}
	<!DOCTYPE html>

	<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta charset="utf-8" />
	<title>RPS Games</title>
	<script src="scripts.js"></script>
	<link rel="stylesheet" type="text/css" href="stylesheet.css" />
	</head>
	<body>
	<table width="50%" border="0">
	<tr>
	<td style="text-align:center">
	<img id="userImage" src="images/Rock.png" title="Rock" alt="Rock" width="100" height="100" />
	</td>
	<td style="text-align:center">
	<p id="outcome">Outcome</p>
	</td>
	<td style="text-align:center">
	<img id="aiImage" src="images/Scissors.png" title="Scissors" alt="Scissors" width="100" height="100" />
	</td>
	<td width="500" style="text-align:center">
	<div class="games">
	<button onclick="gameDropdown()" class="gamebtn">Games</button>
	<div id="gameDropdown" class="gametypes">
	<button onclick="buttons5()">RPS-5</button>
	<button onclick="buttons7()">RPS-7</button>
	<button onclick="buttons9()">RPS-9</button>
	<button onclick="buttons11()">RPS-11</button>
	<button onclick="buttons15()">RPS-15</button>
	<button onclick="buttons25()">RPS-25</button>
	</div>
	</div>
	</td>
	</tr>
	<tr>
	<td style="text-align:center">
	<p id="userPoints"></p>
	</td>
	<td style="text-align:center">
	<button class="gamebtn" onclick="resetPoints()">
	Reset
	</button>
	</td>
	<td style="text-align:center">
	<p id="aiPoints"></p>
	</td>
	</tr>
	</table>
	<div id="buttons">

	</div>
	</body>
	</html>
	// Misc
	function gameDropdown() {
	document.getElementById("gameDropdown").classList.toggle("show");
	}
	window.onclick = function (event) {
	if (!event.target.matches('.gamebtn')) {
	var dropdowns = document.getElementsByClassName("gametypes");
	for (var i = 0; i < dropdowns.length; i++) {
	var openDropdown = dropdowns[i];
	if (openDropdown.classList.contains('show')) {
	openDropdown.classList.remove('show');
	}
	}
	}
	}
	// Game functions

	var choices5 = ["Rock", "Scissors", "Lizard", "Paper", "Spock"];
	var outcomes5 = [[ "crushes Scissors", "crushes Lizard" ], [ "decapitates Lizard", "cut Paper" ], [ "eats Paper", "poisons Spock" ], [ "disproves Spock", "covers Rock" ], [ "vaporizes Rock", "smashes Scissors" ]]
	var choices7 = ["Rock", "Fire", "Scissors", "Sponge", "Paper", "Air", "Water"];
	var outcomes7 = [ [ "pounds out Fire", "crushes Scissors", "crushes Sponge" ], [ "melts Scissors", "burns Sponge", "Burns Paper" ], [ "cut Sponge", "cut Paper", "swish through Air" ], [ "soaks Paper", "uses Air pockets", "absorbs Water" ], [ "fans Air", "floats on Water", "covers Rock" ], [ "evaporates Water", "erodes Rock", "blows out Fire" ], [ "erodes Rock", "puts out Fire", "rusts Scissors" ] ];
	var choices9 = [ "Rock", "Fire", "Scissors", "Human", "Sponge", "Paper", "Air", "Water", "Gun" ];
	var outcomes9 = [ [ "pounds out Fire", "crushes Scissors", "crushes Human", "crushes Sponge" ], [ "melts Scissors", "burns Human", "burns Sponge", "Burns Paper" ], [ "cut Human", "cut Sponge", "cut Paper", "swish through Air" ], [ "cleans with Sponge", "writes Paper", "breathes Air", "drinks Water" ], [ "soaks Paper", "uses Air pockets", "absorbs Water", "cleans Gun" ], [ "fans Air", "floats on Water", "outLaws Gun", "covers Rock" ], [ "evaporates Water", "tarnishes Gun", "erodes Rock", "blows out Fire" ], [ "erodes Gun", "erodes Rock", "puts out Fire", "rusts Scissors" ], [ "targets Rock", "targets Fires", "outclasses Scissors", "shoots Human" ] ];
	var choices11 = [ "Rock", "Fire", "Scissors", "Human", "Wolf", "Sponge", "Paper", "Air", "Water", "Devil", "Gun" ];
	var outcomes11 = [ [ "pounds out Fire", "crushes Scissors", "crushes Human", "crushes Wolf", "crushes Sponge" ], [ "melts Scissors", "burns Human", "burns Wolf", "burns Sponge", "Burns Paper" ], [ "cut Human", "cuts Wolf", "cut Sponge", "cut Paper", "swish through Air" ], [ "tames Wolf", "cleans with Sponge", "writes Paper", "breathes Air", "drinks Water" ], [ "chews up Sponge", "chews up Paper", "breathes Air", "drinks Water", "bites Devil's heiny" ], [ "soaks Paper", "uses Air pockets", "absorbs Water", "cleanses Devil", "cleans Gun" ], [ "fans Air", "floats on Water", "rebukes Devil", "outLaws Gun", "covers Rock" ], [ "evaporates Water", "chokes Devil", "tarnishes Gun", "erodes Rock", "blows out Fire" ], [ "drowns Devil", "erodes Gun", "erodes Rock", "puts out Fire", "rusts Scissors" ],
	[ "immune to Gun", "hurls Rock", "breathes Fire", "immune to Scissors", "possesses Human" ], [ "targets Rock", "targets Fires", "outclasses Scissors", "shoots Human", "shoots Wolf" ] ];
	var choices15 = [ "Rock", "Fire", "Scissors", "Snake", "Human", "Tree", "Wolf", "Sponge", "Paper", "Air", "Water", "Dragon", "Devil", "Lightning", "Gun" ];
	var outcomes15 = [["pounds out Fire", "crushes Scissors", "crushes Snake", "crushes Human", "blocks (growth of) Tree", "crushes Wolf", "crushes Sponge"], ["melts Scissors", "burns Snake", "burns Human", "burns Tree", "burns Wolf", "burns Sponge", "Burns Paper"], ["cut Snake", "cut Human", "carve Tree", "cuts Wolf", "cut Sponge", "cut Paper", "swish through Air"], ["bites Human", "nests in Tree", "bites Wolf", "swallows Sponge", "nests in Paper", "breathes Air", "drinks Water"], ["plants Tree", "tames Wolf", "cleans with Sponge", "writes Paper", "breathes Air", "drinks Water", "slays Dragon"], ["shelters Wolf", "outlives Sponge", "becomes Paper", "produces Air", "drinks Water", "shelters Dragon", "imprisons Devil"], ["chews up Sponge", "chews up Paper", "breathes Air", "drinks Water", "outruns Dragon", "bites Devil's heiny", "outruns Lightning"],
	["soaks Paper", "uses Air pockets", "absorbs Water", "cleanses Dragon", "cleanses Devil", "conducts Lightning", "cleans Gun"], ["fans Air", "floats on Water", "rebukes Dragon", "rebukes Devil", "defines Lightning", "outLaws Gun", "covers Rock"], ["evaporates Water", "freezes Dragon", "chokes Devil", "creates Lightning", "tarnishes Gun", "erodes Rock", "blows out Fire"], ["drowns Dragon", "drowns Devil", "conducts Lightning", "erodes Gun", "erodes Rock", "puts out Fire", "rusts Scissors"], ["commands Devil", "breathes Lightning", "immune to Gun", "rests on Rock", "breathes Fire", "immune to Scissors", "spawns Snake"], ["casts Lightning", "immune to Gun", "hurls Rock", "breathes Fire", "immune to Scissors", "eats Snakes", "possesses Human"], ["melts Gun", "splits Rock", "starts Fire", "melts Scissors", "strikes Snake", "strikes Human", "splits Tree"],
	["targets Rock", "targets Fires", "outclasses Scissors", "shoots Snake", "shoots Human", "targets Tree", "shoots Wolf"]];
	var choices25 = [ "Rock", "Sun", "Fire", "Scissors", "Axe", "Snake", "Monkey", "Woman", "Man", "Tree", "Cockroach", "Wolf", "Sponge", "Paper", "Moon", "Air", "Bowl", "Water", "Alien", "Dragon", "Devil", "Lightning", "Nuke", "Dynamite", "Gun" ];
	var outcomes25 = [ [ "shades Sun", "pounds out Fire", "crushes Scissors", "chips Axe", "crushes Snake", "crushes Monkey", "crushes Woman", "crushes Man", "blocks Tree roots", "crushes Cockroach", "crushes Wolf", "crushes Sponge" ], [ "made of Fire", "melts Scissors", "melts Axe", "warms Snake", "warms Monkey", "warms Woman", "warms Man", "feeds Tree", "warms Cockroach", "warms Wolf", "dries up Sponge", "shines through Paper" ], [ "melts Scissors", "forges Axe", "burns Snake", "burns Monkey", "burns Woman", "burns Man", "burns down Tree", "burns Cockroach", "burns Wolf", "burns Sponge", "Burns Paper", "campfire by Moonlight" ], [ "sharper than Axe", "stab Snake", "stab Monkey", "cut Women's hair", "cut Man's Hair", "carve Tree", "stab Cockroach", "cut Wolf's hair", "cut Sponge", "cut Paper", "reflect Moon", "swish through Air" ],
	[ "chops Snake", "cleaves Monkey", "cleaves Woman", "cleaves Man", "chops down Tree", "chops Cockroach", "cleaves Wolf", "chops Sponge", "slices Paper", "reflects Moon", "flies through Air", "chops Bowl" ], [ "bites Monkey", "bites Woman", "bites Man", "lives in Tree", "eats Cockroach", "bites Wolf", "swallows Sponge", "nests in Paper", "nocturnal with Moon", "breathes Air", "sleeps in Bowl", "drinks Water" ], [ "flings poop at Woman", "flings poop at Man", "lives in Tree", "Eats Cockroach", "enrages Wolf", "rips up Sponge", "rips up Paper", "smashes Bowl", "drinks Water", "infuriates Alien" ], [ "tempts Man", "plants Tree", "steps on Cockroach", "tames Wolf", "cleans with Sponge", "writes Paper", "aligns with Moon", "breathes Air", "eats from Bowl", "drinks Water", "disproves Alien", "subdues Dragon" ],
	[ "plants Tree", "steps on Cockroach", "tames Wolf", "cleans with Sponge", "writes Paper", "travels to Moon", "breathes Air", "eats from Bowl", "drinks Water", "disproves Alien", "slays Dragon", "exorcises Devil" ], [ "shelters Cockroach", "shelters Wolf", "outlives Sponge", "creates Paper", "produces Air", "wood creates Bowl", "drinks Water", "ensnares Alien Ship", "shelters Dragon", "imprisons Devil", "attracts Lightning" ], [ "sleeps in fur of Wolf", "nests in Sponge", "nests between Papers", "nocturnal with Moon", "breathes Air", "hides under Bowl", "drinks Water", "stows away with Alien", "eats eggs of Dragon", "makes men Devils", "hides from Lightning", "survives Nuke" ],
	[ "chews up Sponge", "chews up Paper", "howls at Moon", "breathes Air", "drinks from Bowl", "drinks Water", "chases Alien", "outruns Dragon", "bites heiny of Devil", "outruns Lightning", "Wolf-2 launches Nuke", "outruns Dynamite" ], [ "soaks Paper", "looks like Moon", "uses Air pockets", "cleans Bowl", "absorbs Water", "intrigues Alien", "cleanses Dragon", "cleanses Devil", "conducts Lightning", "cleans Nuke", "soaks Dynamite", "cleans Gun" ], [ "(Paper) Moon", "fans Air", "mache Bowl", "floats on Water", "disproves Alien", "rebukes Dragon", "rebukes Devil", "defines Lightning", "defines Nuke", "encases Dynamite", "outLaws Gun", "covers Rock" ], [ "has no Air", "shaped like Bowl", "has no Water", "houses Alien", "shines on Dragon", "terrifies Devil", "far above Lightning", "too far for Nuke", "suffocates Dynamite", "Moonshine Gunfight", "shines on Rock", "eclipses Sun" ],
	[ "tips over Bowl", "evaporates Water", "chokes Alien", "freezes Dragon", "chokes Devil", "creates Lightning", "blows astray Nuke", "blows out Dynamite", "tarnishes Gun", "erodes Rock", "cools heat of Sun", "blows out Fire" ], [ "contains Water", "shapes craft of Alien", "drowns Dragon", "blesses Devil", "focuses Lightning", "encases core of Nuke", "splashes Dynamite", "splashes Gun", "once made of Rock", "focuses Sun", "snuffs out Fire", "covers Scissors" ], [ "toxic to Alien", "drowns Dragon", "drowns Devil", "conducts Lightning", "short-circuits Nuke", "douses Dynamite", "rusts Gun", "erodes Gun", "erodes Rock", "reflects Sun", "puts out Fire", "rusts Scissors", "rusts Axe" ],
	[ "vaporizes Dragon", "non-believer in Devil", "shoots Lightning", "defuses Nuke", "force-fields Gun", "vaporizes Rock", "destroys Sun", "fuses Fire", "force-fields Scissors", "force-fields Axe", "mutates Snake" ], [ "commands Devil", "breathes Lightning", "lived before Nukes", "flosses with Dynamite", "immune to Gun", "rests on Rock", "blots out Sun", "breathes Fire", "immune to Scissors", "immune to Axe", "spawns Snake", "chars Monkey" ], [ "casts Lightning", "inspires Nuke", "inspires Dynamite", "inspires Gun", "hurls Rock", "curses Sun", "breathes Fire", "immune to Scissors", "immune to Axe", "eats Snakes", "enrages Monkey", "tempts Woman" ], [ "defuses Nuke", "ignites Dynamite", "melts Gun", "splits Rock", "storm blocks Sun", "starts Fire", "melts Scissors", "melts Axe", "strikes Snake", "strikes Monkey", "strikes Woman", "strikes Man" ],
	[ "outclasses Dynamite", "outclasses Gun", "incinerates Rock", "has Power of Sun", "starts massive Fire", "incinerates Scissors", "incinerates Snake", "incinerates Axe", "incinerates Monkey", "incinerates Woman", "incinerates Man", "incinerates Tree" ], [ "outclasses Gun", "explodes Rock", "smoke blots out Sun", "starts Fire", "explodes Scissors", "explodes Axe", "explodes Snake", "explodes Monkey", "explodes Woman", "explodes Man", "explodes Tree", "explodes Cockroach" ], [ "targets Rock", "shoots at Sun", "(Gun) Fires", "destroys Scissors", "chips Axe", "shoots Snake", "shoots Monkey", "shoots Woman", "shoots Man", "targets Tree", "shoots Cockroach", "shoots Wolf" ] ];
	var choices101 = ["Dynamite", "Tornado", "Quicksand", "Pit", "Chain", "Gun", "Law", "Whip", "Sword", "Rock", "Death", "Wall", "Sun", "Camera", "Fire", "Chainsaw", "School", "Scissors", "Poison", "Cage", "Axe", "Peace", "Computer", "Castle", "Snake", "Blood", "Porcupine", "Vulture", "Monkey", "King", "Queen", "Prince", "Princess", "Police", "Woman", "Baby", "Man", "Home", "Train", "Car", "Noise", "Bicycle", "Tree", "Turnip", "Duck", "Wolf", "Cat", "Bird", "Fish", "Spider", "Cockroach", "Brain", "Community", "Cross", "Money", "Vampire", "Sponge", "Church", "Butter", "Book", "Paper", "Cloud", "Airplane", "Moon", "Grass", "Film", "Toilet", "Air", "Planet", "Guitar", "Bowl", "Cup", "Beer", "Rain", "Water", "TV", "Rainbow", "UFO", "Alien", "Prayer", "Mountain", "Satan", "Dragon", "Diamond", "Platinum", "Gold", "Devil", "Fence", "Video Game", "Math", "Robot", "Heart", "Electricity", "Lightning", "Medusa", "Power", "Laser", "Nuke", "Sky", "Tank", "Helicopter"];
	var userPoints = 0;
	var aiPoints = 0;
	function addOptions(choiceArray, gameFunction) {
	var docFrag = document.createDocumentFragment();
	var buttonDiv = document.getElementById("buttons");
	for (var i = 0; i < choiceArray.length; i++) {
	var option = document.createElement("input");
	option.addEventListener("click", gameFunction);
	option.type = 'button';
	option.value = choiceArray[i];
	option.className = 'choicebtn';
	docFrag.appendChild(option);
	if (i % 10 == 0 && i != 0) {
	docFrag.appendChild(document.createElement("br"));
	}
	}
	buttonDiv.appendChild(docFrag);
	}
	function RPS(userNumber, aiNumber, choiceArray, outcomeArray) {
	var userTag = document.getElementById("userPoints");
	var aiTag = document.getElementById("aiPoints");
	var outcomeTag = document.getElementById('outcome');
	var gameOutcome = DetermineOutcome(userNumber, aiNumber, choiceArray.length);
	if (gameOutcome == 0) {
	outcomeTag.innerHTML = "Tie!";
	}
	else if (gameOutcome == 1 \|\| gameOutcome == 2) {
	var choiceIndex = (gameOutcome == 1) ? userNumber : aiNumber;
	if (gameOutcome == 1) {
	var outcomeIndex = (userNumber < aiNumber) ? aiNumber - userNumber : aiNumber - (userNumber - choiceArray.length);
	outcomeTag.innerHTML = choiceArray[choiceIndex] + " " + outcomeArray[choiceIndex][outcomeIndex - 1];
	userPoints += 1;
	}
	else if (gameOutcome == 2) {
	var outcomeIndex = (aiNumber < userNumber) ? userNumber - aiNumber : userNumber - (aiNumber - choiceArray.length);
	outcomeTag.innerHTML = choiceArray[choiceIndex] + " " + outcomeArray[choiceIndex][outcomeIndex - 1];
	aiPoints += 1;
	}
	}
	else if (gameOutcome == -1) {
	outcomeTag.innerHTML = "Error";
	}
	userTag.innerHTML = "Player 1: " + userPoints;
	aiTag.innerHTML = "Player 2: " + aiPoints;
	}
	function resetPoints() {
	userPoints = 0;
	aiPoints = 0;
	}
	// Button functions for each of the games
	function buttons5() {
	deleteButtons();
	addOptions(choices5, RPS5);
	}
	function buttons7() {
	deleteButtons();
	addOptions(choices7, RPS7);
	}
	function buttons9() {
	deleteButtons();
	addOptions(choices9, RPS9);
	}
	function buttons11() {
	deleteButtons();
	addOptions(choices11, RPS11);
	}
	function buttons15() {
	deleteButtons();
	addOptions(choices15, RPS15);
	}
	function buttons25() {
	deleteButtons();
	addOptions(choices25, RPS25);
	}
	function deleteButtons() {
	var buttonDiv = document.getElementById("buttons");
	while (buttonDiv.firstChild) {
	buttonDiv.removeChild(buttonDiv.firstChild);
	}
	}
	// Game functions
	function RPS5() {
	var aiNumberDecider = Math.random();
	var userImage = document.getElementById('userImage');
	var aiImage = document.getElementById("aiImage");
	aiChoiceNumber = Math.floor(aiNumberDecider * 5);
	aiChoice = choices5[aiChoiceNumber];
	var userchoiceNumber;
	var userChoice = this.value;
	for (var i = 0; i < choices5.length; i++) {
	if (userChoice == choices5[i])
	userchoiceNumber = i;
	}
	userImage.src = 'images/' + userChoice + '.png';
	userChoice.title = userChoice;
	userChoice.alt = userChoice;
	aiImage.src = 'images/' + aiChoice + '.png';
	aiChoice.title = aiChoice;
	aiChoice.alt = aiChoice;
	RPS(userchoiceNumber, aiChoiceNumber, choices5, outcomes5);
	}
	function RPS7() {
	var aiNumberDecider = Math.random();
	var aiChoiceNumber = Math.floor(aiNumberDecider * 7);
	var aiChoice = choices7[aiChoiceNumber];
	var userchoiceNumber;
	var userChoice = this.value;
	for (var i = 0; i < choices7.length; i++) {
	if (userChoice == choices7[i])
	userchoiceNumber = i;
	}
	userImage.src = 'images/' + userChoice + '.png';
	userChoice.title = userChoice;
	userChoice.alt = userChoice;
	aiImage.src = 'images/' + aiChoice + '.png';
	aiChoice.title = aiChoice;
	aiChoice.alt = aiChoice;
	RPS(userchoiceNumber, aiChoiceNumber, choices7, outcomes7);
	}
	function RPS9() {
	var aiNumberDecider = Math.random();
	var userImage = document.getElementById('userImage');
	var aiImage = document.getElementById("aiImage");
	aiChoiceNumber = Math.floor(aiNumberDecider * 9);
	aiChoice = choices9[aiChoiceNumber];
	var userchoiceNumber;
	var userChoice = this.value;
	for (var i = 0; i < choices9.length; i++) {
	if (userChoice == choices9[i])
	userchoiceNumber = i;
	}
	userImage.src = 'images/' + userChoice + '.png';
	userChoice.title = userChoice;
	userChoice.alt = userChoice;
	aiImage.src = 'images/' + aiChoice + '.png';
	aiChoice.title = aiChoice;
	aiChoice.alt = aiChoice;
	RPS(userchoiceNumber, aiChoiceNumber, choices9, outcomes9);
	}
	function RPS11() {
	var aiNumberDecider = Math.random();
	var userImage = document.getElementById('userImage');
	var aiImage = document.getElementById("aiImage");
	aiChoiceNumber = Math.floor(aiNumberDecider * 11);
	aiChoice = choices11[aiChoiceNumber];
	var userchoiceNumber;
	var userChoice = this.value;
	for (var i = 0; i < choices11.length; i++) {
	if (userChoice == choices11[i])
	userchoiceNumber = i;
	}
	userImage.src = 'images/' + userChoice + '.png';
	userChoice.title = userChoice;
	userChoice.alt = userChoice;
	aiImage.src = 'images/' + aiChoice + '.png';
	aiChoice.title = aiChoice;
	aiChoice.alt = aiChoice;
	RPS(userchoiceNumber, aiChoiceNumber, choices11, outcomes11);
	}
	function RPS15() {
	var aiNumberDecider = Math.random();
	var userImage = document.getElementById('userImage');
	var aiImage = document.getElementById("aiImage");
	aiChoiceNumber = Math.floor(aiNumberDecider * 15);
	aiChoice = choices15[aiChoiceNumber];
	var userchoiceNumber;
	var userChoice = this.value;
	for (var i = 0; i < choices15.length; i++) {
	if (userChoice == choices15[i])
	userchoiceNumber = i;
	}
	userImage.src = 'images/' + userChoice + '.png';
	userChoice.title = userChoice;
	userChoice.alt = userChoice;
	aiImage.src = 'images/' + aiChoice + '.png';
	aiChoice.title = aiChoice;
	aiChoice.alt = aiChoice;
	RPS(userchoiceNumber, aiChoiceNumber, choices15, outcomes15);
	}
	function RPS25() {
	var aiNumberDecider = Math.random();
	var userImage = document.getElementById('userImage');
	var aiImage = document.getElementById("aiImage");
	aiChoiceNumber = Math.floor(aiNumberDecider * 25);
	aiChoice = choices25[aiChoiceNumber];
	var userchoiceNumber;
	var userChoice = this.value;
	for (var i = 0; i < choices25.length; i++) {
	if (userChoice == choices25[i])
	userchoiceNumber = i;
	}
	userImage.src = 'images/' + userChoice + '.png';
	userChoice.title = userChoice;
	userChoice.alt = userChoice;
	aiImage.src = 'images/' + aiChoice + '.png';
	aiChoice.title = aiChoice;
	aiChoice.alt = aiChoice;
	RPS(userchoiceNumber, aiChoiceNumber, choices25, outcomes25);
	}

	function DetermineOutcome(userChoice, aiChoice, numOfChoices) {
	// Number of choices can't be even or the game doesn't work properly!
	if (numOfChoices % 2 == 0 \|\| userChoice > numOfChoices - 1 \|\| aiChoice > numOfChoices - 1) {
	return -1;
	}
	// Result is a tie!
	if (userChoice == aiChoice) {
	return 0;
	}
	for (var i = 1; i <= numOfChoices / 2; i++) {
	if (aiChoice == (userChoice + i) % numOfChoices) {
	return 1;
	}
	}
	return 2;
	}
	p {
	font-family: paragraphFont;
	font-size: 24px;
	}
	body {
	background-color: darkgray;
	}
	/Game Options/
	.gamebtn {
	background-color: gray;
	color: white;
	padding: 16px;
	border: none;
	cursor: pointer;
	}
	.gamebtn:hover, .gamebtn:focus {
	background-color: lightgrey;
	}
	.games {
	position: relative;
	display: inline-block;
	}
	.options {
	background-color: gray;
	color: white;
	padding: 16px;
	border: none;
	cursor: pointer;
	}
	.gametypes {
	display: none;
	position:absolute;
	background-color: #f1f1f1;
	min-width: 160px;
	overflow: auto;
	box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
	z-index: 1;
	}
	.gametypes button {
	background-color: gray;
	color: white;
	padding: 16px;
	border: none;
	cursor: pointer;
	display: inline-block;
	}

	.gametypes button:hover {
	background-color: lightgray;
	}
	.choicebtn {
	background-color: gray;
	color: white;
	padding: 16px;
	border: none;
	cursor: pointer;
	display: inline-block;
	}
	.choicebtn:hover {
	background-color: lightgray;
	}
	.gametypes a{
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	}
	.games a:hover {
	background-color: #ddd;
	}
	.show {
	display:block;
	}
	@font-face {
	font-family: paragraphFont;
	src: url(paragraphFont.woff)
	}