Vue-js 零基礎國外案例 DEMO 全課程講解 3 我是---- 靜靜

時間 2019-12-13

標籤 vue 零基礎案例 demo 課程講解靜靜欄目 JavaScript 简体版

原文原文鏈接

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();
    }
  }
});
上面我這裏我爲了避免破壞代碼的一致性，我沒有加任何註釋，如今給你們解釋一下，
一、el：註冊了一個 #app 就不說了
二、在數據data:{ 
           playerHealth: 100,
           monsterHealth: 100,
           gameIsRuning: false,
    }中咱們給了play 玩家 一個 血量是100  而後 怪物血量是100 而後給 game 是否運行一個false 這裏貼圖html 標籤
複製代碼

貼圖 HTML 爲了怕我看不懂給的是中文

這裏能夠看出來在html 標籤中data 裏面的 play 和 monst 已經放在插值表達式中，在 v-if中取反遊戲運行。

三、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.3
    specialAttack() {
              this.monsterHealth -= this.calculateDamage(10, 20);
              if (this.checkWin()) {
                return;
              }

         this.monsetAttacks();
    },
    3.4
     heal() {
          if (this.playerHealth <= 90) {
            this.playerHealth += 10;
          } else if (this.playerHealth <= 60) {
            this.playerHealth += 30;
          } else {
            this.playerHealth = 100;
          }
          this.monsetAttacks();
    },
    3.5
     giveUp() {
         this.gameIsRuning = false;
      },
    3.6
    calculateDamage(min, max) {
         return Math.max(Math.floor(Math.random() * max) + 1, min);
      },
    3.7
    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;
     },
   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 出去下面查看玩家是否勝利html

3.3 這裏的 超級攻擊 咱們使用 this 指向 加大了隨機數以減小怪物血量，而後 if判斷是否取得勝利，而後 return 
下面的調用封裝的怪物共計咱們的方法 以簡化代碼

3.4在heal中 咱們進行判斷玩家的血量少於多少的時候給定必定的加血數量，而後在最後在最後調用怪物攻擊咱們的血量。

3.5就是放棄遊戲，而後把gameIsRuning 變成  fasle

3.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();
    }
  }
});
複製代碼