外接图形法-矩形&圆形36

//外接矩形-事前检测
ballWillHitledge: function(ledge){
    var ballRight = ball.left+ball.width,
        ledgeRight = ledgt.left + ledge.width,
        ballbottom = +ball.height,
        nextBallBottomEstimate = ballbottom + ball.velocity/fps,
    return ballRight>ledgt.left && ball.left<ledgeRight && ballBottom< && nextBallBottomEstimate>
 
}

//外接圆形的判断要比矩形精确一些，其算法也相对简单，外接圆是用两直径相加小于两点间最小距离就判断发生碰撞了
      isBallInBucket: function() {
         var ballCenter = { x: ball.left + BALL_RADIUS,
                            y:   + BALL_RADIUS
                          },

             distance = Math.sqrt(
                           Math.pow(bucketHitCenter.x - ballCenter.x, 2) +
                           Math.pow(bucketHitCenter.y - ballCenter.y, 2));

             return distance < BALL_RADIUS + bucketHitRadius;
       },

//下面是用外接距形做的一个弹跳小球的例子
var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    ball = new Sprite('ball',
                      {
                         paint: function (sprite, context) {
                            context.save();
                            context.strokeStyle = 'blue';
                            context.fillStyle = 'yellow';
                            context.beginPath();
                            context.arc(sprite.left + sprite.width/2,
                                        sprite.top + sprite.height/2,
                                        10, 0, Math.PI*2, false);
                            context.stroke();
                            context.fill();
                            context.restore();
                          }
                       }),
    ballMoving = false,
    lastTime = undefined,
    velocityX = 350,
    velocityY = 190,
    showInstructions = true;

// Functions.....................................................

function windowToCanvas(e) {
   var x = e.x || e.clientX,
       y = e.y || e.clientY,
       bbox = canvas.getBoundingClientRect();

   return { x: x - bbox.left * (canvas.width  / bbox.width),
            y: y -   * (canvas.height / bbox.height)
          };
};

function getBoundingBox(ball) {
   return { left: ball.left,
            top: ,
            width: ball.width,
            height: ball.height
          };
}
                      
function handleEdgeCollisions() {
   var bbox = getBoundingBox(ball),
       right = bbox.left + bbox.width,
       bottom =  + bbox.height;
      
   if (right > canvas.width || bbox.left < 0) {
      velocityX = -velocityX;

      if (right > canvas.width) {
         ball.left -= right-canvas.width;
      }

      if (bbox.left < 0) {
         ball.left -= bbox.left;
      }
   }
   if (bottom > canvas.height ||  < 0) {
      velocityY = -velocityY;

      if (bottom > canvas.height) {
          -= bottom-canvas.height;
      }
      if ( < 0) {
          -= ;
      }
   }
};

function detectCollisions() {
   if (ballMoving) {
      handleEdgeCollisions();
   }
};

function isPointInBall(x, y) {
   return x > ball.left && x < ball.left + ball.width &&
          y >   && y <   + ball.height;
}


// Event Handlers................................................

canvas.onmousedown = function (e) {
   var location = windowToCanvas(e);

   ballMoving = !ballMoving;

   if (showInstructions)
      showInstructions = false;
};

// Animation.....................................................

function animate(time) {
   var elapsedTime;

   if (lastTime === 0) {
         lastTime = time;
   }
   else {
     context.clearRect(0,0,canvas.width,canvas.height);
   
     if (ballMoving) {
        elapsedTime = parseFloat(time - lastTime) / 1000;

        ball.left += velocityX * elapsedTime;
         += velocityY * elapsedTime;

        detectCollisions();
     }
      
     lastTime = time;

     ball.paint(context);

     if (showInstructions) {
        context.fillStyle = 'rgba(100, 140, 230, 0.7)';
        context.font = '24px Arial';
        context.fillText('Click anywhere to start or stop the ball', 20, 40);
     }
   }
   window.requestNextAnimationFrame(animate);
};


// Initialization................................................

ball.fillStyle = 'rgba(255,255,0,1.0)';
ball.left = 100;
 = 100;

context.shadowColor = 'rgba(100,140,255,0.5)';
context.shadowBlur = 4;
context.shadowOffsetX = 2;
context.shadowOffsetY = 2;
context.font = '38px Arial';

window.requestNextAnimationFrame(animate);