Алгоритм преследования цели
- // Инициализация
- var canv = new Canv(canvas.getContext('2d'),
- canvas.width, canvas.height);
- // Начальные координаты объектов
- var ax = rand(canvas.width);
- var ay = rand(canvas.height);
- var bx = rand(canvas.width);
- var by = rand(canvas.height);
- var speed = 10;
- canvas.addEventListener('mousemove', function(e) {
- // Обработчик событий перемещения мыши
- var rect = canvas.getBoundingClientRect();
- bx = e.clientX - rect.left;
- by = e.clientY - rect.top;
- }, false);
- var timer = setInterval(function() {
- // Основа алгоритма, описание ниже
- var angle = Math.atan2(by - ay, bx - ax);
- if (angle < 0) angle += 2 * Math.PI;
- ax += speed * Math.cos(angle);
- ay += speed * Math.sin(angle);
- canv.clear();
- canv.drawCircle(ax, ay, '#0e0');
- canv.drawLine(ax, ay, angle, 'black')
- canv.drawCircle(bx, by, '#e00');
- }, 1000/30);
- function rand(max) {
- return Math.floor(Math.random() * max);
- }
- // Обёртка для канваса
- function Canv(ctx, w, h) {
- this.radius = 5;
- this.clear = function() {
- ctx.fillStyle = 'white';
- ctx.rect(0, 0, w, h);
- ctx.fill();
- };
- this.drawCircle = function(x, y, color) {
- ctx.strokeStyle = "#000";
- ctx.fillStyle = color;
- ctx.beginPath();
- ctx.arc(x, y, this.radius, Math.PI * 2, false);
- ctx.stroke();
- ctx.fill();
- ctx.closePath();
- };
- this.drawLine = function(x, y, angle, color) {
- ctx.strokeStyle = color;
- ctx.lineWidth = 1;
- ctx.beginPath();
- ctx.moveTo(x, y);
- ctx.lineTo(x + Math.cos(angle) * 2 * this.radius,
- y + Math.sin(angle) * 2 * this.radius);
- ctx.stroke();
- ctx.closePath();
- };
- }
- <div id="panel">
- <canvas id="canvas" width="400" height="300"></canvas>
- </div>
- #panel {
- width: 400px;
- height: 300px;
- }
Демонстрация алгоритма преследования цели. В качестве цели выступает курсор мыши.
В основе алгоритма лежит формула вычисления угла по двум точкам:
var angle = Math.atan2(by - ay, bx - ax);
ax, ay - координаты преследователя
bx, by - координаты цели, курсор мыши
angle - угол в радианах
Далее, по значению угла и некоторой скорости перемещения рассчитываем новую позицию преследователя:
ax += speed * Math.cos(angle);
ay += speed * Math.sin(angle);
В основе алгоритма лежит формула вычисления угла по двум точкам:
var angle = Math.atan2(by - ay, bx - ax);
ax, ay - координаты преследователя
bx, by - координаты цели, курсор мыши
angle - угол в радианах
Далее, по значению угла и некоторой скорости перемещения рассчитываем новую позицию преследователя:
ax += speed * Math.cos(angle);
ay += speed * Math.sin(angle);