<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Rock Paper Scissors Lizard Spock</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
<div id="game"></div>
<div id="score">
<div class="column">Won: <span id="won">0</span></div>
<div class="column">Lost: <span id="lost">0</span></div>
<div class="column">Draw: <span id="draw">0</span></div>
</div>
<div id="result"></div>
<style>
#game
{
margin:50px auto;
max-width:500px;
}
#game button
{
border:none;
opacity:0.8;
width:20%;
font-size:60px;
cursor:pointer;
background:transparent;
}
#game button:hover
{
opacity:1;
}
#score
{
font-size:26px;
max-width:500px;
min-height:32px;
margin:5px auto;
}
#score:before,
#score:after
{
content:'';
display:block;
clear:both;
}
.column
{
float:left;
width:33.33%;
text-align:center;
}
#result
{
font-size:30px;
margin:50px auto;
text-align:center;
min-height:75px;
}
</style>
<script>
var buttons =
[
{'name': 'Rock', 'icon': '✊🏻', 'beats': {'Scissors': 'crushes', 'Lizard': 'crushes'}},
{'name': 'Paper', 'icon': '✋🏻', 'beats': {'Rock': 'covers', 'Spock': 'disproves'}},
{'name': 'Scissors', 'icon': '✌🏻', 'beats': {'Paper': 'cuts', 'Lizard': 'decapitates'}},
{'name': 'Lizard', 'icon': '🤏🏻', 'beats': {'Spock': 'poisons', 'Paper': 'eats'}},
{'name': 'Spock', 'icon': '🖖🏻', 'beats': {'Scissors': 'smashes', 'Rock': 'vaporizes'}}
];
for(let i = 0; i < buttons.length; i++)
{
let button = document.createElement('button');
button.appendChild(document.createTextNode(buttons[i].icon));
document.getElementById('game').appendChild(button);
button.addEventListener('click', function() { choice(i); });
}
function choice(index)
{
let you = buttons[index];
let computer = buttons[Math.floor(Math.random() * buttons.length)];
let result = document.getElementById('result');
if(you.beats.hasOwnProperty(computer.name))
{
increase('won');
result.innerHTML = 'You Won!<br>';
result.innerHTML += [you.icon, you.name, you.beats[computer.name], computer.name, computer.icon].join(' ');
}
else if(computer.beats.hasOwnProperty(you.name))
{
increase('lost');
result.innerHTML = 'You Lose!<br>';
result.innerHTML += [computer.icon, computer.name, computer.beats[you.name], you.name, you.icon].join(' ');
}
else
{
increase('draw');
result.innerHTML = 'Draw!<br>';
result.innerHTML += [computer.icon, 'Nobody Wins', you.icon].join(' ');
}
}
function increase(id)
{
let element = document.getElementById(id);
element.innerHTML = Number(element.innerHTML) + 1;
}
</script>
</body>
</html>