Clash of js objects. where is the error?

Write a simple game in js. Remained the final point, write if where is States that the contact object will be to leave hp, but here the difficulty arose. I roughly understand that I need to compare the position of two objects, and even the odd on this occasion I have, but the point is that this if I skopipastil scratching their heads how to change it to come to me? How to calculate too long I'll never know, condition I can read only logic I don't understand how to do that fireball in the appearance, (not even touching) did not take off immediately all HP that is given on the exhaust, too. I hope to help. Throw all the code at once, so it was understandable.
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;
 if (hpdragon == 0){
document.addEventListener("keydown", function (event) {
 if(event.code == 'KeyD' ){
 xPos += 10;
 if (event.code == 'KeyA'){
 xPos -=10;

bg.src = "";
dragon.src = "";
hero.src = "";
fireball.src = "";
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);

 if (fball[i].y === 150) {
 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)) {
 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("Thanks bro, he flew away, now I have the money to retake.");
 alert("You, so that won Cho want? just close and all.");
 alert("okay, Okay, I'll do it myself....");
 alert("YES,a BUG! WHAT??? THIS IS AN ALPHA!")

 if(yourhp == 0){
 alert("there's NO VICTORY YOU can'T LEAVE!");
hero.onload = draw;
April 3rd 20 at 18:33
1 answer
April 3rd 20 at 18:35
1. hpdragon - it is necessary to remove not click and collisions (touch/contact objects) of fireball with a dragon.
2. You need to check the intersection of all released farbelow with the dragon. And if flying fireball from the dragon behind the screen - just to destroy it (fireball)!

but the point is that if I skopipastil scratching their heads how to change it to suit me
don't ever do that - that's your main problem: copy / paste without understanding logic of code!
fireball should have been in contact with the hero and take away when you touch his HP, about to self-destruct, Yes, I don't know how to do it, you need to understand, and the so-called deadline is suitable. And the dragon on the idea, just falls from clicks, as if flying away.
Exemplary logic I understand, what we take, what we believe, but do not understand thoroughly, in this you are 100% right, otherwise this problem would not exist( - josiah5 commented on April 3rd 20 at 18:38
@josiah5, suggest the logic of your code structurally, in the form of a flowchart, draw up on paper.
And then you just figure out which block you have made and work out, and some need to code. - Tessie_Bru commented on April 3rd 20 at 18:41

Find more questions by tags JavaScriptCanvas