Some cleanup and converted to 'object style'

CSS/style.css

@@ -1,2 +1,2 @@
 /* Class for keeping divs hidden until JavaScript determines they should be shown. */
-.hidden { visibility: hidden; }
+.hidden { display: none; }

JS/character.js

@@ -1,33 +1,47 @@
-// Character related variables.
-var gold = 0;
-var HP = 10;
-var lvl = 1;
-var XP = 0;
-var HP = 10;
-var currentHP = 10;
-var charname;
+var character = {
+  // Character related variables.
+  charname: "",
+  level: 1,
+  xp: 0,
+  gold: 0,
+  maxHP: 10,
+  currentHP: 10,
 
-// Weapon and hit related variables.
-var weapon;
-var hit = ["Critical Miss", "Miss", "Glancing Hit", "Hit", "Critical Hit"];
+  // Weapon and hit related variables.
+  weapon: "",
+  // hit: ["Critical Miss", "Miss", "Glancing Hit", "Hit", "Critical Hit"], // This probably doesnt need to exist here since it's configured in encounter.js
 
-// This function sets the variables charname and weapon with user input from the form on the index page, then starts the game.
-function charFill(form) {
-	window.charname = form.charname.value;
-	window.weapon = form.weapon.value;
-	/* These next commands find the divs of the same id and modify their style (CSS) from visible to hidden, or vice versa.
-	In effect, it controls what the user sees on the page. */
-	document.getElementById("charForm").style.visibility="hidden";
-	document.getElementById("charInfo").style.visibility="visible";
-	document.getElementById("monsterInfo").style.visibility="visible";
-	document.getElementById("encounter").style.visibility="visible";
-	document.getElementById("charActions").style.visibility="visible";
-	// The next two lines call the charLoad and encounter functions. encounter() is in the encounter.js file.
-	charLoad();
-	encounter();
-}
+  // This function sets the variables charname and weapon with user input from the form on the index page, then starts the game.
+  charFill: function(form) {
+    this.charname = form.charname.value;
+    this.weapon = form.weapon.value;
 
-//This function outputs the starting character info to to the charInfo div.
-function charLoad() {
-	document.getElementById("charInfo").innerHTML = "<p>Name: " + window.charname + "<br />" + "Weapon: " + window.weapon + "<br />" + "Hitpoints: " + currentHP + "/" + HP + "<br />" + "Level: " + lvl + "<br />" + "XP: " + XP + "<br />" + "Gold: " + gold + "</p>";
-}
+    /* These next commands find the divs of the same id and modify their style (CSS) from visible to hidden, or vice versa.
+    In effect, it controls what the user sees on the page.
+    Note: You could also use visibility="hidden" here, but then it leaves ugly white gaps on your page. */
+    document.getElementById("charForm").style.display="none";
+    document.getElementById("charInfo").style.display="block";
+    document.getElementById("monsterInfo").style.display="block";
+    document.getElementById("encounter").style.display="block";
+    document.getElementById("charActions").style.display="block";
+
+    // The next two lines call the charLoad and encounter functions. encounter() is in the encounter.js file.
+    this.charLoad();
+    encounter.encounter(); // This probably shouldn't be called from here..
+  },
+
+	//This function outputs the starting character info to to the charInfo div.
+	charLoad: function() {
+    // We split the string assignment up so that it's easier to read (pretty code is good code!)
+    var charInfo = "<p>";
+    charInfo += "Name: " + this.charname + "<br />";
+    charInfo += "Weapon: " + this.weapon + "<br />";
+    charInfo += "Hitpoints: " + this.currentHP + "/" + this.maxHP + "<br />";
+    charInfo += "Level: " + this.level + "<br />";
+    charInfo += "XP: " + this.xp + "<br />";
+    charInfo += "Gold: " + this.gold;
+    charInfo += "</p>";
+
+		document.getElementById("charInfo").innerHTML = charInfo;
+	}
+};

JS/encounter.js

@@ -1,82 +1,111 @@
-// Monster related variables.
-var monsters = ["rat", "goblin", "zombie", "werewolf", "vampire", "lich"];
-var monster;
-var monsterHP;
-var monsterDamage;
 
