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

статья на MDN

Дело в том, что новые промисы создаются не «потом», а сразу, при добавлении очередной задачи. Так они не становятся в очередь друг за другом.

Можно добавить метод, который будет создавать новый промис только, когда его время придёт:

class Q {
  constructor() {
    this.promise = Promise.resolve();
  }

  makePromise(cb) {
    return new Promise(res => setTimeout(
      () => {
        cb();
        res();
      },
      1e3
    ));
  }

  enqueue(cb) {
    this.promise = this.promise
      .then(() => this.makePromise(cb));
    return this;
  }
}


const cell = new Q();
cell.enqueue(() => console.log(1));
cell.enqueue(() => console.log(2));
cell.enqueue(() => console.log(3));

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

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

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

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

const pow = (n, power) => {
  let times = power >= 0 ? power : -power;
  let result = 1;
  while (times-- >= 1) result = result * n;
  return power >= 0 ? result : 1 / result;
}

pow(2, -3.2)  // 0.125

const len1 = arr1.length;
const top2 = 2 * Math.floor((arr2.length - 2) / 2);
for (let id1 = 0, id2 = 0; id1 < len1; id1++, id2 = Math.min(top2, id2 + 2)) {
  console.log(`name: ${arr1[id1]} val1: ${arr2[id2]} val2: ${arr2[id2 + 1]}`); 
}

[заметки на полях] Имена переменным лучше давать с намёком на их смысл. Если даны arr1 и arr2, индексы по ним, соотв., хорошо назвать с теми же номерами: id1 и id2

Как вы уже поняли и верно заметили, коллбэк это функция, которую передали куда-то и вызовут, когда надо будет.

Асинхронность достигается не за счёт коллбэков. Их просто удобно использовать там, где есть асинхронность. Хотя ещё удобнее промисы.

Асинхронность возникает там, где рвётся последовательный (строчка за строчкой) порядок выполнения кода. Где один код уже отыграл и отпустил движок JS – пусть остынет, нет пока больше дел. А остались навешанные слушатели событий, таймеры, нерешённые промисы, долгоиграющие ajax-запросы и прочая асинхрота.

В эти слушатели, таймауты и прочие и передают в коллбэке те строки кода, которые надо будет выполнить «потом».

Пример. Не хотите setTimeout, тогда с кнопкой пробела:

function superCallback() {
  console.log("Свершилось! Коллбэк сработал.");
}

document.addEventListener("keydown", superCallback);
// на этот момент мы объявили функцию и повесили слушатель события
// дальше всё, делать больше нечего, движок JS свободен
// но слушатель сидит, ждёт.

Наступает ночь асинхронность. Никакой код сейчас не работает. Но заряжен слушатель с коллбэком.

Теперь, если выждав паузу, нажать какую-нибудь клавишу, сработает слушатель и проиграет вслух код в коллбэке.

const repack = arr => {
  const result = [...new Array(1 + Math.floor((arr.length - 1) / 2.5))].map(() => []);
  arr.forEach((el, i) => result[Math.floor(i / 2.5)].push(el));
  return result;
}

JSON.stringify(repack([1, 2, 3, 4, 5, 6, 7, 8, 9]))
// "[[1,2,3],[4,5],[6,7,8],[9]]"

Здесь несколько моментов, которые ещё пригодятся в других задачах:

1. Создание массива нужно длины с заполнением начальными значениями
   

   [...new Array(length)].fill(value) // тут не годится, т.к. заполняем пустыми массивами
   // и чтобы это не был один и тот же массив («передача по ссылке»)
   // заполняем другим способом, через map()
   [...new Array(length)].map(() => [])

2. получение чередующегося ряда 3, 2, 3, 2, ... через Math.floor(i / 2.5)

Надеюсь, иллюстрация вашей задачи поможет сориентироваться.
На схеме A, B, C, D – данные 4 точки.
E — пятая точка, с нахождением (X, Y) которой у вас пятая точка.

Тригонометрия, школьная программа. OE = 5. Угол AOE = 100°
Надо найти OF и OG

OF = OE * cos(a)
OG = OE * sin(a)

Можно сгенерить 20 случайных символов

[...new Array(20)].map(
  () => Math.round(0xF * Math.random())
    .toString(16)
    .toUpperCase()
).join('')

Заведите для них общий контейнер. Массив или объект:

const container = {};

for (let i = 0; i < 10; i++) {
  const id = `#player${i}`;
  container[id] = new Player(id);
}

Попробуйте дописать перед строкой data:image/jpeg;base64,

<img src="data:image/jpeg;base64,/9j/4AAQ..." />

См. Data URL

Вероятно, не стоит держать строгую последовательность «сначала такие темы по JS, только затем Vue».

Начните с простых примеров использования Vue. По мере возникновения вопросов «а это что за ... такое?» закрывайте пробелы в JS.

Проблема в этой строке:

collision(enemy[i].x,enemy[i].y,player[j].x,player[j].y,32,32,32,32,player.splice(j,1),enemy.splice(i,1));

В функцию передаётся не действие, которое надо выполнить в случае — а его результат. Вот эти

player.splice(j,1)
enemy.splice(i,1)

выполняются сразу, при первом же обращении — и не останется ни игроков ни врагов. Ядерная зима.

Чтобы не выполнять их сразу же, оберните эти действия в функцию и передавайте функцию в collision(), чтобы там её вызвали только после проверки условий.

Ещё можно не передавать сотню параметров, а договориться, что у объектов игроков и врагов всегда будут свойства
x, y, w, h. Так можно передавать сами объекты целиком:

function collision(A, B, onCollision) {
  if (
    A.x + A.w >= B.x 
    && A.x <= B.x + B.w
    && A.y + A.h >= B.y
    && A.y <= B.y + B.h
  ) { 
    onCollision(); // <-- только тут выполнятся действия
  }
}

// ...
player.push({x: 0, y: 0, w: 32, h: 32});
enemy.push({x: 144, y: 104, w: 32, h: 32});
// ...
collision(
  enemy[i],
  player[j],
  function() {
    player.splice(j,1);
    enemy.splice(i,1);
  }
);

Рабочий jsFiddle

обернуть выражение в скобки и добавить 1

// заменить это:
$('#api-cat #song'+id+', #api-wb #song'+id+'').index()

// на это:
($('#api-cat #song'+id+', #api-wb #song'+id+'').index() + 1)

Но не стоит городить длинные нечитаемые строки. Как вариант, можно склеивать массив частей через пробел:

$('h1 em').html([
  'Играет',
  $('#api-cat #song'+id+', #api-wb #song'+id+'').index() + 1,
  'трек из',
  $('h1').attr('data'),
  '<i class="fa fa-cube"><i>',
].join(' '));