Collision Detection html5 canvas

Question

I have written code for collision detection in javascript, but it isnt working for some reason. when the balls collide, it should give an alert saying "Collision" but it is eather alerting at a random occurence or not at all.

I am attaching a link to the fiddle below: https://jsfiddle.net/vedant12355/b7pvLkwy/1/

also attaching all the code here:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <canvas></canvas><p></p><text></text>
    <style>body{
        margin:0;
        overflow: hidden;
    }
    p{
        position: absolute;
        top:0;
        z-index: 1;
    }

    text{
        position:absolute;
        top:100;
        z-index: 1;
        left:0;
        color:black;
    }
    </style>
<script>
var ct = document.querySelector('canvas');
ct.width = window.innerWidth;
ct.height = window.innerHeight;

var c = ct.getContext('2d');
var x = 500;
var r = 100;
var d = 10;
var dy = 10;
var y = 100;
var x1 = 100;
var y1 = 500;
var r1 = 100;
var d1 = 10;
var dy1 = 10;

function a(){
    requestAnimationFrame(a);
    c.clearRect(0, 0, innerWidth, innerHeight);

    c.beginPath();
    c.arc(x, y, r, 0, Math.PI * 2, false);
    c.strokeStyle = 'black';
    c.stroke();
    c.fillStyle = 'black';
    c.fill();
    c.closePath();
    
    c.beginPath();
    c.arc(x1, y1, r1, 0, Math.PI * 2, false);
    c.strokeStyle = 'black';
    c.stroke();
    c.fillStyle = 'red';
    c.fill();
    c.closePath();

    if(x + r > innerWidth || x-r<0){
        d = -d;
        
    }

    if(x1 + r1 > innerWidth || x1-r1<0){
        d1 = -d1;
    }

    if(y+r>innerHeight || y-r<0){
        dy = -dy;
}

if(y1+r1>innerHeight || y1-r1<0){
    dy1 = -dy1;
}

x += d;
y += dy;
x1 += d1;
y1 += dy1;


function a1(){
    var b;
var v;
if(x<x1){
    b = x1 - x;
}

else if(x>x1){
    b = x - x1;
}

else{
    b = 0;
}

if(y<y1){
    v = y1 - y;
}

else if(y>y1){
    v = y - y1;
}

else{
    v = 0;
}

var db = Math.sqrt(Math.pow(v, 2) + Math.pow(b, 2));

var p = document.querySelector('p').textContent = db;
var t = document.querySelector('text').textContent = r+r1;

if (p===t){
    alert("Collision!")
}

}

a1();
}

 a();


</script>
</body>
</html>

Answer 1

The function a1 does a lot of strange stuff and i am not going to try and work out what you are doing.

The last test

if (p===t){
    alert("Collision!")
}

Will only every happen with a lot of luck. If p = 200.000001 and t = 200 they are 1 millionth of a pixel apart yet it will not show the alert.

Two circle are overlapping when the distance between them is less than the sum of their radius. Can be done in one line if (Math.hypot(x1-x, y1-y) < r + r1) { alert("Collision!") }

Or change the function a1 to

function a1() {
    if (Math.hypot(x1 - x, y1 - y) < r + r1) { alert("Collision!") }
}

Collision Detection html5 canvas

Question

1 answers

solution1
0 2021-01-06 15:54:54

Collision Detection html5 canvas

Question

1 answers

solution1 0 2021-01-06 15:54:54

solution1
0 2021-01-06 15:54:54