-// Hit related variables.
-var hit = ["Critical Miss", "Miss", "Glancing Hit", "Hit", "Critical Hit"];
+var encounter = {
+  // Monster related variables.
+	monsters: ["rat", "goblin", "zombie", "werewolf", "vampire", "lich"],
+  monster: "",
+  monsterHP: 0,
+  monsterDamage: 0,
 
-// This function determines what monster the player will be fighting when an encounter begins.
-function encounter() {
-	// This assigns a value from the monsters array by generating a random number between 0 and 5.
-	window.monster = monsters[Math.floor(Math.random() * 5)];
+  // Hit related variables.
+  hit: ["Critical Miss", "Miss", "Glancing Hit", "Hit", "Critical Hit"],
 
-	if (monster == "rat") {
-		window.monsterHP = 10;
-		window.monsterDamage = 0;
-		document.getElementById("encounter").innerHTML = "<p>You have encountered a " + monster + "!</p>";
-	}
-	else if (monster == "goblin") {
-		window.monsterHP = 20;
-		window.monsterDamage = 1;
-		document.getElementById("encounter").innerHTML = "<p>You have encountered a " + monster + "!</p>";
-	}
-	else if (monster == "werewolf") {
-		window.monsterHP = 40;
-		window.monsterDamage = 2;
-		document.getElementById("encounter").innerHTML = "<p>You have encountered a " + monster + "!</p>";
-	}
-	else if (monster == "vampire") {
-		window.monsterHP = 30;
-		window.monsterDamage = 3;
-		document.getElementById("encounter").innerHTML = "<p>You have encountered a " + monster + "!</p>";
-	}
-	else {
-		window.monsterHP = 20;
-		window.monsterDamage = 4;
-		document.getElementById("encounter").innerHTML = "<p>You have encountered a " + monster + "!</p>";
-	}
-}
+  // This function determines what monster the player will be fighting when an encounter begins.
+  encounter: function() {
+    // This assigns a value from the monsters array by generating a random number between 0 and 5 (the length of the monsters array minus 1).
+    var monsterIndex = util.randomIntFromInterval(0, this.monsters.length-1);
+    this.monster = this.monsters[monsterIndex];
 
-//This function handles the mechanics of battling monsters. It is far from finished.
-function attack() {
-	//This variable is assigned one of the values from the hit array. This is done by generating a random number between 0 and 5.
-	var attackRoll = hit[Math.floor(Math.random() * 5)];
-	//This variable is used to work out damage, assigned a random number betwen 1 and 6.
-	var damage = Math.floor((Math.random() * 5) + 1);
+    if (this.monster == "rat") {
+      this.monsterHP = 10;
+      this.monsterDamage = 0;
+    }
+    else if (this.monster == "goblin") {
+      this.monsterHP = 20;
+      this.monsterDamage = 1;
+    }
+    else if (this.monster == "werewolf") {
+      this.monsterHP = 40;
+      this.monsterDamage = 2;
+    }
+    else if (this.monster == "vampire") {
+      this.monsterHP = 30;
+      this.monsterDamage = 3;
+    }
+    else {
+      this.monsterHP = 20;
+      this.monsterDamage = 4;
+    }
 
-	/* This if tree works out whether or not the attack was a success.
-	Damage is then assigned appropriately. Critical Miss deals half
-	damage to the player. Glancing Hit half damage to enemy. Hit is
-	normal damage to enemy, and Critical double. */
-
-	/* IMPORTANT TO DOS: 
-	# Make it so that when the monster gets to 0 HP or below, it dies.
-	# Write a function for the monster's attack.
-	# Make it so that the player takes damage and can die.
-	# Assign XP and gold to the player upon killing a monster.
-	*/
-	if (attackRoll == "Critical Miss") {
-		var damage = damage/2;
-		window.currentHP = currentHP - damage;
-		document.getElementById("encounter").innerHTML = attackRoll + "! You swing wildly with your " + weapon + " and hit yourself, dealing " + damage + " damage to yourself!"+ "<br />" + window.monsterHP;
-	}
-	else if (attackRoll == "Miss") {
-		document.getElementById("encounter").innerHTML = attackRoll + "! You lunge sloppily, the " + monster + " easily anticipates your attack and dodges out of the way."+ "<br />" + window.monsterHP;
-	}
-	else if (attackRoll == "Glancing Hit") {
-		var damage = damage/2;
-		window.monsterHP = monsterHP - damage;
-		document.getElementById("encounter").innerHTML = attackRoll + "! Your attack is off balance, and the " + monster + " dodges, but you still nick them, dealing " + damage + " damage." + "<br />" + window.monsterHP;
-	}
-	else if (attackRoll == "Hit") {
-		window.monsterHP = monsterHP - damage;
-		document.getElementById("encounter").innerHTML = attackRoll + "! You attack steadily and hit the " + monster + " square on, dealing " + damage + " damage." + "<br />" + window.monsterHP;
-	}
-	else {
-		var damage = damage*2;
-		window.monsterHP = monsterHP - damage;
-		document.getElementById("encounter").innerHTML = attackRoll + "! You attack with expertise, landing a deadly attack upon the " + monster + ", dealing " + damage + " damage." + "<br />" + window.monsterHP;
-	}
-}
+    document.getElementById("encounter").innerHTML = "<p>You have encountered a " + this.monster + "!</p>";
+  },
+
+  //This function handles the mechanics of battling monsters. It is far from finished.
+  attack: function() {
+    //This variable is assigned one of the values from the hit array. This is done by generating a random number between 0 and 5.
+    var hitIndex = util.randomIntFromInterval(0, this.hit.length-1)
+    var attackRoll = this.hit[hitIndex];
+    //This variable is used to work out damage, assigned a random number betwen 1 and 6.
+    var damage = util.randomIntFromInterval(1, 6);
+
+    /* This if tree works out whether or not the attack was a success.
+    Damage is then assigned appropriately. Critical Miss deals half
+    damage to the player. Glancing Hit half damage to enemy. Hit is
+    normal damage to enemy, and Critical double. */
+
+    /* IMPORTANT TO DOS:
+    # Make it so that when the monster gets to 0 HP or below, it dies.
+    # Write a function for the monster's attack.
+    # Make it so that the player takes damage and can die.
+    # Assign XP and gold to the player upon killing a monster.
+    */
+    if (attackRoll == "Critical Miss") {
+      damage = damage/2;
+      character.currentHP = character.currentHP - damage;
+      document.getElementById("encounter").innerHTML = attackRoll + "! You swing wildly with your " + character.weapon + " and hit yourself, dealing " + damage + " damage to yourself!"+ "<br />" + this.monsterHP;
+    }
+    else if (attackRoll == "Miss") {
+      document.getElementById("encounter").innerHTML = attackRoll + "! You lunge sloppily, the " + this.monster + " easily anticipates your attack and dodges out of the way."+ "<br />" + this.monsterHP;
+    }
+    else if (attackRoll == "Glancing Hit") {
+      damage = damage/2;
+      this.monsterHP = this.monsterHP - damage;
+      document.getElementById("encounter").innerHTML = attackRoll + "! Your attack is off balance and the " + this.monster + " dodges, but you still nick them, dealing " + damage + " damage." + "<br />" + this.monsterHP;
+    }
+    else if (attackRoll == "Critical Hit") {
+      damage = damage*2;
+      this.monsterHP = this.monsterHP - damage;
+      document.getElementById("encounter").innerHTML = attackRoll + "! You attack with expertise, landing a deadly attack upon the " + this.monster + ", dealing " + damage + " damage." + "<br />" + this.monsterHP;
+    }
+    else {
+      // Hit
+      this.monsterHP = this.monsterHP - damage;
+      document.getElementById("encounter").innerHTML = attackRoll + "! You attack steadily and hit the " + this.monster + " square on, dealing " + damage + " damage." + "<br />" + this.monsterHP;
+    }
+
+    // Update the character stats
+    character.charLoad();
+
+    // Handle character death
+    if (character.currentHP <= 0) {
+      encounter.died();
+    }
+    else if (this.monsterHP <= 0) {
+      encounter.monsterDied();
+    }
+  },
+
+  monsterDied: function() {
+    // TODO: Do something to show that the monster died.
+    console.log("They dead!");
+  },
+
+  characterDied: function() {
+    // TODO: Do something to show that the character died.
+    console.log("You dead!");
+  },
+
+  run: function() {
+    // TODO: This needs to be implemented.
+    alert("Oh no! You tried to run away but you hadn't coded that function yet. (Hint: Look in encounter.js for the 'run' function)")
+  }
+};

