讓「球」跟隨畫布上的鼠標

我試圖讓一個球跟隨鼠標在畫布區域內。但是當鼠標進入畫布區域時（即邊緣），球只能獲得第一個位置。讓「球」跟隨畫布上的鼠標

由於在畫布內移動時球沒有跟隨鼠標，所以出了什麼問題？

\t \t \t window.onload = startup; 
 
\t \t \t var ballX = 400; 
 
\t \t \t var ballY = 400; 
 
\t \t \t var mouseX = 0; 
 
\t \t \t var mouseY = 0; 
 
\t \t \t 
 
\t \t \t function startup() { 
 
\t \t \t \t document.getElementById("drawingArea").onmouseover = mouseMove; 
 
\t \t \t \t setInterval("moveBall()",100); 
 
\t \t \t 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t function mouseMove(evt) { 
 
\t \t \t \t mouseX = evt.clientX; 
 
\t \t \t \t mouseY = evt.clientY; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t function moveBall() { 
 
\t \t \t \t if (ballX > mouseX) { 
 
\t \t \t \t \t ballX -= 5; 
 
\t \t \t \t } else { 
 
\t \t \t \t \t ballX += 5; 
 
\t \t \t \t } 
 
\t \t \t \t if (ballY > mouseY) { 
 
\t \t \t \t \t ballY -= 5; 
 
\t \t \t \t } else { 
 
\t \t \t \t \t ballY += 5; 
 
\t \t \t \t } 
 
\t \t \t \t 
 
\t \t \t \t var canvas = document.getElementById("drawingArea"); 
 
\t \t \t \t var ctx = canvas.getContext("2d"); 
 
\t \t \t \t 
 
\t \t \t \t ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
\t \t \t \t 
 
\t \t \t \t ctx.beginPath(); 
 
\t \t \t \t ctx.arc(ballX, ballY, 40, 0, 2* Math.PI); 
 
\t \t \t \t ctx.fillStyle = "green"; 
 
\t \t \t \t ctx.fill(); 
 
\t \t \t \t ctx.lineWidth = 5; 
 
\t \t \t \t ctx.strokeStyle = "red"; 
 
\t \t \t \t ctx.stroke(); 
 
\t \t \t }

#drawingArea 
 
{ 
 
\t \t \t \t border-style: solid; 
 
\t \t \t \t position: absolute; 
 
\t \t \t \t top: 0; 
 
\t \t \t \t left: 0; 
 
}

<!doctype html> 
 
<html> 
 
\t <head> 
 
\t \t <meta charset="UTF-8"> 
 
\t \t <title>Move Ball</title> 
 
\t </head> 
 

 
\t <body> 
 
\t \t <canvas id="drawingArea" width="800" height="800" /> 
 
\t </body> 
 
</html>

來源

2017-09-19 jhermansen

在此行中：

document.getElementById("drawingArea").onmouseover = mouseMove;

...你需要改變onmouseover到onmousemove。延伸閱讀：onmousemove

完整的示例與變化：

\t \t \t window.onload = startup; 
 
\t \t \t var ballX = 400; 
 
\t \t \t var ballY = 400; 
 
\t \t \t var mouseX = 0; 
 
\t \t \t var mouseY = 0; 
 
\t \t \t 
 
\t \t \t function startup() { 
 
\t \t \t \t document.getElementById("drawingArea").onmousemove = mouseMove; 
 
\t \t \t \t setInterval("moveBall()",100); 
 
\t \t \t 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t function mouseMove(evt) { 
 
\t \t \t \t mouseX = evt.clientX; 
 
\t \t \t \t mouseY = evt.clientY; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t function moveBall() { 
 
\t \t \t \t if (ballX > mouseX) { 
 
\t \t \t \t \t ballX -= 5; 
 
\t \t \t \t } else { 
 
\t \t \t \t \t ballX += 5; 
 
\t \t \t \t } 
 
\t \t \t \t if (ballY > mouseY) { 
 
\t \t \t \t \t ballY -= 5; 
 
\t \t \t \t } else { 
 
\t \t \t \t \t ballY += 5; 
 
\t \t \t \t } 
 
\t \t \t \t 
 
\t \t \t \t var canvas = document.getElementById("drawingArea"); 
 
\t \t \t \t var ctx = canvas.getContext("2d"); 
 
\t \t \t \t 
 
\t \t \t \t ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
\t \t \t \t 
 
\t \t \t \t ctx.beginPath(); 
 
\t \t \t \t ctx.arc(ballX, ballY, 40, 0, 2* Math.PI); 
 
\t \t \t \t ctx.fillStyle = "green"; 
 
\t \t \t \t ctx.fill(); 
 
\t \t \t \t ctx.lineWidth = 5; 
 
\t \t \t \t ctx.strokeStyle = "red"; 
 
\t \t \t \t ctx.stroke(); 
 
\t \t \t }

#drawingArea 
 
{ 
 
\t \t \t \t border-style: solid; 
 
\t \t \t \t position: absolute; 
 
\t \t \t \t top: 0; 
 
\t \t \t \t left: 0; 
 
}

<!doctype html> 
 
<html> 
 
\t <head> 
 
\t \t <meta charset="UTF-8"> 
 
\t \t <title>Move Ball</title> 
 
\t </head> 
 

 
\t <body> 
 
\t \t <canvas id="drawingArea" width="800" height="800" /> 
 
\t </body> 
 
</html>

來源

2017-09-19 05:21:29 Clonkex

您還需要添加onmousemove事件處理程序。

來源

2017-09-19 05:18:08 AKX

的mouseover事件監聽器不喜歡「而鼠標懸停，執行該代碼」工作。只有當這個狀態成立時，它纔會觸發，換句話說，當你將鼠標從外部移動到節點時。

您想要使用的正確事件是mousemove;一旦它改變，就存儲鼠標的新位置。

除此之外，我已經做了一些其他修改代碼，以便在動畫更流暢：

的ballX += mouseX>ballX? 5: -5這種方法很容易出現口吃，因爲它完全忽略的區域，當鼠標和球少在任何軸上相距5px。

也不會使用setInterval()爲您的遊戲循環。 更廣泛的是，請不要使用帶有字符串參數的setTimeout()或setInterval()（根本不使用）。這是一個不好的做法。不靈活，並迫使你使用全局變量。

更好地使用requestAnimationFrame()所以你保持與瀏覽器渲染同步。

window.onload = startup; 
 

 
var ballX = 400; 
 
var ballY = 400; 
 
var mouseX = 0; 
 
var mouseY = 0; 
 

 
function startup() { 
 
    //`mousemove`, not `mouseover` 
 
    document.getElementById("drawingArea").onmousemove = mouseMove; 
 
    
 
    loop(); 
 
} 
 

 
//use `requestAnimationFrame` for the game loop 
 
//so you stay sync with the browsers rendering 
 
//makes it a smoother animation 
 
function loop(){ 
 
    moveBall(); 
 
    requestAnimationFrame(loop); 
 
} 
 

 
function mouseMove(evt) { 
 
    mouseX = evt.clientX; 
 
    mouseY = evt.clientY; 
 
} 
 

 
function moveBall() { 
 
    //get the distance between the mouse and the ball on both axes 
 
    //walk only the an eight of the distance to create a smooth fadeout 
 
    var dx = (mouseX - ballX) * .125; 
 
    var dy = (mouseY - ballY) * .125; 
 
    //calculate the distance this would move ... 
 
    var distance = Math.sqrt(dx*dx + dy*dy); 
 
    //... and cap it at 5px 
 
    if(distance > 5){ 
 
    dx *= 5/distance; 
 
    dy *= 5/distance; 
 
    } 
 
    
 
    //now move 
 
    ballX += dx; 
 
    ballY += dy; 
 
    
 
    var canvas = document.getElementById("drawingArea"); 
 
    var ctx = canvas.getContext("2d"); 
 

 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 

 
    ctx.beginPath(); 
 
    ctx.arc(ballX, ballY, 40, 0, 2 * Math.PI); 
 
    ctx.fillStyle = "green"; 
 
    ctx.fill(); 
 
    ctx.lineWidth = 5; 
 
    ctx.strokeStyle = "red"; 
 
    ctx.stroke(); 
 
}

#drawingArea { 
 
    border-style: solid; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
}

<canvas id="drawingArea" width="800" height="800" />

隨意周圍打了一下與移動代碼。退房時，當您在計算距離時更改* .125會發生什麼情況，何時取消條件，...

來源

2017-09-19 06:09:18 Thomas

讓「球」跟隨畫布上的鼠標

回答

相關問題