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

Question

Afafks123132132165 @Afafks123132132165

JavaScript

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

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

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

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

Простой
Как в map вернуть развернутый массив?
- 1 подписчик
- 7 часов назад
- 71 просмотр
0

ответов
JavaScript

+4 ещё

Простой
Как записать результаты работы цикла Thymeleaf в переменную JavaScript?
- 1 подписчик
- 11 часов назад
- 36 просмотров
1

ответ
JavaScript

+4 ещё

Простой
Как сузить диапазон генерации случайных чисел?
- 1 подписчик
- 12 часов назад
- 160 просмотров
2

ответа
JavaScript

Простой
Как написать функцию, которая принимает цифру и возвращает число прописью?
- 2 подписчика
- 19 часов назад
- 225 просмотров
1

ответ
JavaScript

Средний
Как удалить элемент из массива в local storage по его индексу?
- 2 подписчика
- 21 час назад
- 197 просмотров
3

ответа
JavaScript

+1 ещё

Средний
Как в консоли Google Chrome, получить имя функции-обработчика конкретного элемента (для `scroll`), чтобы прибить её с помощью `removeEventListener`?
- 1 подписчик
- 23 часа назад
- 29 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как зафиксировать блок модального окна бутстра на iphone, чтоб он не прыгал при свайпах?
- 1 подписчик
- вчера
- 52 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Как разместить и обновлять свой js-скрипт на гитхаб через PHP?
- 1 подписчик
- вчера
- 150 просмотров
1

ответ
JavaScript

+1 ещё

Средний
Как получить массив дней месяца, с пн по вс?
- 1 подписчик
- вчера
- 101 просмотр
1

ответ
JavaScript

Средний
Как вывести два поля input при определенном option в select в определенном элементе?
- 1 подписчик
- 08 мая
- 81 просмотр
1

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

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

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

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

вАйТи

от 5 000 до 25 000 ₽

JavaScript Developer (backend / fullstack)

Brightdata • Тель-Авив

от 5 500 до 6 500 $

Доработать обмен заказами 1с

11 мая 2024, в 00:19

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

Разработка сайта (верстка)

10 мая 2024, в 23:51

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

Опубликовать приложение в Google play

10 мая 2024, в 23:33

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

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

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_существа }
вычисляем длину этого вектора по теореме Пифагора;
если длина вектора больше, чем шаг_существа - делим каждую компоненту этого вектора на его длину и умножаем на размер_шага_существа (иногда шаг_существа вычисляется по количеству времени после прошлой итерации);
а если длина вектора меньше, чем шаг_существа - то оставляем вектор как есть;

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

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

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

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

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

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

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