Алгоритм преследования цели

javascript gamedev алгоритм
  1. // Инициализация
  2. var canv = new Canv(canvas.getContext('2d'),
  3.                     canvas.width, canvas.height);
  4. // Начальные координаты объектов
  5. var ax = rand(canvas.width);
  6. var ay = rand(canvas.height);
  7. var bx = rand(canvas.width);
  8. var by = rand(canvas.height);
  9. var speed = 10;
  10.  
  11. canvas.addEventListener('mousemove', function(e) {
  12.   // Обработчик событий перемещения мыши
  13.   var rect = canvas.getBoundingClientRect();
  14.   bx = e.clientX - rect.left;
  15.   by = e.clientY - rect.top;
  16. }, false);
  17.  
  18. var timer = setInterval(function() {
  19.   // Основа алгоритма, описание ниже
  20.   var angle = Math.atan2(by - ay, bx - ax);
  21.   if (angle < 0) angle += 2 * Math.PI;
  22.  
  23.   ax += speed * Math.cos(angle);
  24.   ay += speed * Math.sin(angle);
  25.   canv.clear();
  26.   canv.drawCircle(ax, ay, '#0e0');
  27.   canv.drawLine(ax, ay, angle, 'black')
  28.   canv.drawCircle(bx, by, '#e00');
  29. }, 1000/30);
  30.  
  31. function rand(max) {
  32.     return Math.floor(Math.random() * max);
  33. }
  34.  
  35. // Обёртка для канваса
  36. function Canv(ctx, w, h) {
  37.     this.radius = 5;
  38.     this.clear = function() {
  39.         ctx.fillStyle = 'white';
  40.         ctx.rect(0, 0, w, h);
  41.         ctx.fill();
  42.     };
  43.     this.drawCircle = function(x, y, color) {
  44.         ctx.strokeStyle = "#000";
  45.         ctx.fillStyle = color;
  46.         ctx.beginPath();
  47.         ctx.arc(x, y, this.radius, Math.PI * 2, false);
  48.         ctx.stroke();
  49.         ctx.fill();
  50.         ctx.closePath();
  51.     };
  52.     this.drawLine = function(x, y, angle, color) {
  53.         ctx.strokeStyle = color;
  54.         ctx.lineWidth = 1;
  55.         ctx.beginPath();
  56.         ctx.moveTo(x, y);
  57.         ctx.lineTo(x + Math.cos(angle) * 2 * this.radius,
  58.                    y + Math.sin(angle) * 2 * this.radius);
  59.         ctx.stroke();
  60.         ctx.closePath();
  61.     };
  62. }
  1. <div id="panel">
  2.     <canvas id="canvas" width="400" height="300"></canvas>
  3. </div>
  1. #panel {
  2.     width: 400px;
  3.     height: 300px;
  4. }
Демонстрация алгоритма преследования цели. В качестве цели выступает курсор мыши.

В основе алгоритма лежит формула вычисления угла по двум точкам:
var angle = Math.atan2(by - ay, bx - ax);
ax, ay - координаты преследователя
bx, by - координаты цели, курсор мыши
angle - угол в радианах

Далее, по значению угла и некоторой скорости перемещения рассчитываем новую позицию преследователя:
ax += speed * Math.cos(angle);
ay += speed * Math.sin(angle);
Назад

Реклама

Мы в соцсетях

tw tg yt gt