Skip to Content

Rock-Paper-Scissors HTML

rock_paper_scissors.html
<!-- Using a combination of HTML, HTML forms, CSS, and JavaScript -->
<!-- we will build a simple version of a Rock, Paper, Scissors game, --> 
<!-- where a user can play against the computer. -->
 
<html>
<!-- Inside the head tag you include some information about the page. -->
<head>
  <!-- The title is what shows on your browser tab. -->
  <title>Play Rock-Paper-Scissors</title>
  <!-- Add a link to the CSS file that has the required styling. -->
	<link href="rps_complete.css" rel="stylesheet" type="text/css" />
  <!-- Add a link to the JavaScript file that has the required functions to be executed for this page. -->
	<script src="rps_complete.js"></script>
</head>
<!-- Inside the body tags you include the actual page content to be displayed. -->
<body>
  <p class="box-title">The Rock-Paper-Scissors Game</p>
  <p class="styled-para">
    This is the popular game between two players where each player chooses one of three options and the winner is decided by a hierarchy rule that goes:
  </p>
  <ul class="styled-para">
    <li>Rock beats Scissors</li>
    <li>Paper beats Rock</li>
    <li>Scissors beats Paper</li>
  </ul>
  <!-- CSS styles can also be defined inline for an element as below. -->
  <!-- Use sparingly only for ad-hoc styling for a specific element. --> 
  <!-- Overuse can lead to code that is difficult to manage and maintain. -->
  
  <h2 style="font-family: Arial;color:green;">Let's Play!</h2>
  <p class="styled-para">
    Enter one of the three options:
  </p>
  <!-- A Form is a collection of elements that accept user inputs. -->
  <!-- There are a few types of form elements, the common ones being -->
  <!-- a text input box where the user can input a value -->
  <!-- and a button which the user can click on to initiate an action. -->
  
  <form>
    <!-- The form action is processed in the JavaScript code -->
    <!-- To be able to identify the text box to read the value from -->
    <!-- the element is given an id. -->
 
    <input type="text" id="user-call-input" />
    <p id="error-message" style="color:red"></p>
 
    <!-- All elements have what are known as events which refer to possible user actions. -->
    <!-- Each type of element will have its own set of relevant events. -->
    <!-- For example, a button element will have an "onclick" event. -->
    <!-- A JavaScript function can be attached to the events that need to be "handled". -->
    <!-- When the event occurs, such as the user clicking on a button, -->
    <!-- the attached function is executed. -->
 
    <button type="button" onclick="playRound()">Play!</button>
  </form>
 
  <!-- We can create empty elements as placeholders --> 
  <!-- that will be dynamically populated with values --> 
  <!-- by the Javacript function as it executes. -->
  <!-- Each element must have an id so the function can identify it. -->
  
  <p class="styled-para">
    <strong>Your call: </strong><span id="your-call" class="big-number"></span>
  </p>
 
	<!-- So far, we received an input from the user and -->
  <!-- displayed it on the page using the JavaScript function -->
	<!-- Now we add the game logic where the computer generates a random call -->
  <!-- and the winner is determined -->
	<!-- Create placeholder elements for the values generated by the game logic -->
 
  <p class="styled-para">
    <strong>Computer call: </strong><span id="computer-call" class="big-number"></span>
  </p>
  <p class="styled-para">
    <!-- Some more inline CSS styling. -->
    <span id="round-winner-call" class="big-number" style="font-family: Arial;color:green;"></span>
  </p>
  <p class="styled-para">
    Score after <span id="rounds">0</span> rounds:
  </p>
  <p class="styled-para">
    You: <span id="user-score" class="big-number">0</span>
    Computer: <span id="computer-score" class="big-number">0</span>
    Draws: <span id="no-score-count" class="big-number">0</span>
  </p>
</body>
</html>
Rock Paper ScissorsCSS