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

我很快就要用Canvas完成这个程序了。这个程序只是一个从上到下的球，有一个篮子接住了它，就是这样。然而，我有以下问题。

1） 当我按下键盘上的左箭头或右箭头超过几次时，篮子会一直向左或向右移动，然后消失。

2） 当球击中篮筐时，什么都不会发生（我的碰撞检测功能无法正常工作）。然而，我应该说，当球落地时，我的碰撞检测工作得很好（警报信息显示为"球落地"）。

有没有办法在每次篮筐接球时在画布顶部显示一条信息，比如"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;
    }
 }
 )
 }