Question

所以我正在尝试实现射击，而我想要做的是将玩家x和y用作射弹所衍生的基点，然后它基本上会进入画布中按下的点。射弹是从玩家那里获得的，但不是一直到光标点，而是奇怪地总是向右移动，而是向右+向上或向右+向下取决于按下的方向;我看上线了，似乎无法找到答案。

我的javascript里面是拍摄功能：

function shoot(event){
    bullets[bulletCount] = new Array(4);
    bullets[bulletCount][0] = x;
    bullets[bulletCount][1] = y;
    bullets[bulletCount][2] = window.event.clientX;
    bullets[bulletCount][3] = window.event.clientY;
    bulletCount++;
}

在我的javascript中，这是更新方法中的项目符号部分：

for(var b = 0; b < bullets.length; b++){
        if(bullets[b][0] < bullets[b][2]) bullets[b][0] += 5;
        if(bullets[b][0] > bullets[b][2]) bullets[b][0] -= 5;
        if(bullets[b][1] < bullets[b][3]) bullets[b][1] += 5;
        if(bullets[b][1] > bullets[b][3]) bullets[b][1] -= 5;
        ctx.fillRect(bullets[b][0],bullets[b][1], 8, 8);
    }

并在我的index.html页面中：

<canvas id="gameBoard" onClick="shoot(event)" width="500" height="500" tabindex="1"></canvas>

编辑：解决了问题，对于在拍摄功能中遇到此问题的任何人，从原来的那个变为现在：

function shoot(event){
    var rect = canvas.getBoundingClientRect();
    bullets[bulletCount] = new Array(4);
    bullets[bulletCount][0] = x;
    bullets[bulletCount][1] = y;
    bullets[bulletCount][2] = event.clientX - rect.left;
    bullets[bulletCount][3] = event.clientY - rect.top;
    bulletCount++;
}

Answer 1

问题在于以下两点：

bullets[bulletCount][2] = window.event.clientX;
bullets[bulletCount][3] = window.event.clientY;

这是因为您为点击保存的位置不是真实位置。

您看，event.clientX/Y为您提供了相对于窗口左上角的鼠标坐标，但您只需要相对于左上角的坐标画布元素。

要解决此问题，首先要了解另一种获取鼠标坐标的方法，即event.pageX/Y。

此不会为您提供相对于画布的坐标，但是您需要此而不是event.clientX/Y，因为它会为您提供相对于左上角的鼠标坐标页面，而不是窗口，这意味着无论用户在某处滚动都无关紧要，坐标始终对页面都是真的。

那么，既然您正在使用event.pageX/Y，那么如何使它相对于画布？好吧，我们可以采用这些坐标，减去画布的左上角坐标：

bullets[bulletCount][2] = window.event.pageX - canvas.offsetLeft;
bullets[bulletCount][3] = window.event.pageY - canvas.offsetTop;

假设您的canvas元素保存在名为 canvas

希望解决它：D

Answer 2

    var bullets = []; 
    var bullet_speed = 10;

在你的init（）函数中调用它：这可能有你的setInterval。

    window.addEventListener('click', shoot, false);

在你的绘图功能中调用它：

for (var i = 0; i < bullets.length; i++){
    bullets[i].x += bullets[i].xChange;
    bullets[i].y += bullets[i].yChange;
    context.fillStyle ='black';
    context.fillRect(bullets[i].x,bullets[i].y,4,4)
  }

function shoot(event){
    x = event.offsetX
    y = event.offsetY
    d = Math.sqrt(Math.pow(Math.abs(player.x-x),2)+Math.pow(Math.abs(player.y-y),2))
    bullet = {
        x : player.x,
        y : player.y,
        xChange : (x-player.x)/(d/bullet_speed),
        yChange : (y-player.y)/(d/bullet_speed),
    }; 
    bullets.push(bullet);
}

画布 - 鼠标点的子弹

2 个答案: