Столкновение объектов js. где ошибка?

Question

[nonniks]

Пишу простенькую игру на js. Осталась финальная точка, написать if где будет сказано, что при соприкосновении объектов будет уходить hp, только тут трудность и возникла. Я примерно понимаю, что мне нужно сравнить положение двух объектов, и даже чёт по этому поводу у меня есть, но суть в том, что данный if я скопипастил и ломаю голову, как его изменить, чтоб подошел мне? Как это высчитать тоже пока ума не приложу, условие я прочитать могу, только логики не понимаю, и как сделать чтоб фаербол при появлении, (даже не прикосновении) не снимал сразу же все хп, что и даётся на выхлопе, - тоже. Надеюсь на помощь. Кину сразу весь код, чтоб было понятно.

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;

Comments

[uRoot]

Залейте полный пример на https://jsfiddle.net/

[nonniks]

CryNet, https://jsfiddle.net/4ac5v31u/#&togetherjs=IMB3xjtwLr
https://jsfiddle.net/nonniks/4ac5v31u/2/
не знаю как отсюда выгружать

Answer 1

[xmoonlight]

1. hpdragon - надо снимать не по клику, а по коллизии (касание/соприкосновение объектов) файрболла с драконом.
2. Нужно проверять пересечения всех выпущенных файрболлов с драконом. И, если улетает файрболл от дракона за экран - сразу его уничтожать (файрболл)!

но суть в том, что данный if я скопипастил и ломаю голову, как его изменить, чтоб подошел мне

никогда так не делай - в этом твоя основная проблема: копипаст без понимания логики работы кода!

Comments

[nonniks]

файрболл по идее должен был соприкасаться с героем, и отнимать при прикосновении у него хп, про самоуничтожаться это да, не знаю пока как это сделать, нужно разбираться, а так называемый дедлайн подходит. А дракон, по задумке, просто падает от кликов, как бы улетая.
Примерную логику я понимаю, что мы берем, и что мы считаем, но не понимаю, досконально, в этом вы 100% правы, иначе такой проблемы бы не было(

[xmoonlight]

nonniks, советую логику кода структурно, в виде блок-схемы, составить на бумаге.
А дальше - будешь просто разбираться: какой блок у тебя сделан и отрабатывает, а какой - нужно кодить.