0

пытаюсь написать что-то вроде "танчиков" из детства на JavaScript и Canvas. Если помните, там можно было играть вдвоем на одной приставке. Проблема возникла, когда создал второго игрока:

Пример отображения двух игроков на одном экране

Как распознать столкновение, я понял. В моем случае, это пересечение двух прямоугольников:

function collisionDetection() {
    if(
        redTank.x < blueTank.x + w &&
        redTank.x + w > blueTank.x &&
        redTank.y < blueTank.y + h &&
        redTank.y + h > blueTank.y
        ){
        console.log('СТОЛКНУЛИСЬ ');
    }
}

Но вот как понять какой танк нужно остановить при столкновении друг с другом?

Думал сравнить направления танков. Но при одинаковых направлениях танков, возможны разные ситеации:

  1. Синий едет вправо, красный вверх - красный таранит в борт синего
  2. Синий едет вправо, красный вверх - синий таранит в борт красного

И в случае 1 нужно "заморозить" на месте красный танк, а в случае 2 — синий.

Как же понять, какой останавливать?

Смотреть, какой выше и какой ниже (левее / правее) тоже не вариант — возможны те же два варианта событий.

Помогите советом, пожалуйста. Может быть есть давно готовый пример. На JS я такого не нашел, увы.

1 ответ 1

1

На Nintendo танк мог занимать только 4-6 клеток. Кто первый наехал на клетку, тот может доехать на эту клетку до конца. А другой будет стоять. Что не так то? это же очевидно!

Для обсчёта коллизий необходимо для каждого танка смотреть область 1хh шириной в 1px по направлению движения и hpx, где h - это ширина танка. Если площадь занята на 1px, то можно продолжать движение. Если площадь занята на несколько пикселей, то дальше пути нет, место занято.

Пусть у каждого танка будет следующий набор параметров:

{ id: порядковый номер танка [1,2,3,...]
  w: длина,
  h: ширина,
  l: левая граница по горизонтали,
  r: правая граница по горизонтали,
  t: верхняя граница по вертикали,
  b: нижняя граница по вертикали,
  dx: перемещение по горизонтали [-1;0;+1],
  dy: перемещение по вертикали [-1;0;+1],   }

тогда:

let possibleCollision;
if(tank.dx == -1) { // движение влево
  possibleCollision = captureObjects(tank.l-1, tank.t, tank.l, tank.b);
} else if(tank.dx == 1){ // движение вправо
  possibleCollision = captureObjects(tank.r, tank.t, tank.r+1, tank.b);
} else if(tank.dy == -1){ // движение вверх
  possibleCollision = captureObjects(tank.l, tank.t-1, tank.r, tank.t);
} else if(tank.dy == 1){ // движение вниз
  possibleCollision = captureObjects(tank.l, tank.b, tank.r, tank.b+1);
}
// подсчет занятых пикселей
let collisionCount = possibleCollision.reduce((a,i)=>a+(i?1:0),0);

if(collisionCount == 0) {

  // движение свободно

} else if(collisionCount == 1){

  // движение возможно

  // далее получаем id танка
  let opponentId = possibleCollision.find(v=>v);

  // далее нужно проверить направление танка с id = opponentId
  // на предмет столкновения углами

} else {

  // площадь занята
  // останавливаем танк

}

Ну и еще нужно разработать функцию captureObjects()

function captureObjects(left, top, right, bottom){
  let area = [];
  for(let x = left; x<right; x++){
    for(let y = top; y<bottom;y++){
      for(let tank of tankList) {
        if(tank.l+tank.dx <= x && tank.r+tank.dx >= x && 
           tank.t+tank.dy <= y && tank.b+tank.dy >= y){
          area.push(tank.id);
        } else {
          area.push(0);
        }
      }
    }
  }
  return area;
}

Если области коллизий у обоих танков равны 1px, то есть они сталкиваются чётко углами, а не рёбрами, то можно пропустить танк либо с большей скоростью (если у них разные скорости), либо кто проехал длиннее путь с момента последней остановки или поворота.

5
  • Клетки - это гениально! Просто у меня нет клеток :) Графика-то пиксельная, но пиксели намного меньше, чем нарисованная "клетка". Не знаю можно ли решить эту задачку без клеток, но подумаю над тем, чтобы сделать сетку. Commented 7 янв. 2022 в 2:56
  • Ну даже если пиксели. Кто-то первый наехал на пиксель, кто-то второй. Правда, это будет работать при локальной игре, если игра сетевая и возможно параллельное выполнение событий, тогда можно считать первым того, кто проехал более длинный путь от момента последней остановки или поворота.
    – DiD
    Commented 7 янв. 2022 в 3:05
  • @КирЯщенко Просто если игра локальная, в любом случае события нажатий на клавиши или кнопки работают синхронно в одном потоке и получается одно из двух событий выполнится первым.
    – DiD
    Commented 7 янв. 2022 в 3:10
  • @КирЯщенко я не знаю, понятно ли я выразился, площадь колизии для каждого танка будет 1xh для танков, которые двигаются влево или вправо, и wx1 для танков, которые двигаются вверх или вниз. где w - width, h - height.
    – DiD
    Commented 7 янв. 2022 в 3:56
  • @КирЯщенко просто подсчитать количество занятых пикселей в области возможной колизии. Если занят только 1 пиксель, то этому танку можно продолжить движение, если занято больше одного пикселя, то получается что перед танком препятствие.
    – DiD
    Commented 7 янв. 2022 в 4:02

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.