JS Simple Game

In this example below you will see how to do a JS Simple Game with some HTML / CSS and Javascript

Learning how to pass the input from HTML to JavaScript and then posting the results from JavaScript to HTML. Using what was learned from Codecademy and Eduonix.

Thumbnail
This awesome code was written by alofacarl, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright alofacarl ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>JS Simple Game</title>
  <link href="https://fonts.googleapis.com/css?family=Lateef" rel="stylesheet">

  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
  <!-- Input -->
  <form class="form-box" name="choiceForm" onsubmit="return submitAnswer()">
    <h1 class="title">The Pirate's Challenge</h1>
    <h3>You are sitting across from a <em>Pirate</em> with a loaded pistol. She asks you to guess the number she's thinking from 1 - 3.
      <br>
      <br>
      If you <em>guess right</em>, you'll live.
      <br>
      If you guess wrong, she'll decide your fate.</h3>
    <input class="input-box" type="text" name="userChoice">
    <input class="submit-button" type="submit" value="Give Her Your Answer">
  </form>
  
  
</div>

<!-- Output -->
<div class="output-box">
  <h1 id="js-results"></h1>
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/alofacarl/js-simple-game-zwNvrb */
body { 
  font-family: sans-serif;
  margin-top: 30px;
}

h3 { line-height: 1.25em; }

.title { text-transform: capitalize; }

.container {
  background-color: Crimson;
  color: #fff;
  width: 350px;
  height: 400px;
  margin: auto;
  padding: 20px 50px;
}

/* Form Box */
.input-box {
  border: none;
  border-radius: 2px;
  padding: 10px;
  width: 80%;
}

.submit-button {
  background-color: LightSkyBlue;
  border: none;
  border-radius: 2px;
  color: MidnightBlue;
  cursor: pointer;
  display: block;
  font-weight: bold;
  margin-top: 15px;
  padding: 10px;
}

/* Output Box */
.output-box {
  font-family: 'Lateef', cursive;
  margin: auto;
  text-align: center;
  width: 80%;
}

/*Downloaded from https://www.codeseek.co/alofacarl/js-simple-game-zwNvrb */
function submitAnswer() {
  var compChoice = Math.floor(Math.random() * 4);
  
  // Get User Input  
  var userChoice = document.forms["choiceForm"]["userChoice"].value;
  
  // Validation
  if (userChoice > 3 || userChoice < 1) {
      alert("Ha! Don't be scared. C'mon kid, choose a number 1 - 3.");
      return false;
  }
  
  // Compare Choices
  function compare (choice1, choice2) {
    if (choice1 == choice2) {
      return "Aargh! I'll have to keep my word and let you live. But you better leave before I change my mind!";
    } else if (choice1 > choice2) {
      if (choice2 === 0) {
        return "I'm a Pirate, you think I'll play fair? Enough of your grumbling and get to rowing my ship. By yourself. The rest of the crew will just sit and laugh at you!"
      } else {
      return "Do you have any last words before I enroll you in a public school?";
      }
    } else {
      return "<h1>BANG! BANG!</h1> <p>(...<em>with a hammer in your hand, you are forced to repair her ship</em>.)</p>";
    }
  }
  
  var outcome = compare(userChoice, compChoice);
  
  // Display Results
  var results = document.getElementById('js-results');
	results.innerHTML = 'Hmm... so you guessed ' + userChoice + '<br> I was thinking of the number ' + compChoice + '<br>' + outcome;
	
	return false;
}

Comments