EVA.js学习笔记（五）实践fappy-bird游戏（中）

# EVA.js学习笔记（四）实践fappy-bird游戏（上）

# EVA.js学习笔记（五）实践fappy-bird游戏（中）

# VA.js学习笔记（六）实践fappy-bird游戏（下）

创建小鸟

1、创建小鸟

创建小鸟的时候用到了SpriteAnimation这个组件

这组件在官方精灵图教程中并未提及，在API文档里有，但是没有写描述。

speed表示图片播放间隔的毫秒数。

 createBird() {
    const bird = new GameObject("bird", {
        size: { width: 88, height: 66 },
        position: {
          x: 100,
          y: this.sceneHeight / 2,
        },
        anchor: {
          x: 0,
          y: 0,
        },
        origin: {
          x: 0.5,
          y: 0.5,
        },
      });

      const anim = bird.addComponent(
        new SpriteAnimation({
          resource: "bird",
          speed: 500,
        })
      );
      const physics = "";

      return { bird, physics };
    },
   
 }

2、小鸟添加物理属性

Eva.js 基于 Matterjs 的物理引擎，目前只接入了小部分内容，在官方文档中有一定的描述

在使用的时候需要安装

npm install @eva/plugin-matterjs

然后在game中配置， gravity代表重力

import {Physics} from '@eva/plugin-matterjs';
// 1.安装物理引擎后引入
import {PhysicsSystem, Physics, PhysicsType} from '@eva/plugin-matterjs';

// 2.在Eva.js中注册插件
const game = new Game({
  ...
  systems: [
  ...
  
    new PhysicsSystem({
      resolution: 2, // 保持RendererSystem的resolution一致
      // isTest: true, // 是否开启调试模式
      // element: document.getElementById('game-container'), // 调试模式下canvas节点的挂载点
      world: {
        gravity: {
          y: 2, // 重力
        },
      },
      mouse: {
        open: true,
      },
    }),
  
  ],
});

\

添加到小鸟对象上

bodyOptions中的内容都来自于matter.js的body属性，可以去看matter.js的文档。

