Столкновение объектов js

121
04 января 2022, 19:00

Пишу простенькую игру на 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;
<!DOCTYPE html> 
<html lang="ru"> 
<head> 
    <meta charset="UTF-8"> 
    <title>title</title> 
</head> 
<body> 
<canvas width="500" height="500" id="mycanvas" onclick="clicks()" style="border:1px solid #000" ></canvas> 
<script src ="Game1.js"></script> 
</body> 
</html>

READ ALSO
Подскажите, что не так с кодом
javascript

Подскажите, что не так с кодом

Вот собственно код и вопрос к нему:

 164
Telegram bot Node.js c интерфейсом
javascript

Telegram bot Node.js c интерфейсом

я делаю бота на NODEjs, хочу сделать интерфейс и отправлять сообщения с сайта

 209
jquery как перезаписать данные?
javascript

jquery как перезаписать данные?

есть скрипт который по нажатию на одну из кнопок выводит данные на экран, но данные накладываются друг на друга по нажатию на кнопки, что использовать...

 171
Использование credentials: &quot;include&quot; при getInitialProps в NextJS
javascript

Использование credentials: "include" при getInitialProps в NextJS

Могу ли я использовать credentials: "include" при fetch в getInitialProps?

 213