寻宝猎人

• 游戏需求： 使用键盘上的箭头键帮助探险家找到宝藏并将其带到出口

  • 怪物在地牢壁之间上下移动，如果探险家触碰到怪物则变成半透明，并且右上角的生命值会减少
  • 如果所有生命值都用光了，会显示 You Lost!
  • 如果探险家带着宝藏到达出口，会显示 You Won!

代码结构

• 寻宝猎人游戏共分为7个部分，分别为：初始化舞台、初始化游戏、游戏循环、游戏结束、边界检测、碰撞检测、按键绑定

 // 所需数据
 data() {
   return {
     app: null, // 整体舞台
     // 精灵
     explorer: null, // 探索者
     door: null, // 门
     dungeon: null, // 背景
     treasure: null, // 宝箱
     blobs: [], // 怪物集合
     
     // 容器
     gameScene: null, // 游戏场景
     gameOverScene: null, // 游戏结束场景
     healthBar: null, // 生命条
     
     // 文本
     tip: null, // 提示信息
   };
 },
 ​
 methods: {
   // 初始化舞台
   initApp() {},
     
   // 初始化游戏
   initGame(texture) {},
     
   // 游戏结束
   gameEnd() {},
   
   // 按键绑定
   _addKeyListener(sprite) {},
   
   // 碰撞检测
   _hitTestRectangle(moveSprite, otherSprite) {},
   
   // 移动范围检测
   _moveRangeCheck(sprite, container) {}
 }

初始化舞台

• 在 initApp 中初始化舞台并加载所需资源，待资源加载完成后初始化游戏

 // 初始化舞台
 initApp() {
   this.app = new PIXI.Application({
     width: 600, //宽
     height: 600, //高
     backgroundAlpha: 1, // 背景不透明
     backgroundColor: 0xffffff,
     antialias: true, // 开启抗锯齿，使字体和图形边缘更加平滑
     resolution: 1, // 像素比
     forceCanvas: false, // 不强制使用canvas
   });
   this.$refs.pixi.appendChild(this.app.view); // 挂载生成的画布
   // 加载资源
   const sourceUrl = require("@/assets/images/treasureHunter.png");
   const loader = PIXI.Loader.shared;
   loader.reset(); // 有缓存，需要重置loader
   loader.add(sourceUrl); // 加载图片资源
   loader.load((loader, resource) => {
     PIXI.utils.clearTextureCache(); // 清除纹理缓存
     // 待资源加载完成后，初始化游戏
     this.initGame(resource[sourceUrl].texture);
   });
 }

初始化游戏

• 待纹理图集加载完成后，initGame 方法会立即执行，该方法里需要创建和初始化容器，精灵，游戏场景，绑定按键，制作游戏文本等

  • 初始化游戏场景和精灵，属于主游戏的精灵都被添加到 gameScene 容器

   this.gameScene = new PIXI.Container(); // 初始化游戏场景容器
   this.app.stage.addChild(this.gameScene); // 将游戏场景添加到舞台
   // 解析游戏场景所需精灵
   mySprite.parse((resource) => {
     // 背景
     this.dungeon = new PIXI.Sprite(resource["dungeon.png"]);
     this.gameScene.addChild(this.dungeon); // 将精灵添加到游戏场景容器内
   ​
     // 门
     this.door = new PIXI.Sprite(resource["door.png"]);
     this.door.position.set(32, 0);
     this.gameScene.addChild(this.door);
   ​
     // 探索者
     this.explorer = new PIXI.Sprite(resource["explorer.png"]);
     this.explorer.vx = 0;
     this.explorer.vy = 0;
     this.explorer.x = 48;
     this.explorer.y = this.gameScene.height / 2 - this.explorer.height / 2;
     this.gameScene.addChild(this.explorer);
   ​
     // 宝盒
     this.treasure = new PIXI.Sprite(resource["treasure.png"]);
     this.treasure.x = this.gameScene.width - this.treasure.width - 48;
     this.treasure.y = this.gameScene.height / 2 - this.treasure.height / 2;
     this.gameScene.addChild(this.treasure);
   ​
     // 生成怪物
     let numberOfBlobs = 7,
       spacing = 60,
       xOffset = 90,
       speed = 4,
       direction = 1;
     for (let i = 0; i < numberOfBlobs; i++) {
       const blob = new Sprite(resource["blob.png"]);
       blob.x = spacing * i + xOffset;
       // 随机定义怪物的y坐标
       blob.y = this._randomInt(0, this.gameScene.height - blob.height);
       blob.vy = speed * direction;
       this.blobs.push(blob);
       this.gameScene.addChild(blob);
     }
   });
  

  • 初始化生命条容器，随后也添加到主游戏的 gameScene 容器

   this.healthBar = new PIXI.Container();
   this.healthBar.position.set(this.app.stage.width - 170, 4);
   this.gameScene.addChild(this.healthBar);
   // 创建生命条背景矩形
   const innerBar = new PIXI.Graphics();
   innerBar.beginFill(0x000000);
   innerBar.drawRoundedRect(0, 0, 128, 8);
   innerBar.endFill();
   this.healthBar.addChild(innerBar);
   // 创建生命条血条
   const outerBar = new PIXI.Graphics();
   outerBar.beginFill(0xff3300);
   outerBar.drawRoundedRect(0, 0, 128, 8);
   outerBar.endFill();
   this.healthBar.addChild(outerBar);
   this.healthBar.outer = outerBar; // 将血条添加到容器上，方便操作
  

  • 待生命条、游戏场景、精灵初始化之后，如下图所示