README.md

@@ -0,0 +1,3 @@
+# Bestest RPG!
+
+RPG code for Web Design (WIP)

index.html

@@ -1,21 +1,26 @@
 <html>
 	<head>
 		<title>The best RPG evah!</title>
-		<link rel="stylesheet" type="text/css" href="CSS/style.css" />
+		<link rel="stylesheet" type="text/css" href="css/style.css" />
 
-		<script language="javascript" type="text/javascript" src="JS/character.js"></script>
-		<script language="javascript" type="text/javascript" src="JS/encounter.js"></script>
+		<script language="javascript" type="text/javascript" src="js/util.js"></script>
+		<script language="javascript" type="text/javascript" src="js/character.js"></script>
+		<script language="javascript" type="text/javascript" src="js/encounter.js"></script>
 
 	</head>
 
 	<body>
+		<h1>Bestest RPG!</h1>
 		<div id="charRoll">
-			
+
 			<!-- This form is for gathering user input to determine the character name and the weapon of choice.
 			Currently weapons have no effect on gameplay. -->
 			<form id="charForm">
-				Character Name: <input type="text" name="charname" id="charname" /><br />
-				Select Weapon: <select name = "weapon" id="weapon">
+				<label for="charname">Character Name:</label>
+				<input type="text" name="charname" id="charname" /><br />
+
+				<label for="weapon">Select Weapon:</label>
+				<select name="weapon" id="weapon">
 					<option value="sword">Sword - Faster Attack</option>
 					<option value="axe">Axe - Increased Damage</option>
 					<option value="mace">Mace - Increased Hit Chance</option>
