如何让碰撞函数在 Javascript 中正常工作？

Question

我非常接近使用 Canvas 完成这个程序。这个程序就是一个简单的球，从上到下掉下来，有一个篮子接住它，就是这样。但是，我有以下问题。

1) 当我按键盘上的左箭头或右箭头超过几次时，不知何故，篮子会一直向左或向右移动并消失。

2) 当球击中篮筐时没有任何反应（我的碰撞检测功能无法正常工作）。但是，我应该说，当球撞击地面时，我的碰撞检测工作正常（警告消息显示 "Ball hit the ground"）。

有没有办法在每次篮筐接球时在 canvas 顶部显示一条消息，例如“1 分”（如果有 5 个球，那么我应该收到一条消息说“ 5 分")

有人可以告诉我我做错了什么吗？非常感谢您！！

这里有实时代码
http://codepen.io/HenryGranados/pen/QNOZRa

这是我的代码：

 //create the constructor for the class pad
 function Pad() {
//initialisation code will go here

//create private variables for the x and y coordinates
var x = 200,
    y = 200,
    vx = 0,
    vy = 0,
   padX = (canvas.width - 20) / 2;
   rightPressed = false,
   leftPressed = false;

//create the draw function to give us the draw method
//it accepts one parameter which is the context from the canvas it is drawn on
Pad.prototype.draw = function (context) {
    //save the state of the drawing context before we change it
    context.save();
    //set the coordinates of the drawing area of the new shape to x and y
    context.translate(x, y);
    //start the line (path)
    context.beginPath();
    context.fillStyle = "#800000"; // This is the basket
    context.moveTo(15, 20);
    context.bezierCurveTo(20, 100, 150, 100, 150, 20);
    //close the path
    context.closePath();
    context.fill();
    //go ahead and draw the line
    context.stroke();
    //restore the state of the context to what it was before our drawing
    context.restore();
}

//create a public property called X (note caps!)
Object.defineProperty(this, 'X',
{
    //getter
    get: function () {
        //return the value of x (lower case)
        return x;
    },
    //setter
    set: function (value) {
        //ste the value of x (lower case)
        x = value;
    }
}
)

//create a public property called Y (note caps!)
Object.defineProperty(this, 'Y',
{
    //getter
    get: function () {
        //return the value of y (lower case)
        return y;
    },
    //setter
    set: function (value) {
        //ste the value of y (lower case)
        y = value;
    }
}
)


padX = function () {

    if (rightPressed && padX < canvas.width - 20) {
        padX += 5;
    }
    else if (leftPressed && padX > 0) {
        padX -= 5;
    }

 }

 Pad.prototype.move = function () {
    //change the x axis by the x velocity
    x += vx;
    //change the y axis by the y velocity
    y += vy;
 }

 Pad.prototype.setVector = function (vector) {
    //set the vx value based on this vector
    vx = vector.VX;
    //set the vy value based on this vector
    vy = vector.VY;
}

//public method to set the vector of the saucer
Pad.prototype.accelerate = function (Acceleration) {
    //set vx
    vx += Acceleration.AX;
    ////set vy
    //vy += Acceleration.AY;
 }


 //create a public property called Top
 Object.defineProperty(this, 'Top',
 {
    //getter
    get: function () {
        //return the y posn less the height
        return y - 10;
    }
 }
 )

  //create a public property called Bottom
  Object.defineProperty(this, 'Bottom',
  {
    //getter
    get: function () {
        //return the y posn plus the height
        return y + 10;
    }
  }
 )

  //create a public property called Left
  Object.defineProperty(this, 'Left',
  {
    //getter
    get: function () {
        //return the x posn less the width
        return x - 80;
    }
   }
  )

  //create a public property called Right
  Object.defineProperty(this, 'Right',
{
    //getter
    get: function () {
        //return the x posn plus the width
        return x + 80;
    }
 }
 )

 }

Answer 1

(1) 至少有两种方案可以解决这个问题在你的 Pad.move 函数中你可以限制 x 的变化。仅当其在 canvas 宽度内时才更改它：

  Pad.prototype.move = function() {
    //change the x axis by the x velocity
    var canvasWidth = 400,
      padWidth = 150;
    if (x + vx < canvasWidth - padWidth && x + vx >= 0)
      x += vx;
    //change the y axis by the y velocity
    y += vy;
  }

或者与创建地面类似，您可以在两侧创建墙壁并与它们碰撞 pad。

(2) 球与pad之间没有碰撞处理：将它放在函数 drawFrame():

中

 if (collision.Overlapping(ball, pad)) {
     context.strokeText('ball hit pad!',20,100)
     //..do some other stuff here
      }

(3)这让我们在 canvas 上显示消息，您可以 draw text on canvas

var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);

演示：http://codepen.io/anon/pen/RaxwLp?editors=1011 Pad 被阻塞是因为按下键时加速度总是增加，所以为了首先向相反方向移动，它必须转到 0，这需要相当长的时间。我添加了 keyup 事件，当释放键时加速度归零：

if(leftPressed){
 acceleraton.HThrust(.01);
}else if(rightPressed){
  acceleraton.HThrust(-.01);
}else{
 acceleraton.Halt();
}

如何让碰撞函数在 Javascript 中正常工作？

How to get a collision function to work properly in Javascript?

html

javascript

canvas

collision-detection

collision