Как сделать движение существа к еде?

Question

Afafks123132132165 @Afafks123132132165

JavaScript

Как сделать движение существа к еде?

Например у меня есть существо и оно должно идти к еде.У существа есть определенный радиус в котором она может чувствовать еду.Ее чувства я сделал но как сделать движение к еде?То есть как сделать так то бы существо плавно пошло к еде?Что то я не понимаю помогите мне.

Вопрос задан более трёх лет назад
183 просмотра

1 комментарий

Подписаться 1 Средний 1 комментарий

Решения вопроса 1

26 комментариев

Afafks123132132165 @Afafks123132132165 Автор вопроса

Могли бы вы написать что значит k

Написано более трёх лет назад
Сергей Соколов @sergiks Куратор тега JavaScript

Afafks123132132165, это коэффициент, определяющий скорость.
Зависит от быстроты компа, частоты кадров и пр.
Пробуйте разные значения.

Написано более трёх лет назад
Сергей Соколов @sergiks Куратор тега JavaScript

буквально он означает, какую часть расстояния между существом и целью пройдёт существо за 1 кадр.

Поставьте, скажем 1/100 для начала.

Написано более трёх лет назад
Afafks123132132165 @Afafks123132132165 Автор вопроса

Сергей Соколов, Спасибо

Написано более трёх лет назад
Afafks123132132165 @Afafks123132132165 Автор вопроса

УААААУ

Написано более трёх лет назад
Afafks123132132165 @Afafks123132132165 Автор вопроса

НИФИГА СЕБЕ ВОТ ЭТО ДА НЕТ РЕАЛЬНО КЛАССНО

Написано более трёх лет назад
Сергей Соколов @sergiks Куратор тега JavaScript

Особенность такого метода в том, что скорость существа будет высокой в начале движения, когда до холодильника далеко. И замедляться по мере приближения.

Если стилистика игры требует другой динамики, можно обновлять координаты с постоянной абсолютной «скоростью» в сторону цели. Но тут есть риск, что пролетит мимо цели, развернётся, и опять пролетит мимо - и так болтаться бесконечно )

Написано более трёх лет назад
Afafks123132132165 @Afafks123132132165 Автор вопроса

Сергей Соколов, Есть проблемка когда я например ставлю много еды вокруг существа то оно недоходит до нее

Написано более трёх лет назад
Сергей Соколов @sergiks Куратор тега JavaScript

в примере с полётом мухи, не одна цель, а цепочка:
цель – промежуточная_цель – промежуточная_цель – промежуточная_цель — муха

За счёт этого при смене цели муха «поворачивает» плавно.

Написано более трёх лет назад
Afafks123132132165 @Afafks123132132165 Автор вопроса

Сергей Соколов, А как это?

Написано более трёх лет назад
Afafks123132132165 @Afafks123132132165 Автор вопроса

Сергей Соколов, Помните тот движок вы помогли мне сделать я сейчас его использую ))))))

Написано более трёх лет назад
Afafks123132132165 @Afafks123132132165 Автор вопроса

Сергей Соколов, Что то эта штука работает неправильно у существа какое то рассейное внимание

Написано более трёх лет назад
Сергей Соколов @sergiks Куратор тега JavaScript

Afafks123132132165, в ответе я описал, как существу С двигаться к цели Х.
С -> Х

Чуть усложним: пусть за Существом С гонится кто-то ещё. Существо-1.
С1 -> С -> Х

Добавим в хвост погони ещё одно существо С2:
С2 -> С1 -> С -> Х

Вот уже получилась цепочка погони из 3 звеньев. На каждом кадре обновляем координаты С,
исходя из них обновляем координаты С1,
а из них уже С2.

Написано более трёх лет назад
Сергей Соколов @sergiks Куратор тега JavaScript

Afafks123132132165, в примере на jsFiddle я сделал, что как только муха приближается к цели ближе, чем на некое расстояние, цель мгновенно переносится в новое случайное место. У мухи шансов нет )

Написано более трёх лет назад