@@ -27,7 +32,7 @@
 				object. this selects the current object, and .form specifies that it is a
 				form object that you want. Therefore, the charFill function knows where
 				to look to find the values that it assigns to the charname and weapon variables. -->
-				<input type="button" value="Submit" name="charSubmit" onclick="charFill(this.form)">
+				<input type="button" value="Submit" name="charSubmit" onclick="character.charFill(this.form)">
 			</form>
 		</div>
 
@@ -41,24 +46,24 @@
 
 		<!-- To have JavaScript import information regarding the monster here, just as it
 		does with the character. Have not written this function yet. -->
-		<div id = "monsterInfo" class="hidden">
+		<div id="monsterInfo" class="hidden">
 		</div>
 
 		<!-- JavaScript imports status reports during an encounter here. -->
-		<div id ="encounter" class="hidden">
+		<div id="encounter" class="hidden">
 		</div>
 
 		<!-- These buttons govern player actions. run() function is not written yet. -->
 		<div id="charActions" class="hidden">
-			<button onclick="attack()">ATTACK</button><br />
-			<button onclick="run()">RUN</button>
+			<button onclick="encounter.attack()">ATTACK</button><br />
+			<button onclick="encounter.run()">RUN</button>
 		</div>
 
-		<!-- This div is not displayed when submit is clicked. Once the player wins an 
+		<!-- This div is not displayed when submit is clicked. Once the player wins an
 		encounter, this div will be displayed. The function for winning has not been
 		written yet. -->
 		<div id ="next" class="hidden">
-			<button onclick="encounter()">Next encounter!</button>
+			<button onclick="encounter.encounter()">Next encounter!</button>
 		</div>
 	</body>
-</html>
+</html>

js/util.js

@@ -0,0 +1,7 @@
+var util = {
+  // Generates a random number between min and max
+  randomIntFromInterval: function(min,max)
+  {
+    return Math.floor(Math.random()*(max-min+1)+min);
+  }
+};