为什么子弹走错了方向?

Why is the bullet going the wrong way?

我正在尝试制作一款射击游戏,但子弹走错了方向。

我试着把公式弄乱了一点,但我不知道如何解决这个问题。

setInterval(function(){
    $(".bullet").each(function(i,bullet) {
        var x = parseFloat($(bullet).css("left")) + parseFloat($(bullet).attr("y"));
        var y = parseFloat($(bullet).css("top")) + parseFloat($(bullet).attr("x"));

        $(bullet).css({"top":y+"px","left":x+"px"});
    });
},20);
$(window).click(function(e) {
    var dx = (e.pageX - (x+37.5));
    var dy = (e.pageY - (y+37.5));
    var mag = Math.sqrt(dx * dx + dy * dy);
    var velX = (dx / mag) * 15;
    var velY = (dy / mag) * 15;

    $("#game").append("<div class=\"bullet\" x=\""+velX+"\" y=\""+velY+"\" age=\"0\" style=\"top:"+(parseFloat($("#user").css("top"))+37.5)+"px;left:"+(parseFloat($("#user").css("left"))+37.5)+"px;\"></div>");
});

Here's a GIF of what's happening

您将 X 添加到 Y 并将 Y 添加到 X 是一个观察值:

var x = parseFloat($(bullet).css("left")) + parseFloat($(bullet).attr("x"));
var y = parseFloat($(bullet).css("top")) + parseFloat($(bullet).attr("y"));

而不是

var x = parseFloat($(bullet).css("left")) + parseFloat($(bullet).attr("y"));
var y = parseFloat($(bullet).css("top")) + parseFloat($(bullet).attr("x"));