Assignment 7 - JavaScript

A starter file for students to fork

by Brooke Henderson

HTML

<p id="narration"></p>

<p>Choose one:</p>
<ul>
  <li>
    <input type="radio" name="mountain" id="climb" value="climb">
    <label for="climb">Climb</label>
  </li>
  <li>
    <input type="radio" name="mountain" id="eat" value="eat">
    <label for="eat">Eat</label>
  </li>
  <li>
    <input type="radio" name="mountain" id="rest" value="rest">
    <label for="rest">Rest</label>
  </li>
</ul>
<button id="go">Go</button>

<!-- text will be written into the spans -->
<ul>
  <li>Position: <span id="position"></span></li>
  <li>Health: <span id="health"></span></li>
  <li>Food: <span id="food"></span></li>
  <li>Remaining: <span id="distance"></span> feet</li>
</ul>

CSS

body {
  font-family: Calibri, sans-serif;
  font-size: 100%;
  line-height: 1.4em;
}

li {
  list-style: none;
}

#narration {
  padding: 10px 20px;
  background: #ff0;
}

JavaScript

//Brooke Henderson
// variables
var height = 6000;
var position = 0;
var health = 100;
var food = 50;
var goat = 0;
var distance = height;
var restNum = 0;

// messages
var m1 = "You're at the base of a mountain that is " + height + " feet high. Your goal is to climb it. Watch out for mountain goats.";
var m2 = "A large mountain goat with gigantic horns blocks your path.";
var m3 = "Oh, no! A mountain goat has knocked you down!";
var m4 = "Oh, snap! You are too exhausted to continue.";
var m5 = "Congratulations! You've reached the summit!";
var m6 = "You must select an option before you click Go.";
var m7 = "You are climbing the mountain!";
var m8 = "Oh, snap! You are too hungry to continue.";
var m9 = "You can only rest 5 times.";
var m10 = "You are resting.";


// the value of message will be changed depending on player actions
// m1 is the starting message value
var message = m1;

// this function executes immediately when the page loads
writeResults();

// click the button to execute this function
// NOTE: no parentheses after the function name in this case
document.getElementById("go").onclick = climberResult;

// the main function - it calls other functions
function climberResult() {
  if (health <= 0) {
    message = m4;
    climb.checked = false;
    eat.checked = false;
    rest.checked = false;
  } else if (climb.checked) {
    climbAction();
  } else if (eat.checked) {
    eatAction();
  } else if (rest.checked) {
    restAction();
  } else {
    // if nothing is checked
    message = m6;
  }
  // calculate the remaining distance
  distance = height - position;

  // write out the new values for all the vars
  writeResults();
}

// more functions

function climbAction() {

  position += 100;
  health -= 10;
  message = m7;
  climb.checked = false;
  if (position >=6000) {
    position = 6000;}
  if (position==3000) {
  goatAttack();
  }
}

function eatAction() {

  food -= 5;
  if (food <= 0) {
    food = 0;
    message = m8;
  }
  health += 10;
  if...