Make your own adventure game!

index.html

<div id="historial">
  
  <h2>Instructions</h2>
  Welcome to "Arkator Tales: The brave adventurer". This is a game where you take the role of an adventurer who will change the history of the world of Arkator. The way to play is pretty simple, you only have to read the story that appears up here and then make your choice by writing the action you think will be the better option. The game ussually will offer you some options  that you can choose. This options will be an upper case action, like JUMP, RUN... Or some other words like LEFT, RIGHT, NORTH, SOUTH... In some cases, the words that the game gives to you may be not the only options, so you can try to figure out for yourself what could you do. Ok, now that you know how the game works, let's play it! Thank you for reading the instructions!
  
  <h2>Chapter 0: Prologue</h2>
  If you have a save code insert it now, if not just type NEXT.
  
</div>
<div>
  
  <input type="text" id="input_txt">
    
    <button type="button" name="boton" value="Aceptar" id="botoncico" onclick="getTxt()">Submit!</button>
    
</div>

make-your-own-adventure-game.markdown

Make your own adventure game!

This is just a make your adventure game, were you take the role of the main character who lives a lot of quests! (Work in progress)

A Pen by Pablo on CodePen.

License.

script.js

var history_var =document.getElementById("historial");
//The upper variable is the variable of the first div. Is where we write our stories!
var input_var = document.getElementById("input_txt");
//The upper variable is the element Id of the input box.

//Unsued function
/*function mySecondFunction() {
  history_var.innerHTML += "<br>" + input_var.value;
};*/

var writtenText = "";
//The upper variable will tell us the value inside the input element.

var mission=0;
//The upper variable tells us the current mission
function wrongOption(){
  history_var.innerHTML += "<br>You can't  " + writtenText + ". You have to choose one of the options above."
}
//The upper function will print out some text when we choose a wrong writed option, or non-existing option.
var monsterr = "skeletonWarrior";
//The upper variable tells us wich monster are we fighting.
var monsterCurrentHp = 0;
//This is the monster's current hp. It changes to the monster's current hp when we fight him.
var hitChance = 0;
//The chance to hit the monster. It depends on the monster we're fighting.
var yourAttack = 2;
//The damage you'll do on the monster.
var yourHp = 15;
//Your maximum Hp.
var yourCurrentHp = 0;
//Your current Hp.
var totalDamage=0;
//It equals to the amount of damage we do in this round plus the damage we did in previous rounds.
var totalEnemyDamage=0;
//The same as totalDamage but this is for your HP.

//The upper variables are used in the function fight
var victory = 0;
//0 if we are on a battle, 1 if we win the battle 2 if we loose the battle.
function realFight(monsterAttack, monsterHp)
{
      monsterCurrentHp = monsterHp-totalDamage;
      yourCurrentHp = yourHp - totalEnemyDamage;
      hitChance = Math.floor(Math.random()*2);
      if(monsterCurrentHp>0){
        if(yourHp>0){
        if(writtenText==="ATTACK"){
        if (hitChance===0) {
          history_var.innerHTML += "<br>The enemy blocks your punch and deals you " + monsterAttack + " damage!";
          totalEnemyDamage+=monsterAttack;
          yourCurrentHp = yourHp - totalEnemyDamage;
          if(yourCurrentHp>0){
          history_var.innerHTML += "<br>You  have " + yourCurrentHp + " HP now. You can still ATTACK the enemy!"
          } else{
            victory=2;
          }
        } else {
          history_var.innerHTML += "<br>You hit the monster dealing " + yourAttack + " damage!";
          totalDamage += yourAttack;
          monsterCurrentHp = monsterHp-totalDamage;
          if(monsterCurrentHp<=0) {
            history_var.innerHTML += "<br>You won the battle!";
            totalDamage = 0;
            victory=1;
          }
        }
        } else {
          wrongOption();
        } 
        if(monsterCurrentHp>0){
          if(hitChance===1) {
        history_var.innerHTML += "<br>You haven't defeated the monster yet, he still has " + monsterCurrentHp + " HP! ATTACK him again!";
          }
        }
      }
  }
}
//The first parameter is the attack of the monster and the second one its life.

function fight(monster) {
  
  switch (monster) {
    case 'skeletonWarrior':
      realFight(2,15);
      break;
    case 'bigMan':
      realFight(1,8);
      break;
  }
}
//We will call this function passing the parameter of the monster's name

function game() {
  switch(mission) {
    case 0:
      if(writtenText==="NEXT") {
        history_var.innerHTML += "<br>Your adventure begins at the local market of your hometown. You left your home very early to buy some goods that you need for today. Some eggs, potatoes, carrots, rice and bread. The small streets with the wood houses were always a pleasant view in the mornings. You finally arrive the market and start buying the goods. <br>Suddenly, when you are about to return to your home you hear the scream of a woman. You could try to LOCATE SCREAM or GO HOME.";
        mission=0.1;
      } else {
        history_var.innerHTML += "<br>The inserted save code is incorrect";
      }
      break;
    case 0.1:
      if(writtenText==="LOCATE SCREAM"){
        history_var.innerHTML += "<br>-----<br>You look in every direction trying to find out from where does the cry come. Finally thanks to another shout of the woman you find her. You find that she's being harassed by a big man. Unbelievable, in the middle of a market in broad daylight. You can try to make him STOP or GO HOME.";
        mission=0.2;
      } else if(writtenText==="GO HOME") {
        history_var.innerHTML += "<br>You decide the scream is not part of your business and head home.";
      } else if(writtenText==="EAT BREAD" || writtenText==="EAT CARROT" || writtenText==="EAT"){
        history_var.innerHTML += "<br>You eat something, but can still try to LOCATE SCREAM or GO HOME."
      } else {
        wrongOption();
      }
      break;
    case 0.2:
      if (writtenText==="STOP") {
        history_var.innerHTML += "<br>-----<br>You approach the guy and tell him what does he think he's doing and you also tell him to leave the lady alone. He tells you to get out of there and stay close to your business. The girl looks at you with a worried looking face. She tells you 'please help me'. The man shouts at the woman 'you better shut up!'. At this point you can't go home like if anything hapenned. You can try to solve this by the GOOD way, or by the BAD way. What do you choose?";
        mission=0.3;
      } else if (writtenText==="GO HOME") {
        history_var.innerHTML += "<br>-----<br>You decide that going back home is your better option.";
      } else {
        wrongOption();
      }
      break;
    case 1.1:
      if (victory===0) {
        fight(monsterr);
      }
      break;
  }
  document.getElementById("input_txt").value="";
}
//The upper function is the body of the game. We switch the mission and the cases are the number of the current mission.


function getTxt() {
  writtenText = input_var.value;
  writtenText=writtenText.toUpperCase();
  game();
  history_var.scrollTop = history_var.scrollHeight;
}
//The upper function is the body of the game aplicated to the button.

style.css

body {
  font-size: 1.5em;
  color: #04FF00;
  background:black;
}
div {
  padding: 5px;
  border: 1px #04FF00 groove;
  border-radius: 8px;
}

#historial {
  height: 15em;
  overflow-y: scroll;
}