• • 初始化游戏结束的场景，游戏结束时显示的文本将被添加到 gameOverScene 容器中

   this.gameOverScene = new PIXI.Container(); // 游戏结束场景容器
   this.app.stage.addChild(this.gameOverScene);
   const tipStyle = new PIXI.TextStyle({
     fontFamily: "Futura",
     fontSize: 64,
     fill: "white",
   });
   this.tip = new PIXI.Text("The End!", tipStyle);
   this.tip.x = 120;
   this.tip.y = this.app.stage.height / 2 - 32;
   this.gameOverScene.visible = false; // 在游戏开始时，gameOverScene不应该被显示出来
   this.gameOverScene.addChild(this.tip);
  

  • 给移动的猎人添加按键监听事件

   this._addKeyListener(this.explorer); // _addKeyListener用于绑定按键
  

  • 开启游戏循环

   this.app.ticker.add(() => this.gameLoop());
  

• 以上则是初始化游戏方法 initGame 的全部内容，接下来需要完成 gameLoop 游戏循环方法

• 获取随机数方法

 _randomInt(min, max) {
   return Math.floor(Math.random() * (max - min + 1)) + min;
 }

游戏循环

• 游戏循环开启后，利用猎人的速度让它移动

 this.explorer.x += this.explorer.vx;
 this.explorer.y += this.explorer.vy;

• 需要对猎人的移动范围进行检测，不能越界

 // 定义移动的范围
 const gameContainer = {
   x: 28,
   y: 10,
   width: 488,
   height: 480,
 };
 // 边界检测函数
 this._moveRangeCheck(this.explorer, gameContainer);

• 让怪物上下移动，同对怪物进行边界检测和碰撞检测，看看是否到达边界或者碰撞到猎人

 // 让怪物自己移动
 this.blobs.forEach((blob) => {
   blob.y += blob.vy;
   // 对怪物进行碰撞检测
   const arriveBorder = this._moveRangeCheck(blob, gameContainer);
   // 怪物抵达边界后,进行反向移动
   if (arriveBorder === "top" || arriveBorder === "bottom") {
     blob.vy *= -1;
   }
 ​
   // 检测猎人是否碰到了怪物
   const isHit = this._hitTestRectangle(this.explorer, blob);
   if (isHit) {
     // 假如碰撞到怪物，猎人呈半透明，并且血条降低  
     this.explorer.alpha = 0.5;
     this.healthBar.outer.width -= 1;
   } else {
     setTimeout(() => {
       // 猎人离开后，半透明小时
       this.explorer.alpha = 1;
     }, 200);
   }
 });

• 判断血条是否为空，如果为空则游戏结束，调用 gameEnd 方法

 // 如果生命条已经为空,则游戏失败
 if (this.healthBar.outer.width < 0) {
   this.gameEnd(); // 游戏结束
   this.tip.text = "You Lose!"; // 修改提示文案
   this.healthBar.outer.width = 0; // 让血条停在0
   setTimeout(() => {
     this.app.ticker.stop(); // 1秒后停止运行游戏
   }, 1000);
 }

• 判断猎人有没有接触到宝盒，接触则让宝盒与猎人一起移动，看起来像是猎人带着宝盒

 // 判断探索者是否已经接触到宝盒
 const isTouch = this._hitTestRectangle(this.explorer, this.treasure);
 if (isTouch) {
   // 让宝盒跟着探索者一同移动
   this.treasure.x = this.explorer.x + 8;
   this.treasure.y = this.explorer.y + 8;
 }

• 游戏获胜的条件： 宝盒抵达门的地方

 // 判断宝盒子是否抵达了出口
 const isOut = this._hitTestRectangle(this.explorer, this.door);
 if (isOut) {
   this.gameEnd();
   this.tip.text = "You Win!!!";
 }

• 以上是游戏循环 gameLoop 方法的全部内容

边界检测

• 自定义边界检测方法 _moveRangeCheck 保证猎人只能在墙壁内移动

• 该方法需要两个参数，一个是想限制移动范围的精灵，一个是矩形区域对象，保证精灵只能在区域内移动

