Обнаружение попаданий с помощью Javascript

#javascript #html #debugging #canvas

Вопрос:

Я новичок, который начал писать некоторый код несколько месяцев назад.

До сих пор я уже создавал калькулятор с использованием Javascript,HTML и CSS. Теперь я пытаюсь создать платформерную игру с использованием Javascript и HTML.

Итак,я уже настроил плеер,препятствия,холст,рамки и функцию завершения игры.Но я не могу понять, как работает обнаружение попадания.

Итак,я пытаюсь сделать это:

 this.crashWith = function(otherobj) {

    //Declaring all the player and the obstacles position!
    
    //Player!
    var myLeft = this.x;
    var myRight = this.x   (this.width);
    var myTop = this.y;
    var myBottom = this.y   (this.height);

    //Obstacles!
    var otherLeft = otherobj.x;
    var otherRight = otherobj.x   (otherobj.width);
    var otherTop = otherobj.y;
    var otherBottom = otherobj.y   (otherobj.height);

    //Crash variables!
    var crash = true;

    if(
       //Checking the player location!
       (myBottom < otherTop) || 
       (myTop > otherBottom) || 
       (myRight < otherLeft) || (jump=true) ||
       (myLeft > otherRight) || (jump=true)
      )
     {
       /*
        If the player cordinates 
        is not touching the obstacles cordinate,
        crash is not happening/false.
       */

       crash = false;
     }

     if(
        (myTop == otherBottom) ||
        (myBottom == otherTop) || (jump=false)||
        (myLeft == otherRight) || (jump=false) ||
        (myRight == otherLeft) || (jump=false)
       )
     {
        crash = false;
     }

     return crash;
}
 

Прежде чем я напишу второе утверждение if,игрок всегда замирает в воздухе после того, как уклоняется от препятствий.Я знаю,почему произошло замораживание, потому что заявление:

(myRight < otherLeft)

Итак,для этого я настроил переменные перехода.

 var jump;

if (myGameArea.keys amp;amp; myGameArea.keys[32]) {myGamePiece.speedY = -2;} {jump=true} //jumping
if (myGameArea.keys amp;amp; myGameArea.keys[83]) {myGamePiece.speedY = 1; }
//going down

//Left and right!
if (myGameArea.keys amp;amp; myGameArea.keys[65]) {myGamePiece.speedX = -2; } // moving left
if (myGameArea.keys amp;amp; myGameArea.keys[68]) {myGamePiece.speedX = 1; } //moving right
 

А затем я пишу второе утверждение «если»:

 if(
    (myTop == otherBottom) ||
    (myBottom == otherTop) || (jump=false)||
    (myLeft == otherRight) || (jump=false) ||
    (myRight == otherLeft) || (jump=false)
  )
  {
    crash = false;
  }
 

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

Полный код:https://codepen.io/ratpipe/ручка/PoprLzV

Комментарии:

1.В коде, который следует сразу //Checking the player location! за этим, по-видимому, возникла проблема. Было ли это вашим намерением назначить true jump или вы намеревались проверить, является ли прыжок истинным ? Та же картина наблюдается и в остальном.

Ответ №1:

jump переменная не нужна. Вы можете просто проверить, столкнулись ли прямоугольники, проверив, нет ли между ними зазора. Нашел следующую логику в веб-документах Mozilla (обнаружение 2D — столкновений).

 if(
  myLeft < otherRight amp;amp;
  myRight > otherLeft amp;amp;
  myTop < otherBottom amp;amp;
  myBottom > otherTop )
{
  crash = true;
}

 

Вам нужно добавить свой первоначальный myObstacle вход myObstacles myObstacles.push(myObstacle); до начала игры, чтобы проверить свою игровую логику здесь:

 for (i = 0; i < myObstacles.length; i  = 1) {
  if (myGamePiece.crashWith(myObstacles[i])) {
    myGameArea.stop();
    return;
  }
}