The HTML source code
<div id="game">
<div id="userSelection">
<h1>Select your choice</h1>
<ul>
<li class="selection" id="stone">
<img src="stone.png" alt="Stone" onclick="playWith('stone')"/>
</li>
<li class="selection" id="paper">
<img src="paper.png" alt="Paper" onclick="playWith('paper')"/>
</li>
<li class="selection" id="scissor">
<img src="scissor.png" alt="Scisor" onclick="playWith('scissor')"/>
</li>
</ul>
<button onclick="playGame()">Play</button>
</div>
<div id="result"></div>
</div>
The JavaScript Source Code
Global variables used
// Global variable for remember wich option has selected the user</div>
var userOption = undefined;</div>
Function that will be called when the user click on an option
function playWith(option){
// first, we deselect the previous selected element (if exist)
if (userOption != undefined)
{
userSelectionElement = document.getElementById(userOption);
// we remove the purple border (if exist)
userSelectionElement.style.border = "5px #F8F8F8 solid";
}
// then, we select the user option and we add
// a purple border
userOption = option;
userSelectionElement = document.getElementById(option);
userSelectionElement.style.border = "5px #990066 solid";
}
Function that execute the game
function playGame(){
var computerOption = Math.random();
if (computerOption <0.34){
computerOption = "stone";
}else if(computerOption <=0.67){
computerOption = "paper";
}else{
computerOption = "scissor";
}
resultMessage = compare(userOption, computerOption);
document.getElementById("result").innerHTML =
"<p>User select: " + userOption + " - Computer select:"
+ computerOption + "</p> <p>" + resultMessage + "</p>";
}
Function that compares the two selections and return a message
function compare(userSelection, computerSelection)
{
if(userSelection == undefined)
{
return "Please, select an option before play"
}
if (userSelection == computerSelection)
{
return "It is a draw!";
}
if (userSelection == "stone")
{
if (computerSelection == "scissor")
{
return "You win.";
} else {
return "The computer win. Try again.";
}
} else if (userSelection == "paper") {
if (computerSelection == "stone")
{
return "You win." ;
} else if("scissor") {
return "The computer win. Try again." ;
}
} else if (userSelection == "scissor") {
if (computerSelection == "stone")
{
return "The computer win. Try again.";
}else{
return "You win.";
}
}
}
And finally… a little bit style!
#game{
background-color: #FFCCFF;
border-radius: 15px;
}
#userSelection
{
text-align: center;
padding: 30px;
margin: 10px;
}
#result
{
text-align: center;
padding: 30px;
font-size: 1.2em;
}
.selection
{
float: left; /* Images float to the left, so they appear in the same line */
list-style: none; /* Remove the bullet */
border: 5px #F8F8F8 solid;
border-radius: 15px;
margin: 30px;
}
.selection img
{
width: 70px; /* All the images have the same size */
padding: 10px;
}
button
{
background-color: #990066;
color: white;
border-radius: 10px;
font-size: 100%;
}