• 该方法返回一个变量，可以判断是到达了哪个边界

  • 左边界： 精灵的 x 坐标小于矩形区域的 x 坐标
  • 右边界： 精灵的 x 坐标与精灵宽度的和大于矩形区域的宽度
  • 上边界： 精灵的 y 坐标小于矩形区域的 y 坐标
  • 下边界： 精灵的 y 坐标与精灵高的和大于矩形区域的高度

 _moveRangeCheck(sprite, container) {
   let boundary = ""; // 定义精灵抵达的边
 ​
   // 精灵抵达左边界
   if (sprite.x < container.x) {
     sprite.x = container.x;
     boundary = "left";
   }
   // 精灵抵达右边界
   if (sprite.x + sprite.width > container.width) {
     sprite.x = container.width - sprite.width;
     boundary = "right";
   }
   // 精灵抵达上边界
   if (sprite.y < container.y) {
     sprite.y = container.y;
     boundary = "top";
   }
   // 精灵抵达下编辑
   if (sprite.y + sprite.height > container.height) {
     sprite.y = container.height - sprite.height;
     boundary = "bottom";
   }
 ​
   return boundary;
 },

碰撞检测

• 函数需要两个参数： 需要检测的两个精灵对象
• 判断原理： 精灵1与精灵2之间的距离，小于精灵1与精灵2半宽和，则为碰撞
• 如果两个精灵重叠，函数将返回 true

 _hitTestRectangle(moveSprite, otherSprite) {
   // 定义所需变量
   let hit = false; // 是否碰撞
   // 寻找每个精灵的中心点
   moveSprite.centerX = moveSprite.x + moveSprite.width / 2; // 移动精灵水平中心点
   moveSprite.centerY = moveSprite.y + moveSprite.height / 2; // 移动精灵垂直中心点
   // (32,232)
   otherSprite.centerX = otherSprite.x + otherSprite.width / 2; // 矩形水平中心点
   otherSprite.centerY = otherSprite.y + otherSprite.height / 2; // 矩形垂直中心点
   // console.log(`(${otherSprite.rectangle.x},${otherSprite.rectangle.y})`);
 ​
   // 找出每个精灵的半高和半宽
   moveSprite.halfWidth = moveSprite.width / 2; // 移动精灵半宽
   moveSprite.halfHeight = moveSprite.height / 2; // 移动精灵半高
   otherSprite.halfWidth = otherSprite.width / 2; // 矩形半宽
   otherSprite.halfHeight = otherSprite.height / 2; // 矩形半高
 ​
   // 移动精灵和矩形之间的距离
   const gapX = moveSprite.centerX - otherSprite.centerX;
   const gapY = moveSprite.centerY - otherSprite.centerY;
 ​
   // 算出移动精灵和矩形半宽半高的总和
   const combineWidth = moveSprite.halfWidth + otherSprite.halfWidth;
   const combineHeight = moveSprite.halfHeight + otherSprite.halfHeight;
   // 检查x轴上是否有碰撞
   // 判断两个精灵中心点间的距离,是否小于精灵半宽和
   if (Math.abs(gapX) < combineWidth) {
     // 检查y轴是否有碰撞
     hit = Math.abs(gapY) < combineHeight;
   } else {
     hit = false;
   }
   return hit;
 },

按键绑定

• 按键绑定 _addKeyListener 方法是对操作的精灵，监听上下左右按键事件

 _addKeyListener(sprite) {
   let left = keyboard("ArrowLeft"),
     right = keyboard("ArrowRight"),
     up = keyboard("ArrowUp"),
     down = keyboard("ArrowDown");
 ​
   // 左
   left.press = () => {
     sprite.vx = -2;
     sprite.vy = 0;
   };
   left.release = () => {
     if (!right.isDown && sprite.vy === 0) sprite.vx = 0;
   };
 ​
   // 右
   right.press = () => {
     sprite.vx = 2;
     sprite.vy = 0;
   };
   right.release = () => {
     if (!left.isDown && sprite.vy === 0) sprite.vx = 0;
   };
 ​
   // 上
   up.press = () => {
     sprite.vy = -2;
     sprite.vx = 0;
   };
   up.release = () => {
     if (!down.isDown && sprite.vx === 0) sprite.vy = 0;
   };
 ​
   // 下
   down.press = () => {
     sprite.vy = 2;
     sprite.vx = 0;
   };
   down.release = () => {
     if (!up.isDown && sprite.vx === 0) sprite.vy = 0;
   };
 },

游戏结束

• 游戏结束需要把主游戏场景隐藏，并将游戏结束场景显示，舞台背景色是改成黑色

 gameEnd() {
   this.gameScene.visible = false;
   this.app.renderer.backgroundColor = 0x000000;
   this.gameOverScene.visible = true;
 },