Vue-js 零基础 国外案例 DEMO 全课程讲解 3 我是---- 静静

转载 于 2019-04-12 07:44:44 发布 · 117 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://juejin.im/post/5caf50ec518825186d6537f0
文章标签：

#javascript #ViewUI

本文详细介绍如何使用Vue.js创建一个简单的游戏应用，包括游戏状态管理、角色健康条样式设置及交互逻辑实现。通过具体代码示例，讲解Vue实例的创建、数据绑定、方法定义及其在游戏开发中的应用。

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.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 出去 下面查看 玩家是否胜利

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();
    }
  }
});
复制代码

转载于:https://juejin.im/post/5caf50ec518825186d6537f0

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值