js object collision. where is the mistake?

Question

JavaScript

I am writing a simple js game. The final point remains, write if where it will be said that when objects touch, hp will go away, only here the difficulty arose. I roughly understand that I need to compare the position of two objects, and I even have an idea about this, but the bottom line is that I copied and pasted this if and am racking my brains on how to change it so that it suits me? How to calculate this, too, until I put my mind to it, I can read the condition, but I don’t understand the logic, and how to make the fireball, when it appears (not even touched), does not immediately remove all the hp, which is given on the exhaust, too. Hope for help. I will throw the whole code at once, so that it is clear.

var cvs = document.getElementById("mycanvas");
var ctx = cvs.getContext("2d");

var bg = new Image();
var dragon = new Image();
var hero = new Image();
var fireball = new Image();

var yourhp = 100;
var hpdragon = 1000;

var wD = 500;
var hD = 500;

var fball = [];

var xPos = 0;
var yPos = 250;

fball [0] = {
    x : 0,
    y : 0,
}
// var click = 0;
document.addEventListener("click", click);
function click(){
    hpdragon -=25;
    wD-=10;
    hD-=10;
    if (hpdragon == 0){
        wD=0;
        hD=0;
    }
}
document.addEventListener("keydown", function (event) {
    if(event.code == 'KeyD' ){
        xPos += 10;
    }
    if (event.code == 'KeyA'){
        xPos -=10;
    }
});


bg.src = "https://steamcdn-a.akamaihd.net/steam/apps/238750/ss_dcd45195987f2c945e6f5e87cdbb310c2ab1119c.1920x1080.jpg?t=1455812538";
dragon.src = "http://pngimg.com/uploads/dragon/dragon_PNG84479.png";
hero.src = "https://www.pngarts.com/files/3/Medieval-Knight-Transparent-Background-PNG.png";
fireball.src = "https://www.pngkey.com/png/full/792-7929722_fire-royalty-free-ball-clip-art-cool-red.png";
function draw() {
    ctx.drawImage(bg, 0,0, 500, 500);
    ctx.drawImage(dragon, 0, 0, wD, hD);
    if (hpdragon <= 500) {
        for (var i = 0; i < fball.length; i++) {
            ctx.drawImage(fireball, fball[i].x, fball[i].y, 50, 100);

            fball[i].y++;
            if (fball[i].y === 150) {
                fball.push({
                    x: Math.floor(Math.random() * (500)),
                    y: 0
                });
            }

            if(xPos + hero.width >= fball[i].x
            && xPos <= fball[i].x + fireball.width
            && (yPos + hero.height >= fball[i].y
                && yPos <= fball[i].y + fireball.height)) {
                yourhp--;
            }
        }
    }
    ctx.drawImage(hero, xPos, yPos, 100, 250);

    ctx.fillStyle = "#FFF";
    ctx.font  = "24px Verdana";
    ctx.fillText("HP:" + hpdragon, 10,20);

    ctx.fillStyle = "#FFF";
    ctx.font  = "24px Verdana";
    ctx.fillText("YHP:" + yourhp, 10,50);


    if(hpdragon < 0){
        alert("Спасибо бро, он улетел, теперь у меня есть бабки на пересдачи.");
        alert("Ты, так то, победил, чо еще надо? просто закрой и все.");
        alert("Ладно, ладно, я сделаю все сам....");
        alert("ДА,БАГ! И ЧТО??? ЭТО АЛЬФА!")
        location.reload();

    }
    if(yourhp == 0){
        alert("НЕТ, БЕЗ ПОБЕДЫ ТЫ НЕ УЙДЕШЬ!");
    location.reload();
    }
    requestAnimationFrame(draw);
}
hero.onload = draw;

Answer 1

1. hpdragon - you need to shoot not on click, but on collision (touching / contact of objects) of the fireball with the dragon.
2. It is necessary to check the intersections of all fireballs fired with the dragon. And, if a fireball flies away from the dragon beyond the screen - immediately destroy it (fireball)!

but the bottom line is that I copied and pasted this if and puzzled over how to change it so that it suits me

never do that - this is your main problem: copy-paste without understanding the logic of the code!