Обнаружение, когда касание краев двух спрайтов не работает для двух движущихся спрайтов, как мне заставить их точно определять столкновения? - PullRequest
0 голосов
/ 31 января 2019

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

 Index.html
// Function to handle the keyboard controls
          function KeyboardEventHandler(event) {
            // Up arrow is triggered
            if (event.keyCode == 38) {
              tardis.Y -= 5;
              //tardisacceleration.VerticalThrust(0.1);
              console.log("Go Up");
            }
            // Right arrow is triggered
            if (event.keyCode == 39) {
              tardis.X += 5;
              console.log("Go Right");
              //tardisacceleration.HorizontalThrust(-0.1);
            }
            // Left arrow is triggered
            if (event.keyCode == 37) {
              tardis.X -= 5;
              console.log("Go Left");
              //tardisacceleration.HorizontalThrust(0.1);
            }
            // Down arrow is triggered
            if (event.keyCode == 40) {
              tardis.Y += 5;
              console.log("Go Down");
              //tardisacceleration.VerticalThrust(-0.1);
            }
        }
            // Listener for the keydown event
        window.addEventListener('keydown', KeyboardEventHandler, false);

 (function drawFrame() {

            // Clear the canvas for every new frame
            context.clearRect(0, 0, canvas.width, canvas.height);

            // Draw the sprite
            tardis.draw(context);

            // Apply the acceleration to the tardis
            tardis.acceleration(tardisacceleration);

            // Call on tardis move function
            tardis.move();

            // Call DrawMeteor Function
            if (tardis.Y != 0 && tardis.X != 0) {
            // Call the function that draws the meteor
            DrawMeteor();
          }

    // If the y coordinates of the meteor is greater than 300 or less than 0
   if (meteor1.Y + meteor1.SIZE/2 > 300 || meteor1.Y - meteor1.SIZE/2 < 0) {
            // Increment the bounceY variable by one
            bounceY++;
          }
  // If the x cooirdinates of the meteor are greater than 300 or less than 0
          if (meteor1.X + meteor1.SIZE > 300 || meteor1.X < 0) {
            // Increment the bounceX variable by one
            bounceX++;
          }
          // If the bounceX value is even
          if (IsEven(bounceX) == false) {
            // Reverse the vector value
            vector.VX = -vector.VX;
          }
          // If the bounceY value is even
          if (IsEven(bounceY) == false) {
            // reverse the vector value
            vector.VY = -vector.VY;
          }
            // Draw the platform
            platform.draw(context);

         // if statement to check when tardis and platform come into contact
            if (collision.overlap(tardis, platform)) {
              NextLevel();
            }
            // If statement to trigger boom when tardis
            // and meteor collide
            if (collision.overlap(tardis, meteor1)) {
              // Write boom in console
              console.log("Boom");
             //Produce boom image to show user the sprite has been destroyed
              tardis.BOOM = true;
              // Halt the Tardis
              tardis.halt();
              // Halt meteor 1
              meteor1.halt();
              // Change the text
             plevel.innerHTML = "COLLISION! failed at level" + "  " + level;
              // Show restart button
              restart.style.display = "block";
            }
            // Get the next animation frame
            window.requestAnimationFrame(drawFrame);
        })();

         Collision class

           function Collision() {

    Collision.prototype.overlap = function(ItemA, ItemB) {
     // Private variables to store the types of overlap
  var overlapLeft,
      overlapRight,
      overlapTop,
      overlapBottom;
  // Left overlap
  overlapLeft = (ItemA.Left >= ItemB.Left) & (ItemA.Left <= ItemB.Right);
  // Right overlap
  overlapRight = (ItemA.Right >= ItemB.Left) & (ItemA.Right <= ItemB.Right);
  // Top overlap
  overlapTop = (ItemA.Top >= ItemB.Top) & (ItemA.Top <= ItemB.Bottom);
  // Bottom overlap
  overlapBottom = (ItemA.Bottom >= ItemB.Top) & (ItemA.Top <= ItemB.Top);
  // If left or Right and Top or Bottom are overlapping
  if ((overlapLeft || overlapRight) && (overlapTop || overlapBottom)) {
    // Return true as there is a overlapping
    return true;
  } else {
    // Otherwise return false;
    return false;
      }
    }
  }

  Meteor class 
    Object.defineProperty(this, 'Left',
   {
     // Getter
     get: function() {
      //return the valiue of x minus the width
      return x;
    }
  }
)
  Object.defineProperty(this, "Right",
    {
      // Getter
      get: function() {
        // Return the value of x plus the width
        return x + size;
      }
    }
 )
  Object.defineProperty(this, "Top",
  {
     // Getter
     get: function() {
       // Return the value of y minus the height
       return y - size/2;
     }
  }
 )
   Object.defineProperty(this, "Bottom",
  {
    // Getter
    get: function() {
      // Return the value of y plus the height
      return y + size/2;
    }
  }
...