持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第11天，点击查看活动详情

一、前言

接上期我们引入了pixijs，并初步实验了其中的部分函数，今天我们就接着上次的项目，继续完善我们的项目demo。

如果有不懂的小伙伴可以去翻一下我的上一篇文章，或者去pixijs官网看下示例。

注意: 1、本文使用ts，部分代码存在不兼容情况； 2、本文所使用的pixi版本为6.5.5。

二、过程

1、键盘读取

如果我们想控制我们的主角tom去抓到jerry，那就需要监听键盘按键，从而触发对应的事件，才能达到我们控制tom移动的效果。事不宜迟，来试试吧。

首先我们将下面这个自定义函数加到项目中去，是官网给的js版本，要根据ts做些许改动

下面这个函数定义了key这个变量，它含以下几个变量，value是具体按键的值，用来区别当前按键，isDown和ipUp用来判定按键是否按下，同时预留定义了press和release方法，可以决定按键按下时触发什么方法，未按下时触发什么方法。

function keyboard(value: string) {
  let key: { value: string; isDown: boolean; isUp: boolean; press: (() => void) | undefined; release: (() => void) | undefined; downHandler: { (event: any): void; bind?: any; }; upHandler: { (event: any): void; bind?: any; }; unsubscribe: () => void; };
  key = {}
  console.log(value, key)
  key.value = value;
  key.isDown = false;
  key.isUp = true;
  key.press = undefined;
  key.release = undefined;
  //The `downHandler`
  key.downHandler = event => {
    if (event.key === key.value) {
      if (key.isUp && key.press) key.press();
      key.isDown = true;
      key.isUp = false;
      event.preventDefault();
    }
  };

  //The `upHandler`
  key.upHandler = event => {
    if (event.key === key.value) {
      if (key.isDown && key.release) key.release();
      key.isDown = false;
      key.isUp = true;
      event.preventDefault();
    }
  };

  //Attach event listeners
  const downListener = key.downHandler.bind(key);
  const upListener = key.upHandler.bind(key);
  
  window.addEventListener(
    "keydown", downListener, false
  );
  window.addEventListener(
    "keyup", upListener, false
  );
  
  // Detach event listeners
  key.unsubscribe = () => {
    window.removeEventListener("keydown", downListener);
    window.removeEventListener("keyup", upListener);
  };
  
  return key;
}

引入完keyboard函数后，我们来创建左右方向的键盘监听，并完善一下left和right的press和release函数， 同时新建一个catVX， 用来表示tom的速度属性，如果是6.版本以下的，那还有cat.vx这个速度属性，6.版本之后，就取消这个了，不知道放置了在哪儿，所以只能手动新建了。

let left = keyboard("ArrowLeft")
let right = keyboard("ArrowRight")
let catVX:number // 设置tom的速度属性
// 完善一下left和right的press和release函数
left.press = () => {
  // console.log(cat)
  catVX = -3
}
left.release = () => {
  if (!right.isDown) {
    catVX = 0
  }
}
right.press = () => {
  // console.log(cat)
  catVX = 3
}
right.release = () => {
  if (!right.isDown) {
    catVX = 0
  }
}

然后我们修改一下上期代码的play函数，这个是刷新网页帧的函数，我们把之前碰撞函数改写一下

function play(delta: number) {
  cat.x += catVX
  // 碰撞函数监测
  if (hitTestRectangle(cat, mouse)) {
    //There's a collision
    cat.x = 130
    cat.tint = 0xff0054
    count++
  } else if (!hitTestRectangle(cat, mouse)) {
    //There's no collision
    // cat.x -= 1
    // cat.tint = 0xccff99
  }
}

就可以用小键盘的← →控制tom移动啦

2、添加背景图片

突然想起背景图还没添加，其实背景图片也是一个sprite，不过pixijs是canvas，所以sprite的添加顺序，就决定了是在上层还是下层，背景应该在最底层，那就应该最先添加。

同样用loader加载器先加载好图片，然后在setup函数里添加背景

app.loader
  .add([
    "tom.jpeg",
    "jerry.jpeg",
    "bg.jpeg"
  ])
  .load(setup)

声明好变量bg

let bg: PIXI.Sprite

setup函数里

// 设置背景
  bg = new PIXI.Sprite(app.loader.resources["bg.jpeg"].texture)
  bg.x = 0
  bg.y = 0
  bg.width = 400
  bg.height = 400
  app.stage.addChild(bg)

三、 小结

今天浅浅试了一下键盘监听的事件，也对sprite也有了更多的认知，容我好好构思的可以利用这些函数实现什么样的效果，先睡觉了，苟命要紧！明天继续更新。

ps: 我是地霊殿__三無，希望我别摸鱼了！