画布-鼠标指向的项目符号

Question

因此，我正在尝试实施射击，而我想要做的是将玩家x和y用作射弹所源自的基点，然后基本上到达画布上按下的点。 射弹是从玩家那里衍生出来的，但是它并不会一直指向光标，而是总是向右走，而是根据被按下的方向向右上移或右下移。 我已经上网查看了，似乎找不到答案。

在我的JavaScript中，这里是Shoot函数：

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中，这是update方法的项目符号部分：

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为您提供相对于窗口左上角的鼠标坐标，但是您只需要相对于canvas元素左上角的坐标。

要解决此问题，请首先了解另一种获取鼠标坐标的方法，即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);

在draw函数中调用此函数：

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);
}