Afafks123132132165 @Afafks123132132165 Автор вопроса

Сергей Соколов,

<!DOCTYPE html>
<html>
<head>
  <title>Game</title>
</head>
<body>
<style>
#canvas{
  border:1px solid black;
}
</style>
<canvas id = "canvas" widht = "320" height = "320"></canvas>
<script type="text/javascript" src ="engine.js"></script>
<script type="text/javascript">
document.getElementById("canvas");
var ctx = canvas.getContext("2d");

creatures = [];
food = [];
help1 = 0;
help2 = 0;
creatures.push({x:144,y:144,w:32,h:32,range:100});

document.addEventListener("mousedown",function(e){
  food.push({x:e.pageX,y:e.pageY,w:16,h:16});
})

function game(){
  ctx.clearRect(0,0,320,320);
  for(i in creatures){
    ctx.fillRect(creatures[i].x,creatures[i].y,creatures[i].w,creatures[i].h);
    arc(creatures[i],100,"red");
    for(j in food){
      if(creatures[i].x + creatures[i].range >= food[j].x && creatures[i].y + creatures[i].range >= food[j].y){
        if(food[j].x <= creatures[i].x + creatures[i].range && food[j].y <= creatures[i].y + creatures[i].range){
            creatures[i].x = creatures[i].x + 1/100 * (food[j].x - creatures[i].x);
            creatures[i].y = creatures[i].y + 1/100 * (food[j].y - creatures[i].y);
        }
      }
      collision(creatures[i],food[j],function(){
        food.splice(j,1);
      })
    }
  }
  for(i in food){
    ctx.fillRect(food[i].x,food[i].y,food[i].w,food[i].h);
  }
}
setInterval(game,20);
</script>
</body>
</html>

Написано более трёх лет назад

Afafks123132132165 @Afafks123132132165 Автор вопроса

Сергей Соколов, Знаю вы не хотите разбираться в моем коде но я скажу у меня еды может быть много вооот так

Написано более трёх лет назад
Сергей Соколов @sergiks Куратор тега JavaScript

Afafks123132132165, в смысле, может одновременно несколько точек с едой притягивать существо?
И куда оно поползёт? Сильнее тянет то, что ближе?

Написано более трёх лет назад
Роман @lastuniverse

в примере с полётом мухи, не одна цель, а цепочка:
цель – промежуточная_цель – промежуточная_цель – промежуточная_цель — муха

За счёт этого при смене цели муха «поворачивает» плавно.

Сергей Соколов, интересная реализация. Я когда то делал что то подобное несколько иначе:

"текущий вектор скорости" * "коэффициент затухания" + "вектор на цель"

Получая что то типа инерции.

Написано более трёх лет назад
Сергей Соколов @sergiks Куратор тега JavaScript

Роман, при смене цели у вас, вроде бы, резко, с переломом меняется вектор движения.

Написано более трёх лет назад
Роман @lastuniverse

Сергей Соколов, я не про этот вариант (который в ответе). Тут я не стал заморачиваться)

Написано более трёх лет назад
Роман @lastuniverse

Сергей Соколов, вот, сделал вариант с плавностью через инерцию)))

snippet

Написано более трёх лет назад
Afafks123132132165 @Afafks123132132165 Автор вопроса

Сергей Соколов, Вы могли бы мне кое с чем другим помочь я тут процедурную генерацию карты написал но что то она криво работает воооооооот

Написано более трёх лет назад
Сергей Соколов @sergiks Куратор тега JavaScript

Afafks123132132165, если будет время, помогу. Задайте новый вопрос на Тостере с работающим примером на jsFiddle

Написано более трёх лет назад
Karpion @Karpion

Сергей Соколов, Как правило, скорость существа ограничена. А тут получается, что скорость м.б. сколь угодно большой - ну, ограниченной радиусом чувствительности. Не нравится мне эта формула.

Написано более трёх лет назад
Сергей Соколов @sergiks Куратор тега JavaScript

Karpion, так и быть, не используйте её.

