Ponawiam to pytanie, ponieważ nie wyraziłem się jasno w tym, co chciałem w moim ostatnim pytaniu.

Czy ktoś wie, jak wykonać kolizję elastyczną lub obsłużyć kolizję na płótnie za pomocą prostokątów? Czy może wskazać mi właściwy kierunek?

Stworzyłem płótno, które ma wiele kwadratów i chciałoby, aby każdy kwadrat uginał się po dotknięciu.

Oto szybkie skrzypce, które pokazałem na czarnym płótnie buforowymhttp://jsfiddle.net/claireC/Y7MFq/10/

linia 39 to miejsce, w którym rozpocząłem wykrywanie kolizji, a linia 59 to miejsce, w którym próbowałem ją wykonać. Będę miał więcej niż 3 kwadraty poruszające się i chcę, żeby się odwróciły, jeśli / gdy się dotkną

var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d");
context.fillStyle = "#FFA500";
    context.fillRect(0, 0, canvas.width, canvas.height);

var renderToCanvas = function (width, height, renderFunction) {
    var buffer = document.createElement('canvas');
    buffer.width = width;
    buffer.height = height;
    renderFunction(buffer.getContext('2d'));
    return buffer;
};

var drawing = renderToCanvas(100, 100, function (ctx) {
ctx.fillStyle = "#000";
    ctx.fillRect(0, 0, canvas.width, canvas.height);


});

var drawing2 = renderToCanvas(100, 100, function (ctx) {
ctx.fillStyle = "blue";
    ctx.fillRect(0, 0, canvas.width, canvas.height);


});

var x = 0, 
 y = 0,
x2 = 200,
y2 = 10,
vx = .80,
vy = .80,
vx2 = .80,
vy2 = .80;



    function collides(rectA, rectB) {
      return !(rectA.x + rectA.width < rectB.x2 ||
       rectB.x2 + rectB.width < rectA.x ||
       rectA.y + rectA.height < rectB.y2 ||
       rectB.y2 + rectB.height < rectA.y);
      }; 

    function executeFrame() {
        x+=vx;
        y+=vy;
        x2+=vx2;
        y2+=vy2;

        if( x < 0 || x > 579) vx = -vx; 
        if( y < 0 || y > 265) vy = -vy;

        if( x2 < 0 || x2 > 579) vx2 = - vx2; 
        if( y2 < 0 || y2 > 233) vy2 = - vy2;

        if(collides(drawing, drawing2)){
            //move in different direction
        };

        context.fillStyle = "#FFA500"; 
        context.fillRect(0, 0, canvas.width, canvas.height);
        context.drawImage(drawing, x, y);
        context.drawImage(drawing2, x2, y2);


        requestAnimationFrame(executeFrame);
    }

    //start animation
    executeFrame();