I'm trying to create a little text based rpg to put in practice what i learned of javascript. I tried two approaches, one is working and the other one isn't it, and I want to know why.
In the first one, I created an object "monster" with a method that sets all the properties of each monster (hit points, attack points, etc). The problem with this it's i have to write the properties one by one, and it makes the code too long for my taste.
/* Write JavaScript here *//* Write JavaScript here */
$(document).ready(function(){
var hero = {
hitPoints: 13,
armorClass: 10,
attackBonus: 1,
weaponDamage: 7,
heroStats: function(){
return "Hero" + "<br/>" +
"Hit Points: " + this.hitPoints + "<br/>" +
"Armor Class: " + this.armorClass + "<br/>" +
"Attack Bonus: " + this.attackBonus + "<br/>" +
"Weapon Damage: " + this.weaponDamage;
},
alive: true
};
var monster = {
name: "",
hitPoints: 0,
armorClass: 0,
attackBonus: 0,
weaponDamage: 0,
monsterStats: function(){
return this.name + "<br/>" +
"Hit Points: " + this.hitPoints + "<br/>" +
"Armor Class: " + this.armorClass + "<br/>" +
"Attack Bonus: " + this.attackBonus + "<br/>" +
"Weapon Damage: " + this.weaponDamage;
},
monsterSelected: false,
selectMonster: function() {
if (this.monsterSelected === false){
switch(Math.floor(Math.random()*2)+1)
{
case 1: this.name = "Werewolf";
this.hitPoints = 20;
this.armorClass = 8;
this.attackBonus = 4;
this.weaponDamage = 3;
this.monsterSelected = true;
break;
case 2: this.name = "Goblin";
this.hitPoints = 15;
this.armorClass= 10;
this.attackBonus = 4;
this.weaponDamage = 3;
this.monsterSelected = true;
break;
}
}
},
alive: true
};
monster.selectMonster();
$(".hero_info").html(hero.heroStats());
$(".monster_info").html(monster.monsterStats());
$("button").click(function(){
battle(monster);
});
function battle (actualmonster){
if (actualmonster.alive===false){
actualmonster.monsterSelected = false;
actualmonster.selectMonster();
$(".monster_info").html(actualmonster.monsterStats());
$(".battle_info").html("");
actualmonster.alive = true;
}
else{
var d20 = Math.floor(Math.random()*20)+1;
var d_wp = Math.floor(Math.random()*hero.weaponDamage)+1;
if (d20+hero.attackBonus>actualmonster.armorClass){
$(".battle_info").html("You attack!: d20+" + hero.attackBonus+": " + (d20+hero.attackBonus)+ " vs AC " + actualmonster.armorClass + "<br/>" + "You hit!: d" + hero.weaponDamage + ": " + d_wp);
actualmonster.hitPoints = actualmonster.hitPoints - d_wp;
$(".monster_info").html(actualmonster.monsterStats());
}
else {$(".battle_info").html("You miss!: d20+" + hero.attackBonus+": " + (d20+hero.attackBonus)+ " vs AC " + actualmonster.armorClass);
}
if (actualmonster.hitPoints <= 0){
actualmonster.hitPoints = 0;
$(".monster_info").html(actualmonster.monsterStats());
$(".battle_info").html("You killed the monster!");
actualmonster.alive = false;
}
else{
var d20_m = Math.floor(Math.random()*20)+1;
var d_wp_m = Math.floor(Math.random()*monster.weaponDamage)+1;
if (d20_m+actualmonster.attackBonus>hero.armorClass){
$(".battle_info").append("<br/>Monster attacks you!: d20+" + actualmonster.attackBonus+": " + (d20_m+actualmonster.attackBonus)+ " vs AC " + hero.armorClass + "<br/>" + "Monster hits you!: d" + actualmonster.weaponDamage + ": " + d_wp_m);
hero.hitPoints = hero.hitPoints - d_wp_m;
$(".hero_info").html(hero.heroStats());
}
else {$(".battle_info").append("<br/>Monster miss!: d20+" + hero.attackBonus+": " + (d20_m + monster.attackBonus)+ " vs AC " + hero.armorClass);
}
}
}
}
}
);
<script src="http://ift.tt/1oMJErh"></script>
<body>
<p class="monster_info"></p>
<p class="battle_info"></p>
<p class="hero_info"></p>
<button type="button">Attack</button>
</body>
In the second one, instead of creating and object "monster", i make a constructor, so i could define the monsters in a shorter and simplier way (for example: var phantom = new monster (prop1, prop2, prop3...)). The issue comes when i tried select a random monster for each battle. I tried a lot of things, but the problem remains the same: if a create a random function to select the monsters, this works every time a click the attack button, making a mess. This is driven me crazy, and i have no idea what to do. Any suggestions? Thanks in advance.
/* Write JavaScript here */
$(document).ready(function(){
var hero = {
hitPoints: 13,
armorClass: 10,
attackBonus: 1,
weaponDamage: 7,
heroStats: function(){
return "Hero" + "<br/>" +
"Hit Points: " + this.hitPoints + "<br/>" +
"Armor Class: " + this.armorClass + "<br/>" +
"Attack Bonus: " + this.attackBonus + "<br/>" +
"Weapon Damage: " + this.weaponDamage;
},
alive: true
};
function monster (name, hitpoints, armorclass, attackbonus, weapondamage) {
this.name = name;
this.hitPoints = hitpoints;
this.armorClass = armorclass;
this.attackBonus = attackbonus;
this.weaponDamage = weapondamage;
this.monsterStats = function(){
return this.name + "<br/>" +
"Hit Points: " + this.hitPoints + "<br/>" +
"Armor Class: " + this.armorClass + "<br/>" +
"Attack Bonus: " + this.attackBonus + "<br/>" +
"Weapon Damage: " + this.weaponDamage;
},
this.selected = false;
this.alive = true;
}
function selectMonster () {
var werewolf = new monster("Werewolf", 5, 4, 4, 3);
var goblin = new monster("Goblin", 15, 4, 4, 3);
switch(Math.floor(Math.random()*2)+1){
case 1: if (werewolf.selected===false){werewolf.selected = false; return werewolf;} break;
case 2: if (goblin.selected===false){goblin.selected = false; return goblin;} break;
}
}
$(".hero_info").html(hero.heroStats());
$(".monster_info").html(selectMonster().monsterStats());
$("button").click(function(){
battle(selectMonster());
});
function battle (actualmonster){
if (actualmonster.alive===false){
actualmonster.selected = false;
actualmonster.selectMonster();
$(".monster_info").html(actualmonster.monsterStats());
$(".battle_info").html("");
actualmonster.alive = true;
}
else{
var d20 = Math.floor(Math.random()*20)+1;
var d_wp = Math.floor(Math.random()*hero.weaponDamage)+1;
if (d20+hero.attackBonus>actualmonster.armorClass){
$(".battle_info").html("You attack!: d20+" + hero.attackBonus+": " + (d20+hero.attackBonus)+ " vs AC " + actualmonster.armorClass + "<br/>" + "You hit!: d" + hero.weaponDamage + ": " + d_wp);
actualmonster.hitPoints = actualmonster.hitPoints - d_wp;
$(".monster_info").html(actualmonster.monsterStats());
}
else {$(".battle_info").html("You miss!: d20+" + hero.attackBonus+": " + (d20+hero.attackBonus)+ " vs AC " + actualmonster.armorClass);
}
if (actualmonster.hitPoints <= 0){
actualmonster.hitPoints = 0;
$(".monster_info").html(actualmonster.monsterStats());
$(".battle_info").html("You killed the monster!");
actualmonster.alive = false;
}
else{
var d20_m = Math.floor(Math.random()*20)+1;
var d_wp_m = Math.floor(Math.random()*hero.weaponDamage)+1;
if (d20_m+actualmonster.attackBonus>hero.armorClass){
$(".battle_info").append("<br/>Monster attacks you!: d20+" + actualmonster.attackBonus+": " + (d20_m+actualmonster.attackBonus)+ " vs AC " + hero.armorClass + "<br/>" + "Monster hits you!: d" + actualmonster.weaponDamage + ": " + d_wp_m);
hero.hitPoints = hero.hitPoints - d_wp_m;
$(".hero_info").html(hero.heroStats());
}
else {$(".battle_info").append("<br/>Monster miss!: d20+" + hero.attackBonus+": " + (d20_m + actualmonster.attackBonus)+ " vs AC " + hero.armorClass);
}
}
}
}
}
);
<script src="http://ift.tt/1oMJErh"></script>
<p class="monster_info"></p>
<p class="battle_info"></p>
<p class="hero_info"></p>
<button type="button">Attack</button>
Aucun commentaire:
Enregistrer un commentaire