基於canvas的自動跟隨實現

遊戲中，怪會追着主角打，那麼這個追逐的過程是怎麼實現的呢？咱們來從0開始試一下

1. 主角與怪的位置與速度矢量

主角和怪有以下關係，主角和怪的直線斜率爲tanθ

假設怪的速度爲v，那麼一個時刻內，怪的x座標變化：Δ x = v * cosθ，y座標變化：Δ y = v * sinθ。注意，sin和cos是有正負的。因而，咱們開始解方程求出sin和cos的值：

sin^2 + cos^2 = 1
tan = sin / cos = k = (y - y1) / (x - x1) ······ 已知

解得
cos = ± √[1/(tan ^2 + 1)]
sin = ± √[tan ^2/(tan ^2 + 1)]
複製代碼

接下來就是sin和cos正負的問題了，知足以下關係

sin < 0, cos < 0 | sin < 0, cos > 0
----------------敵人------------------
sin > 0, cos < 0 | sin > 0, cos > 0
複製代碼

因此咱們只須要判斷怪在主角哪一個方向就知道了sin和cos的正負了

2. canvas與面向對象

html部分，就一個canvas標籤就好，

// 一頓基本操做
    const canvas = document.querySelector('canvas');
    const ctx = canvas.getContext("2d");
    const width = (canvas.width = window.innerWidth);
    const height = (canvas.height = window.innerHeight);
複製代碼

canvas面向對象的開發模式，大概的步驟：

• 使用requestanimationframe來一幀幀繪製動畫，每個元素是一個基類實例化而來
• 每個元素的每一幀須要draw(畫元素)、update(更新元素位置給下一次用)
• 有時候須要邊緣檢測、碰撞檢測

核心元素類

class Element {
      constructor({ v, x, y, r, color, target, width, height, ...rest }) {
        this.v = v || 1; // 防止速度爲0
        this.v0 = this.v; // 備份使用的速度重置
        this.x = x || 1; // 位置
        this.y = y || 1;
        this.r = r; // 半徑
        this.color = color; // 球的顏色
        this.target = target; // 攻擊目標
        this.width = width; // 攻擊目標
        this.height = height; // 攻擊目標
        Object.assign(this, rest); // 多餘的屬性都assign進來
      }

      draw(ctx) {
        // 畫圓
        ctx.beginPath();
        ctx.fillStyle = this.color;
        ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
        ctx.fill();
        ctx.fillStyle = this.color;
      }

      checkEdge() {
        // 若是出邊緣了，那就彈回來
        const d = this.r; // 調節參數，根據狀況修改。碰撞邊緣的時候座標減小來矯正
        if (this.x + this.r >= this.width) {
          this.x = this.width - this.r - d; //防止半身進入邊緣，無限循環，黏住邊緣
          this.v = -this.v; //反彈
        }

        if (this.x - this.r <= 0) {
          this.x = this.r + d;
          this.v = -this.v;
        }

        if (this.y + this.r >= this.height) {
          this.y = this.height - this.r - d;
          this.v = -this.v;
        }

        if (this.y - this.r <= 0) {
          this.y = this.r + d;
          this.v = -this.v;
        }
      }

      update() {
        if (!this.target) {
          return;
        }
        const { x: meX, y: meY } = this.target;
        // 追逐主角算法
        if (this.x === meX) {
          // 處理tan90度
          this.y += (meY < this.y ? -1 : 1) * this.v;
        } else {
          const tan = (this.y - meY) / (this.x - meX);
          // 確保符號的正確
          const cos = (meX < this.x ? -1 : 1) * Math.sqrt(1 / (tan * tan + 1));
          const sin = (meY < this.y ? -1 : 1) * Math.sqrt((tan * tan) / (tan * tan + 1));

          this.x += this.v * cos;
          this.y += this.v * sin;
        }
        // 邊緣矯正
        this.checkEdge();
      }

      isCollision() {
        if (!this.target) {
          return;
        }
        const { x: meX, y: meY } = this.target;
        const v0 = this.v || this.v0;
        let isCrash;
        //是否碰撞
        const distance = getDistance(this.x, this.y, meX, meY);
        if (distance <= this.r + this.target.r) {
          this.v = 0;
          isCrash = true;
        }
        // 沒碰的，重置爲原速度
        if (!isCrash) {
          this.v = v0;
        }
      }
    }
     // 主角類
    class Me extends Element{
      update() { // 主角就隨便動吧
        this.y += this.v;
        this.x += this.v;
        this.checkEdge();
      }
    }

    // 兩點座標
    function getDistance(x, y, x1, y1) {
      const dx = x - x1;
      const dy = y - y1;
      return Math.sqrt(dx * dx + dy * dy);
    }
複製代碼

元素類就這樣，接下來就能夠讓動畫走起來了

3. 渲染方法

// 生成隨機數
    const ran = (min, max) => parseInt((max - min) * Math.random()) + min;

    // 主角
    const me = new Me({
      v: 10,
      x: ran(0, width),
      y: ran(0, height),
      r: 20,
      color: "#f00",
      width, // 活動範圍
      height,
    });

    // 敵人數組
    const enemies = Array.from({ length: 3 })
      .map(() => new Element({
        v: ran(1, 7),
        x: ran(0, width),
        y: ran(0, height),
        r: ran(10, 20),
        color: '#' + (~~(Math.random() * (1 << 24))).toString(16),
        target: me, // 主角是目標
        width,
        height,
      }));

    const loop = () => {
      //等於黑板擦，擦除前面畫面從新畫過
      ctx.fillStyle = "rgba(0,0,0,.1)";
      ctx.fillRect(0, 0, width, height);

      // 每個元素的渲染
      me.draw(ctx);
      me.update();
      me.isCollision();

      enemies.forEach(enemy => {
        enemy.draw(ctx);
        enemy.update();
        enemy.isCollision();
      });
      requestAnimationFrame(loop);
    };

    loop();
複製代碼

運行代碼，都追着主角走的效果出來了