How do i detect collision betwen two animated balls?

Question

I'm trying to make a simple shooter, but I have some problems with detecting collisions between the shots and the enemy (blue balls). I have tried several things, but I can't figure it out

Can someone pliz please help me?

var canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    var tileldig = Math.floor((Math.random() * 300) + 1);
    var tekst = document.getElementById("tekst")

    var kuler = [
        {r: 10, x: canvas.width/2, y: canvas.height-100, f: "red", dy:0},
        //{r: 50, x: tileldig, y: 50, vx:0 , vy: 3, f: "green"},
    ]



    var fiender = [
        {r: 20, x: tileldig, y: -20, vx:0 , vy: 1, },
    ]
    /*var skudder = [
        {r: 10, x:0+kuler.x, y: 0+kuler.y, f: "black"},
    ]*/




    function spill() {

        ctx.clearRect(0, 0, canvas.width, canvas.height);

        for (var i = 0; i < kuler.length; i++) { 
            kuler[i].x += 0;
            kuler[i].y += kuler[i].dy;


            ctx.fillStyle = kuler[i].f;
            ctx.beginPath();
            ctx.arc(kuler[i].x, kuler[i].y, kuler[i].r, 2*Math.PI, 0);
            ctx.closePath();
            ctx.fill();




            if (kuler[0].x >= canvas.width-kuler[0].r) {
                kuler[0].x = canvas.width-kuler[0].r
            };
            if (kuler[0].x <= 0+kuler[0].r) {
                kuler[0].x = 0+kuler[0].r
            };
            if (kuler[0].y >= canvas.height-kuler[0].r) {
                kuler[0].y = canvas.height-kuler[0].r
            };
            if (kuler[0].y <= 0+kuler[0].r) {
                kuler[0].y = 0+kuler[0].r
            };



        for (var j = 0; j < fiender.length; j++) { 
            ctx.fillStyle = "blue";
            ctx.beginPath();
            ctx.arc(fiender[j].x, fiender[j].y, fiender[j].r, 2*Math.PI, 0);
            ctx.closePath();
            ctx.fill();

            fiender[j].y += fiender[j].vy;

            if (fiender[j].y >= canvas.height) {
                fiender.splice(j,1);
                console.log("ute");
            };  


            if (fiender[j].y + fiender[j].r >= kuler[i].y && fiender[j].x + fiender[j].r == kuler[i].x) { // remove kuler[i] and fiender[j] } 
                fiender.splice(j, 1);
                kuler.splice(i,1);
            };

            if(j > 1){ 
                fiender.splice(j,1)

            }


        }
    }




        document.onkeydown = function tast (e) {            
          switch (e.keyCode) {
            case 37:
              kuler[0].x -= 10;
              break;
            case 39:
              kuler[0].x += 10;
              break;
            case 38:
              kuler[0].y -= 10;
              break;
            case 40:
              kuler[0].y += 10;
              break;
             case 32:
              newskudd()
              console.log("hit space")
              break;
          }
        };




        requestAnimationFrame(spill);
    }

    function newskudd () {
        var nyttskudd = 
        {x:kuler[0].x, y:kuler[0].y, r:5, dy:-5, f:"black"};
        kuler.push(nyttskudd);
    };

    setInterval(
        function(){
            fiender.push({r: 20, x: Math.floor((Math.random() * 300) + 1), y: -20, vx:0 , vy: 1, f: "green"});
    }, 1000);



    spill();

    /*for (var i = 0; i < kuler.length; i++) { 
        for (var j = 0; j < fiender.length; j++) { 
            if (kuler[i].y >= fiender[j].y) { // remove kuler[i] and fiender[j] } 
        }; 
    }*/
    /*if (circles.x >= canvas.height- circles.r){
        circles.splice(i,1);
    }*/

If you want to see a demo, click the link: DEMO

Answer 1

Your conditional should look like:

var distanceFromCenters = Math.sqrt(Math.pow(Math.abs(fiender[j].x - kuler[i].x),2) + Math.pow(Math.abs(fiender[j].y - kuler[i].y),2 );
if (distanceFromCenters <= (fiender[j].r + kuler[i].r)) {
    // you have a collision