JS/HTML5游戲常用算法之追蹤算法實例詳解
本文實例講述了JS/HTML5游戲常用算法之追蹤算法。分享給大家供大家參考，具體如下：
追蹤算法在動作游戲中非常常見，從很早的游戲《吃豆人》到大型的街機機戰(zhàn)類游戲，到處可見追蹤效果的身影。一個好的追蹤算法將會大大提高游戲的可玩性和玩家的興趣。
【簡單算法】
先來看一個簡單的跟蹤算法，如下圖所示，假設(shè)在canvas坐標(biāo)系中存在物體A和B，物體A將把B作為追蹤目標(biāo)，物體在二維空間中的運動可以分解為坐標(biāo)系中X、Y軸的運動，其在X和Y方向的速度決定了物體運行的方向和速率。別忘了，速度是有方向和大小的，于是物體A的速度在X、Y軸方向分解成vx、vy，B物體也是一樣，這樣，如果物體A要追蹤到B，只需要比較兩個物體分別在 X、Y 方向的速度即可。設(shè)物體 A 坐標(biāo)為(x1, y1)，A 的速度分解為(vx, vy)，物體B 坐標(biāo)為(x2, y2)，B 的速度分解為(vx1, vy1)，假設(shè)A 要追到B，對于水平X 方向分量來說，如果x2>x1，表示B在A的右邊，這時候必須設(shè)置vx為某一個正值，反之，則需要將vx設(shè)置成一個負值，同樣的道理，對于垂直方向Y來說，需要進行同樣的處理即可。
基于以上這個簡單算法的原理，可以來嘗試一個簡單的例子。
<!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++) {
//簡單算法
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代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試運行上述代碼，觀察運行效果。
采用這種算法的方塊的行動比較突兀，方塊的變向比較突然，效果看起來不是非常理想，于是，就產(chǎn)生了下面的視線追蹤算法。
【視線追蹤算法】
視線追蹤算法，采用這種算法，追蹤者將會始終保持著和目標(biāo)對象的直線進行移動，如下圖所示，看起來就好像追蹤捕食的獵豹一樣，死死地盯著目標(biāo)不放。
如果要達到這種效果，實際上就表示在任意時刻，A 的速度方向必須保持在 AB 之間連接的直線上面，那么這個時候如何獲取A的速度在x軸和y軸方向上的分量呢？
這里我們可以采用向量來解決問題，向量是一種只有方向和大小而沒有位置的概念，由向量的知識可知，假設(shè)任意時刻物體 A 向量表示為 v1(x1, y1)，物體 B 向量表示為 v2(x2, y2)，則由A 指向B 位置的向量v3=(x2−x1, y2−y1)。這3 個向量的關(guān)系可以由圖6-4 表示出來，設(shè)向量v3的長度為VLen =√ (x2−x1)²+(y2−y1)² ，則向量v3標(biāo)準(zhǔn)化后可以用v4=((x2−x1)/VLen，(y2−y1)/VLen)表示。最后得到的v4在x軸方向上的分量就可以作為物體A在該時刻X軸方向上的分量，v4在Y軸方向上的分量就可以作為物體A在該時刻Y軸方向上的分量。
將上面的簡單算法，按照視線追蹤算法進行改寫：
<!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代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試運行上述代碼，可得到如下運行結(jié)果：
github地址：https://github.com/krapnikkk/JS-gameMathematics
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript數(shù)學(xué)運算用法總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript數(shù)組操作技巧總結(jié)》、《JavaScript排序算法總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》及《JavaScript錯誤與調(diào)試技巧總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
使用PHP+JavaScript將HTML頁面轉(zhuǎn)換為圖片的實例分享
這篇文章主要介紹了使用PHP+JavaScript將HTML元素轉(zhuǎn)換為圖片的實例分享,文后結(jié)果的截圖只能體現(xiàn)出替換的字體,也不能說將靜態(tài)頁面轉(zhuǎn)為圖片可以加快加載,只是這種做法比較interesting XD需要的朋友可以參考下2016-04-04
這篇文章主要給大家介紹了關(guān)于Javascript中引用類型傳遞的知識點，文中介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。2017-03-03
javascript alert亂碼的解決方法2013-11-11
不使用JavaScript實現(xiàn)菜單的打開和關(guān)閉效果demo
本文通過實例代碼給大家分享在不使用JavaScript實現(xiàn)菜單的打開和關(guān)閉效果，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-05-05
下面小編就為大家?guī)硪黄狫S倒計時實例_天時分秒。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
JS笛卡爾積算法與多重數(shù)組笛卡爾積實現(xiàn)方法示例
這篇文章主要介紹了JS笛卡爾積算法與多重數(shù)組笛卡爾積實現(xiàn)方法,結(jié)合實例形式分析了javascript根據(jù)對象或數(shù)組生成笛卡爾積的相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
本文給大家分享的是基于JavaScript的setCapture方法實現(xiàn)的拖動效果，非常的簡單實用，有需要的小伙伴可以參考下2016-09-09
詳解javascript中對數(shù)據(jù)格式化的思考
本篇文章主要介紹了詳解javascript中對數(shù)據(jù)文本格式化的思考 ，具有一定的參考價值，有興趣的可以了解一下。2017-01-01
在js代碼拼接dom對象到頁面上去的模板總結(jié)(必看)
下面小編就為大家?guī)硪黄趈s代碼拼接dom對象到頁面上去的模板總結(jié)(必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
手動輪播圖，為輪播圖中的一種，輪播圖主要有無縫輪播，手動輪播，延遲輪播，切換輪播等等，輪播圖主要用于展現(xiàn)圖片，新出商品，詞條，又能美觀網(wǎng)頁。給網(wǎng)頁中增加動態(tài)效果。接下來通過本文給大家分享原生JS實現(xiàn)手動輪播圖的實例代碼，一起看看吧2018-11-11