Creating the Vue Instance and Styling the Healthbars 创建Vue实例和为Healthbars设置样式

整个游戏 样子 52 有需要源码的留言或者私聊我

new Vue({el: "#app",data: {playerHealth: 100,monsterHealth: 100,gameIsRuning: false},methods: {startGame() {this.gameIsRuning = true;this.playerHealth = 100;this.monsterHealth = 100;},attack() {var damage = calculateDamage(3, 10);this.monsterHealth = this.monsterHealth - damage;if (this.monsterHealth <= 0) {alert("you won! 你赢了 ");this.gameIsRuning = false;return;}max = 12;min = 5;damage = Math.max(Math.floor(Math.random() * max) + 1, min);this.playerHealth -= damage;},// specialAttack() {},// heal() {},// giveUp() {},calculateDamage(min, max) {return Math.max(Math.floor(Math.random() * max) + 1, min);}}
});
复制代码

简便封装 写法

new Vue({el: "#app",data: {playerHealth: 100,monsterHealth: 100,gameIsRuning: false},methods: {startGame() {this.gameIsRuning = true;this.playerHealth = 100;this.monsterHealth = 100;},attack() {this.monsterHealth = this.monsterHealth - this.calculateDamage(3, 10);if (this.monsterHealth <= 0) {alert("you won! 你赢了 ");this.gameIsRuning = false;return;}this.playerHealth -= this.calculateDamage(5, 12);},specialAttack() {},heal() {},giveUp() {},<!--计算伤害 使用 return 返回 一个 最大的随机数，然后 向下取整，然后生成随机数，乘以 最大 的 加一 -->calculateDamage(min, max) {return Math.max(Math.floor(Math.random() * max) + 1, min);}}
});
复制代码

这时候我们点击上面的所有按钮都好使了

new Vue({el: "#app",data: {playerHealth: 100,monsterHealth: 100,gameIsRuning: false,turns: []},methods: {startGame() {this.gameIsRuning = true;this.playerHealth = 100;this.monsterHealth = 100;},attack() {this.monsterHealth = this.monsterHealth - this.calculateDamage(3, 10);if (this.checkWin()) {return;}this.playerHealth -= this.calculateDamage(5, 12);this.checkWin();},specialAttack() {this.monsterHealth -= this.calculateDamage(10, 20);if (this.checkWin()) {return;}this.monsetAttacks();},heal() {if (this.playerHealth <= 90) {this.playerHealth += 10;} else if (this.playerHealth <= 60) {this.playerHealth += 30;} else {this.playerHealth = 100;}this.monsetAttacks();},giveUp() {this.gameIsRuning = false;},calculateDamage(min, max) {return Math.max(Math.floor(Math.random() * max) + 1, min);},checkWin() {if (this.monsterHealth <= 0) {if (confirm("you won! 你赢了开始新游戏")) {this.startGame();} else {this.gameIsRuning = false;}return true;} else if (this.playerHealth <= 0) {if (confirm("you low 你输了开始新游戏")) {this.startGame();} else {this.gameIsRuning = false;}return true;}return false;},monsetAttacks() {this.playerHealth -= this.calculateDamage(5, 12);this.checkWin();}}
});
上面我这里我为了不破坏代码的一致性，我没有加任何注释，现在给大家解释一下，
1、el：注册了一个 #app 就不说了
2、在数据data:{ playerHealth: 100,monsterHealth: 100,gameIsRuning: false,}中我们给了play 玩家 一个 血量是100  然后 怪物血量是100 然后给 game 是否运行一个false 这里贴图html 标签
复制代码

贴图 HTML 为了怕我看不懂给的是中文

这里可以看出来在html 标签中data 里面的 play 和 monst 已经放在 插值表达式中， 在 v-if中取反 游戏运行。

3、methods:{3.1 startGame(){this.gameIsRuning = true;this.playerHealth = 100;this.monsterHealth = 100;},3.2  attack() {this.monsterHealth = this.monsterHealth - this.calculateDamage(3, 10);if (this.checkWin()) {return;}this.playerHealth -= this.calculateDamage(5, 12);this.checkWin();}3.3specialAttack() {this.monsterHealth -= this.calculateDamage(10, 20);if (this.checkWin()) {return;}this.monsetAttacks();},3.4heal() {if (this.playerHealth <= 90) {this.playerHealth += 10;} else if (this.playerHealth <= 60) {this.playerHealth += 30;} else {this.playerHealth = 100;}this.monsetAttacks();},3.5giveUp() {this.gameIsRuning = false;},3.6calculateDamage(min, max) {return Math.max(Math.floor(Math.random() * max) + 1, min);},3.7checkWin() {if (this.monsterHealth <= 0) {if (confirm("you won! 你赢了开始新游戏")) {this.startGame();} else {this.gameIsRuning = false;}return true;} else if (this.playerHealth <= 0) {if (confirm("you low 你输了开始新游戏")) {this.startGame();} else {this.gameIsRuning = false;}return true;}return false;},3.8 monsetAttacks() {this.playerHealth -= this.calculateDamage(5, 12);this.checkWin();}
} 在data 同级的 方法中 我们开始写方法 ,这里就不要问我为什么没有startGame:function(){}我这个是es6的一样，以后不再说这个问题了
startGame()方法中使用this进行指向上面的data初始化数据，然后游戏运行为 true取反3.2 上面的this..monsterHealth怪兽，没有使用简写的方法，后面的this.calculateDamage(3,10) 是我在下面写的以方法这里调用的方法进行实参的传入，最大数和最小数
下面的this.玩家，使用了简写的方法，调用方法传入随机数
复制代码

if判断怪物 checkWin胜利查看这里是的话return 出去 下面查看 玩家是否胜利

3.3 这里的 超级攻击 我们使用 this 指向 加大了随机数以减少怪物血量，然后 if判断是否取得胜利，然后 return
下面的调用封装的怪物共计我们的方法 以简化代码3.4在heal中 我们进行判断玩家的血量少于多少的时候给定一定的加血数量，然后在最后在最后调用怪物攻击我们的血量。3.5就是放弃游戏，然后把gameIsRuning 变成  fasle3.6 calculateDamage中创建一个随机数 然后上面好像写了3.7 checkWin 游戏是否胜利 写的是一个if ..... else if() 这里先判断 怪物血量少于零的时候，弹出confirm系统的跳出框，告知用户是否赢得游戏，然后  this.startGame(); 指向调用开始游戏，否则就是你输了，
然后  this.gameIsRuning = false;  然后在最后return 出去 true 变成真的。 elseif是一样的自己看代码整理一下3.8 就是怪物攻击封装一个方法
复制代码

完全代码

new Vue({el: "#app",data: {playerHealth: 100,monsterHealth: 100,gameIsRuning: false,turns: []},methods: {startGame() {this.gameIsRuning = true;this.playerHealth = 100;this.monsterHealth = 100;this.turns = [];},attack() {var damage = this.calculateDamage(3, 10);this.monsterHealth -= damage;this.turns.unshift({isPlayer: true,text: "player hits monster for 玩家击中怪物" + damage});if (this.checkWin()) {return;}this.playerHealth -= this.calculateDamage(5, 12);this.checkWin();},specialAttack() {var damage = this.calculateDamage(10, 20);this.monsterHealth -= damage;this.turns.unshift({isPlayer: true,text: "player hits monsterhard for 玩家击中了怪物" + damage});if (this.checkWin()) {return;}this.monsetAttacks();},heal() {if (this.playerHealth <= 90) {num1 = this.playerHealth += 10;} else if (this.playerHealth <= 60) {num2 = this.playerHealth += 30;} else {this.playerHealth = 100;}this.turns.unshift({isPlayer: true,text:"player heals  for 血量增加 " + num1? parseInt(num1) + "血量增加": parseInt(num2) + "血量增加"});this.monsetAttacks();},giveUp() {this.gameIsRuning = false;},calculateDamage(min, max) {return Math.max(Math.floor(Math.random() * max) + 1, min);},checkWin() {if (this.monsterHealth <= 0) {if (confirm("you won! 你赢了开始新游戏")) {this.startGame();} else {this.gameIsRuning = false;}return true;} else if (this.playerHealth <= 0) {if (confirm("you low 你输了开始新游戏")) {this.startGame();} else {this.gameIsRuning = false;}return true;}return false;},monsetAttacks() {var damage = this.calculateDamage(5, 12);this.playerHealth -= damage;this.turns.unshift({isPlayer: true,text: "monster hits player for 怪物击中玩家 " + damage});this.checkWin();}}
});
复制代码