Добавить столкновение в HTML5 Canvas

Question

Привет У меня есть следующее приложение HTML5 Canvas: http://dev.driz.co.uk/app/

Когда вы перемещаете мышь вокруг нее, шары перемещаются, однако проблема в том, что шары не реагируют друг на друга.Вместо этого они просто проходят друг за другом или за ними.

Требуется информация об обнаружении столкновений для HTML5 Canvas.

Спасибо.

Answer 1

Привет всем. Не уверен, что вы уже нашли это, но я нахожусь в процессе создания игры в снукер на холсте. Мое обнаружение столкновения / обработка шаров заключается в следующем. В данный момент используется триг, но вместо этого его можно оптимизировать, используя векторную математику. Во всяком случае, вы можете увидеть прогресс с ним в действии -> здесь

Этот цикл выполняется в моей функции анимации:

// checks if the any of the balls have collided with each other
for(i=0;i<ballArray.length;i++)
{
    for(j=i;j<ballArray.length;j++)
    {
        if(j != i)
        {

            if( Math.pow((ballArray[j].x - ballArray[i].x),2) + Math.pow((ballArray[j].y - ballArray[i].y),2) <= (ballArray[i].radius + ballArray[j].radius) * (ballArray[i].radius + ballArray[j].radius))
            {
                dx = ballArray[i].x - ballArray[j].x;
                dy = ballArray[i].y - ballArray[j].y;
                // collision angle is often refered to as the greek character 'phi'
                phi = Math.atan2(dy, dx);

                magnitude_1 = Math.sqrt(ballArray[i].vx * ballArray[i].vx + ballArray[i].vy * ballArray[i].vy);
                magnitude_2 = Math.sqrt(ballArray[j].vx * ballArray[j].vx + ballArray[j].vy * ballArray[j].vy);

                direction_1 = Math.atan2(ballArray[i].vy, ballArray[i].vx);
                direction_2 = Math.atan2(ballArray[j].vy, ballArray[j].vx);

                new_xspeed_1 = magnitude_1 * Math.cos(direction_1 - phi);
                new_yspeed_1 = magnitude_1 * Math.sin(direction_1 - phi);

                new_xspeed_2 = magnitude_2 * Math.cos(direction_2 - phi);
                new_yspeed_2 = magnitude_2 * Math.sin(direction_2 - phi);

                final_xspeed_1 = ((ballArray[i].mass - ballArray[j].mass) * new_xspeed_1 + (ballArray[j].mass + ballArray[j].mass) * new_xspeed_2) / (ballArray[i].mass + ballArray[j].mass);
                final_xspeed_2 = ((ballArray[i].mass + ballArray[i].mass) * new_xspeed_1 + (ballArray[j].mass - ballArray[i].mass) * new_xspeed_2) / (ballArray[i].mass + ballArray[j].mass);

                final_yspeed_1 = new_yspeed_1;
                final_yspeed_2 = new_yspeed_2;

                ballArray[i].vx = Math.cos(phi) * final_xspeed_1 + Math.cos(phi + Math.PI / 2) * final_yspeed_1;
                ballArray[i].vy = Math.sin(phi) * final_xspeed_1 + Math.sin(phi + Math.PI / 2) * final_yspeed_1;
                ballArray[j].vx = Math.cos(phi) * final_xspeed_2 + Math.cos(phi + Math.PI / 2) * final_yspeed_2;
                ballArray[j].vy = Math.sin(phi) * final_xspeed_2 + Math.sin(phi + Math.PI / 2) * final_yspeed_2;
            }
        }
    }
}