快捷導(dǎo)航

JS/HTML5游戲常用算法之追蹤算法實(shí)例詳解

更新時(shí)間：2018年12月12日 11:38:41 作者：krapnik

這篇文章主要介紹了JS/HTML5游戲常用算法之追蹤算法,結(jié)合吃豆人游戲的算法原理以實(shí)例形式詳細(xì)分析了追蹤算法的相關(guān)算法操作技巧與注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了JS/HTML5游戲常用算法之追蹤算法。分享給大家供大家參考，具體如下：

追蹤算法在動(dòng)作游戲中非常常見(jiàn)，從很早的游戲《吃豆人》到大型的街機(jī)機(jī)戰(zhàn)類(lèi)游戲，到處可見(jiàn)追蹤效果的身影。一個(gè)好的追蹤算法將會(huì)大大提高游戲的可玩性和玩家的興趣。

【簡(jiǎn)單算法】

先來(lái)看一個(gè)簡(jiǎn)單的跟蹤算法，如下圖所示，假設(shè)在canvas坐標(biāo)系中存在物體A和B，物體A將把B作為追蹤目標(biāo)，物體在二維空間中的運(yùn)動(dòng)可以分解為坐標(biāo)系中X、Y軸的運(yùn)動(dòng)，其在X和Y方向的速度決定了物體運(yùn)行的方向和速率。別忘了，速度是有方向和大小的，于是物體A的速度在X、Y軸方向分解成vx、vy，B物體也是一樣，這樣，如果物體A要追蹤到B，只需要比較兩個(gè)物體分別在 X、Y 方向的速度即可。設(shè)物體 A 坐標(biāo)為(x1, y1)，A 的速度分解為(vx, vy)，物體B 坐標(biāo)為(x2, y2)，B 的速度分解為(vx1, vy1)，假設(shè)A 要追到B，對(duì)于水平X 方向分量來(lái)說(shuō)，如果x2>x1，表示B在A的右邊，這時(shí)候必須設(shè)置vx為某一個(gè)正值，反之，則需要將vx設(shè)置成一個(gè)負(fù)值，同樣的道理，對(duì)于垂直方向Y來(lái)說(shuō)，需要進(jìn)行同樣的處理即可。

基于以上這個(gè)簡(jiǎn)單算法的原理，可以來(lái)嘗試一個(gè)簡(jiǎn)單的例子。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta charset="UTF-8">
  <title>追蹤算法</title>
</head>
<body>
<canvas id="stage"></canvas>
</body>
<script>
  window.onload = function () {
    var stage = document.querySelector('#stage'),
      ctx = stage.getContext('2d');
    stage.width = 400;
    stage.height = 400;
    balls = [];
    var ball = {
      x: stage.width / 2 - 20,
      y: stage.height / 2 - 20,
      r: 20,
      c: "red"
    };
    balls.push(ball);
    for (var i = 0; i < 30; i++) {
      var trace = {
        x: Math.ceil(Math.random() * (stage.width - 20) + 10),
        y: Math.ceil(Math.random() * (stage.height - 20) + 10),
        r: 10,
        c: "blue"
      };
      balls.push(trace);
    }
    function createBall(x, y, r, c) {
      ctx.beginPath();
      ctx.fillStyle = c;
      ctx.arc(x, y, r, 0, Math.PI * 2);
      ctx.fill();
    }
    stage.addEventListener('click', function (event) {
      var x = event.clientX - stage.getBoundingClientRect().left;
      var y = event.clientY - stage.getBoundingClientRect().top;
      balls[0].x = x;
      balls[0].y = y;
    });
    function update() {
      ctx.clearRect(0, 0, 400, 400);
      ctx.fillStyle = "black";
      ctx.rect(0, 0, 400, 400);
      ctx.fill();
      createBall(balls[0].x, balls[0].y, balls[0].r, balls[0].c);
      for (var i = 1, len = balls.length; i < len; i++) {
        //簡(jiǎn)單算法
        balls[i].x -= ( balls[0].x>balls[i].x)?-1:1;
        balls[i].y -= ( balls[0].y>balls[i].y)?-1:1;
        createBall(balls[i].x, balls[i].y, balls[i].r, balls[i].c);
      }
      requestAnimationFrame(update);
    }
    update();
  };
