Question

有问题的 if语句是：

if (
  this.y + this.radius == lineInfo.loneSy && 
  this.x + this.radius > lineInfo.loneSx && 
  this.x + this.radius < lineInfo.loneEx
)
{
  this.dy = -this.dy; //linebounce
}

我确信前两个条件正常工作，因为如果我省略第三个条件：this.x + this.radius < lineInfo.loneEx，球会按预期反弹，但是当我添加第三个条件以试图限制其反弹时仅在线的长度内;球根本没有反弹 - 即使它应该。

整个参考代码是：

＆＃13;

let canvas = document.getElementById('myCanvas');
let c = canvas.getContext('2d'); //c = super object (methods / functions) 2d

const sceneObjects = [];
let lineReact = {
  jitter: false,
  hitOne: false,
  hitTwo: false,
  hitThree: false,
  hitFour: false
}
let lineInfo = {
  loneSx: 0,
  loneSy: 0,
  loneEx: 0,
  loneEy: 0
}

window.addEventListener('load',
  function(e){
    lineReact.jitter == true ? (lineReact.jitter = false) : (lineReact.jitter = true);

    if (lineReact.jitter == true){
      setTimeout(function(){
        lineReact.jitter = false;
        console.log("Time lapse " + lineReact.jitter);
      }, 300);
    }
    console.log(lineReact.jitter);
  }
)

function Square(x, y, width, height, color){
  this.x = x;
  this.y = y;
  this.width = width;
  this.height = height;
  this.color = color;

  this.draw = function(){
    c.fillStyle = this.color;
    c.fillRect(this.x, this.y, this.width, this.height);
  }

  this.update = function(){
    this.draw();
  }
}

function Line(startX, startY, endX, endY, color, lNumber){

  this.startX = startX;
  this.startY = startY;
  this.endX = endX;
  this.endY = endY;
  this.color = color;

  this.lockSx = this.startX;
  this.lockSy = this.startY;
  this.lockEx = this.endX;
  this.lockEy = this.endY;

  this.draw = function(){
    c.beginPath();
    c.strokeStyle = this.color;
    c.moveTo(this.startX, this.startY);
    c.lineTo(this.endX, this.endY);
    c.stroke();
  }

  this.update = function(){

    if (lineReact.jitter == false){
      this.color = "white";
      this.startX = this.lockSx;
      this.startY = this.lockSy;
      this.endX = this.lockEx;
      this.endY = this.lockEy;
    } else {

      if(lNumber == 1){
        lineInfo.loneSx = this.lockSx;
        lineInfo.loneSy = this.lockSy;
        lineInfo.loneEx = this.lockEx;
        lineInfo.loneEy = this.lockEy;


        this.startX -= Math.floor(Math.random() * 2);
        this.startY += Math.floor(Math.random() * 2);
        this.endX += Math.floor(Math.random() * 2);
        this.endY += Math.floor(Math.random() * 2);
        this.color = "red";
      }
      if(lNumber == 2){
        this.startX -= Math.floor(Math.random() * 2);
        this.startY -= Math.floor(Math.random() * 2);
        this.endX -= Math.floor(Math.random() * 2);
        this.endY += Math.floor(Math.random() * 2);
        this.color = "red";
      }
      if(lNumber == 3){
        this.startX -= Math.floor(Math.random() * 2);
        this.startY -= Math.floor(Math.random() * 2);
        this.endX += Math.floor(Math.random() * 2);
        this.endY -= Math.floor(Math.random() * 2);
        this.color = "red";
      }
      if(lNumber == 4){
        this.startX += Math.floor(Math.random() * 2);
        this.startY -= Math.floor(Math.random() * 2);
        this.endX += Math.floor(Math.random() * 2);
        this.endY += Math.floor(Math.random() * 2);
        this.color = "red";
      }
    }
    this.draw();
    //console.log('test read ' + lineInfo.loneSx);
  }

}

function Circle(x, y, dx, dy, radius){
  this.x = x;
  this.y = y;
  this.dx = dx;
  this.dy = dy;
  this.radius = radius;

  this.draw = function(){
    c.beginPath();
    c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
    c.strokeStyle = 'black';
    c.fillStyle = 'black';
    c.fill();
    c.stroke();
  }

  this.update = function(){
    if (this.x + this.radius > canvas.width || this.x - this.radius < 0){
      this.dx = -this.dx; // wallbounce
    }
    if (this.y + this.radius > canvas.height || this.y - this.radius < 0){
      this.dy = -this.dy; // wallbounce
    }
    if (
      this.y + this.radius == lineInfo.loneSy &&
      this.x + this.radius > lineInfo.loneSx &&
      this.x + this.radius < lineInfo.loneEx
    )
    {
      this.dy = -this.dy; //linebounce
    }

    this.x += this.dx; //velocity
    this.y += this.dy; //velocity
    this.draw();
  }

}

let square = new Square(280, 280, 40, 40, "pink");
let circle = new Circle(245, 195, 1, 1, 6);
let lineOne = new Line(280, 270, 320, 270, "white", 1);
let lineTwo = new Line(330, 280, 330, 320, "white", 2);
let lineThree = new Line(280, 330, 320, 330, "white", 3);
let lineFour = new Line(270, 280, 270, 320, "white", 4);

function animate() {
  requestAnimationFrame(animate);
  c.clearRect(0, 0, canvas.width, canvas.height);
  square.update();
  lineOne.update();
  lineTwo.update();
  lineThree.update();
  lineFour.update();
  circle.update();
}

animate();

＆＃13;

  body {
      background-color: black;
      margin: 0;
    }
    #myCanvas {
      position: absolute;
      top: 50%;
      left: 50%;
      background-color: #385D72;
      margin: -300px 0 0 -300px;
    }

＆＃13;

<canvas id="myCanvas" width="600" height="600">

＆＃13;

Answer 1

您需要使用||代替&&：

if (
  this.y + this.radius == lineInfo.loneSy && 
  (this.x + this.radius < lineInfo.loneSx || this.x + this.radius > lineInfo.loneEx)
)
{
  this.dy = -this.dy; //linebounce
}

&&如果两个条件都属实，你就会进行测试，但两者都不可能同时成为现实（球不能同时出现在左边）线和右边的线）。

不应该这个＆＃34;如果声明＆＃34;导致反弹？

1 个答案: