Question

我正在用js写一个简单的游戏。最后还有一点要写，如果说“如果”，当物体接触时，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>

碰撞js对象

0 个答案: