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%;
}