</script>
</html>

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試運(yùn)行上述代碼，觀察運(yùn)行效果。

采用這種算法的方塊的行動(dòng)比較突兀，方塊的變向比較突然，效果看起來(lái)不是非常理想，于是，就產(chǎn)生了下面的視線追蹤算法。

【視線追蹤算法】

視線追蹤算法，采用這種算法，追蹤者將會(huì)始終保持著和目標(biāo)對(duì)象的直線進(jìn)行移動(dòng)，如下圖所示，看起來(lái)就好像追蹤捕食的獵豹一樣，死死地盯著目標(biāo)不放。

如果要達(dá)到這種效果，實(shí)際上就表示在任意時(shí)刻，A 的速度方向必須保持在 AB 之間連接的直線上面，那么這個(gè)時(shí)候如何獲取A的速度在x軸和y軸方向上的分量呢？

這里我們可以采用向量來(lái)解決問(wèn)題，向量是一種只有方向和大小而沒(méi)有位置的概念，由向量的知識(shí)可知，假設(shè)任意時(shí)刻物體 A 向量表示為 v1(x1, y1)，物體 B 向量表示為 v2(x2, y2)，則由A 指向B 位置的向量v3=(x2−x1, y2−y1)。這3 個(gè)向量的關(guān)系可以由圖6-4 表示出來(lái)，設(shè)向量v3的長(zhǎng)度為VLen =√ (x2−x1)²+(y2−y1)² ，則向量v3標(biāo)準(zhǔn)化后可以用v4=((x2−x1)/VLen，(y2−y1)/VLen)表示。最后得到的v4在x軸方向上的分量就可以作為物體A在該時(shí)刻X軸方向上的分量，v4在Y軸方向上的分量就可以作為物體A在該時(shí)刻Y軸方向上的分量。

將上面的簡(jiǎn)單算法，按照視線追蹤算法進(jìn)行改寫(xiě)：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta charset="UTF-8">
  <title>追蹤算法</title>
</head>
<body>
<canvas id="stage"></canvas>
</body>
<script>
  window.onload = function () {
    var stage = document.querySelector('#stage'),
      ctx = stage.getContext('2d');
    stage.width = 400;
    stage.height = 400;
    balls = [];
    var ball = {
      x: stage.width / 2 - 20,
      y: stage.height / 2 - 20,
      r: 20,
      c: "red"
    };
    balls.push(ball);
    for (var i = 0; i < 30; i++) {
      var trace = {
        x: Math.ceil(Math.random() * (stage.width - 20) + 10),
        y: Math.ceil(Math.random() * (stage.height - 20) + 10),
        r: 10,
        c: "blue"
      };
      balls.push(trace);
    }
    function createBall(x, y, r, c) {
      ctx.beginPath();
      ctx.fillStyle = c;
      ctx.arc(x, y, r, 0, Math.PI * 2);
      ctx.fill();
    }
    stage.addEventListener('click', function (event) {
      var x = event.clientX - stage.getBoundingClientRect().left;
      var y = event.clientY - stage.getBoundingClientRect().top;
      balls[0].x = x;
      balls[0].y = y;
    });
    function update() {
      ctx.clearRect(0, 0, 400, 400);
      ctx.fillStyle = "black";
      ctx.rect(0, 0, 400, 400);
      ctx.fill();
      createBall(balls[0].x, balls[0].y, balls[0].r, balls[0].c);
      for (var i = 1, len = balls.length; i < len; i++) {
        //視線追蹤算法
        var vx = balls[i].x - balls[0].x,
          vy = balls[i].y - balls[0].y,
          rlen = Math.sqrt(vx * vx + vy * vy),
          dx = vx / rlen,
          dy = vy / rlen;
        balls[i].x -= dx;
        balls[i].y -= dy;
        createBall(balls[i].x, balls[i].y, balls[i].r, balls[i].c);
      }
      requestAnimationFrame(update);
    }
    update();
  };
</script>
</html>

使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試運(yùn)行上述代碼，可得到如下運(yùn)行結(jié)果：