畫布-鼠標指向的項目符號

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