const physics = bird.addComponent(
        new Physics({
          type: PhysicsType.RECTANGLE,
          bodyOptions: {
            isStatic: false, //是否是静态，如果是静态，则质量和密度是无限大
            // restitution: 0, //回复系数
            frictionAir: 0.1,//空气阻力
            friction: 0.06, 
            frictionStatic: 0.3,
            force: {
              x: 0,
              y: 0,
            },
          },
          stopRotation: true,
        })

添加成功后，小鸟就会落下，因为之前在地面上也增加了物理组件，所以小鸟会停在地面上，这时候会触发一个碰撞事件。

目前支持的碰撞事件 collisionStart collisionActive collisionEnd
当小鸟和地面接触的时候，就会触发下面方法。

一旦发生碰撞，我们就把方法抛出去，以便我们做后面的操作。

physics.on("collisionStart", () => {
    this.game.emit("game_over");
});

\

由于我们刚开始不需要小鸟，要点击了开始按钮后小鸟才创建，所以个将这段代码封装在方法里，等到调用开始游戏再添加小鸟。

3、点击屏幕小鸟Jump

思路： 使小鸟往上跳一下，避免落地，如果使用了gameObject的Tranform来改变Y的位移，是可以做到的，但是小鸟会瞬间移动到上面一个位置，并不会有一个从上到下的效果，所以需要配合过度动画来实现，比较麻烦。

思路2： 我们用另一种方法，因为物体添加了物理属性，则存在了一个力的属性，我们可以向物体施加一个向上的力，从而是小鸟跳一下。

既然需要点击屏幕，则需要在屏幕上增加点击方法，然后获取到小鸟对象里的物理对象physics

  const evt = this.game.scene.addComponent(
        new Event({
          type: HIT_AREA_TYPE.Rect,
        })
      );
  //点击屏幕跳跃
  evt.on("tap", () => {
     if (this.over) return;
     if (this.start && this.birdObject.physics.body) {
       //-0.62表示往上增加0.62的力，力的大小与物体的SIZE和密度有关
          this.birdObject.physics.body.force.y = -0.62;
      }
  });

创建游戏结束画面

这里和创建readyBox一样

1、创建overBox

   const overBox = new GameObject("overBox", {
        size: { width: 320, height: 80 },
        position: {
          x: 128,
          y: this.sceneHeight / 3,
        },
      });

2、创建GameOver标题、得分、重来

	 const overScore = new GameObject("overScore", {
        size: { width: 179, height: 79 },
        position: { x: 180, y: 320 },
        anchor: {
          x: 0,
          y: 0,
        },
      });

      overScore.addComponent(
        new Text({
          text: "得分：0",
          style: {
            fontFamily: "Arial",
            fontSize: 36,
            fontStyle: "italic",
            fontWeight: "bold",
            fill: "#fff",
            stroke: "#000",
            strokeThickness: 5,
            dropShadow: true,
            dropShadowColor: "#000000",
            dropShadowBlur: 4,
            dropShadowAngle: Math.PI / 6,
            dropShadowDistance: 6,
            wordWrap: true,
            wordWrapWidth: 400,
            breakWords: true,
          },
        })
      );


      const overTitle = new GameObject("overTitle", {
        size: { width: 483, height: 101 },
        position: {
          x: 0,
          y: 0,
        },
      });
      overTitle.addComponent(
        new Sprite({
          resource: "over",
          spriteName: "game_over.png",
        })
      );

      const play = new GameObject("gameOverPlay", {
        size: { width: 126, height: 86 },
        position: {
          x: 187,
          y: 188,
        },
      });

      const spritePlay = new Sprite({
        resource: "over",
        spriteName: "play.png",
      });

      play.addComponent(spritePlay);

      const evt = play.addComponent(
        new Event({
          type: HIT_AREA_TYPE.Rect,
        })
      );

      evt.on("tap", () => {
        this.game.emit("on-game-ready");
      });

      overBox.addChild(play);
      overBox.addChild(overTitle);
      overBox.addChild(overScore);

      const animation = overBox.addComponent(new Transition());
      const render = overBox.addComponent(
        new Render({
          alpha: 1,
          zIndex: 10,
        })
      );

      animation.group = {
        hidden: [
          {
            name: "alpha",
            component: render,
            values: [
              {
                time: 0,
                value: 1,
                tween: "linear",
              },
              {
                time: 20,
                value: 0,
                tween: "linear",
              },
            ],
          },
        ],
        show: [
          {
            name: "alpha",
            component: render,
            values: [
              {
                time: 0,
                value: 0,
                tween: "linear",
              },
              {
                time: 20,
                value: 1,
                tween: "linear",
              },
            ],
          },
        ],
      };

3、对"重新开始"添加事件

这里也把重新开始的事件抛出去。

 	 const evt = play.addComponent(
        new Event({
          type: HIT_AREA_TYPE.Rect,
        })
      );

      evt.on("tap", () => {
        this.game.emit("on-game-ready");
      });

\

创建从游戏开始，到结束，到重新开始流程

到这里后我们的游戏开始，结束，重新开始，三个事件都已经定义了，分别是：

game_start//开始

game_over//结束

on-game-ready//重新开始

我们分别对上面三个方法进行监听，需要执行的思路先写在里面，到现在为止就可以实现基本的开始结束流程了，小鸟可以原地跳跃，落地后死亡，重新开始。

		  //游戏开始
      this.game.on("start_game", () => {
       //1隐藏readyBOx
       //2添加小鸟（首次）
       //3添加小鸟的物理属性
      
      });
      //游戏结束
      this.game.on("game_over", () => {
      	//显示overBox
        
      });
      //回到标题
      this.game.on("on-game-ready", () => {
    		//隐藏overBox
        //小鸟回到中间并且取消物理属性
        //显示readyBox
      });