Написано более трёх лет назад
Роман @lastuniverse

Сергей Соколов, Karpion, Afafks123132132165, в конце концов у меня получились рыбки))))

snippet

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

1 комментарий

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

Простой
Fetch дает ошибку?
- 1 подписчик
- час назад
- 38 просмотров
0

ответов
JavaScript

Простой
Обьясните про функцию массив?
- 3 подписчика
- 16 часов назад
- 288 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему JS не видит SVG-элементы по ID?
- 1 подписчик
- вчера
- 66 просмотров
1

ответ
JavaScript

Средний
Почему не срабатывает горячая клавиша в расширение?
- 1 подписчик
- вчера
- 40 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему react-hook-form не отображает ошибки zod в определенных моментах?
- 1 подписчик
- вчера
- 33 просмотра
0

ответов
JavaScript

Простой
Почему перестало работать меню?
- 1 подписчик
- 20 нояб.
- 145 просмотров
1

ответ
JavaScript

Простой
Какая логика у перебора массива таким способом?
- 1 подписчик
- 20 нояб.
- 181 просмотр
5

ответов
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- 20 нояб.
- 86 просмотров
1

ответ
JavaScript

Простой
E.target видит лишь малую область блока?
- 1 подписчик
- 20 нояб.
- 53 просмотра
0

ответов
JavaScript

Простой
Как при открытии блока закрыть предыдущий блок?
- 1 подписчик
- 20 нояб.
- 107 просмотров
0

ответов
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Разработать телеграм mini app игру и бота

23 нояб. 2024, в 20:48

40000 руб./за проект

Ведение блогоаи продвижение в Instagram, TikTok и Телеграмм

23 нояб. 2024, в 20:46

50000 руб./за проект

Доработки шаблона Wordpress

23 нояб. 2024, в 20:39

3000 руб./за проект

В данном примере реализован способ решения вашей задачи на основе пропорций.

snippet

Другие варианты

https://jsfiddle.net/ecmu9o6a/4/ - вариант попроще, с перемещающейся едой и со сглаживанием движения существ за счет инерции
https://jsfiddle.net/y86a0x9p/ - еще более простой вариант, с перемещающейся едой но без сглаживания движения существ
https://jsfiddle.net/sv0La6d1/1/ - самый простой вариант, еда стоит на месте, существа движуться линейно

Answer 1 · 2020-03-15 18:18:46

Вероятно, игра перерисовывается кадр за кадром?
Когда существо почуяло близкий холодильник, надо обновлять его координаты, на чуть более близкие к координатам холодильника:

x = x + k * (xTarget - x);
y = y + k * (yTarget - y);

В этом ответе подробнее: Какой алгоритм подойдет для описания полета насекомого?

jsFiddle, демонстрирующий такую «погоню» за целями.

Answer 2 · 2020-03-15 23:50:23

Для начала надо решить - будет ли существо обладать инерцией, или оно движется в сильно вязкой среде.

Для вязкой среды всё просто:

вычисляем вектор до еды: { X_еды-X_существа, Y_еды-Y_существа }
вычисляем длину этого вектора по теореме Пифагора;
если длина вектора больше, чем шаг_существа - делим каждую компоненту этого вектора на его длину и умножаем на размер_шага_существа (иногда шаг_существа вычисляется по количеству времени после прошлой итерации);
а если длина вектора меньше, чем шаг_существа - то оставляем вектор как есть;

прибавляем к координатам_существа модифицированный (или не модифицированный) вектор.

С инерцией всё сложно, т.к. ускорение существа обычно сильно зависит от направления и скорости. Характер движения - зависит от того, какой у существа нрав.
Например, существо может ускоряться в сторону еды, когда еда далеко, и тормозить, когда еда близко.
А бывает так, что для поворота - существо должно остановиться, развернуться и потом бежать к еде.

Ну и понятно, что если существо бежит к еде на максимальной скорости - то оно ускориться сильнее уже не может.

Как сделать движение существа к еде?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт