我试图创建一个基于文本的小RPG来实践我学到的javascript。我尝试了两种方法，一种是工作，另一种不是，我想知道原因。
在第一个中，我创造了一个物体＆＃34;怪物＆＃34;使用一种方法设置每个怪物的所有属性（生命值，攻击点等）。这个问题我必须逐个编写属性，这使得代码太长，不符合我的口味。
FirstName LastName
testb1 test1
testb2 test2
/* 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);
}
}
}
}
});
而不是创建和对象＆＃34在第二个;怪物＆＃34，I使一个构造，所以我可以定义在更短的和simplier方式的怪物（例如：VAR幻象=新的魔鬼（PROP1 ，prop2，prop3 ......））。当我尝试为每场战斗选择一个随机怪物时，问题就来了。我尝试了很多东西，但问题依然存在：如果创建一个随机函数来选择怪物，每次点击一次攻击按钮就会起作用，弄得一团糟。这让我发疯，我不知道该怎么做。有什么建议？提前谢谢。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<p class="monster_info"></p>
<p class="battle_info"></p>
<p class="hero_info"></p>
<button type="button">Attack</button>
</body>$(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);
}
}
}
}
});
答案 0 :(得分：0)
在你的怪物构造函数中，你在返回语句中做了一些你可能不想做的事情。如果您有类似return x + 1, foo = 3, bar = false的内容，则会从左到右评估表达式，并返回 last 。也就是说，您正在重新调整this.alive的状态，而不是返回构造函数中预期的this。
尝试重构您的代码以显式返回您想要由构造函数创建的怪物对象，并查看您是否还有问题。通常，您希望自己的回归能够独立存在，以避免语法混淆。
答案 1 :(得分：0)
第二种方法很好但你使用它很奇怪。 selectMonster会随机生成具有随机逻辑和调用new monster的怪物。但是，你没有明显的理由几次致电selectMonster()。
您的代码应如下所示：
var current_monster = selectMonster(); // note that you already have function named monster
$(".monster_info").html(current_monster.monsterStats());
$("button").click(function() {
battle(current_monster);
});
你也可以通过原型设计来定义你的怪物：
function Monster(name, hp, attack) {
this.name = name;
this.hp = hp;
this.attack = attack;
this.alive = true;
// etc
}
Monster.prototype.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;
}
function Werewolf() {
Monster.call(this, "werewolf", 5, 4); // call parent
}
Werewolf.prototype = new Monster();
function Goblin() {
Monster.call(this, "goblin", 15, 3); // call parent
}
Goblin.prototype = new Monster();
var goblin = new Goblin();
console.log(goblin.hp); // 15
console.log(goblin.monsterStats()); // goblin <br /> etc..