Faire "boule" suivre la souris sur la toile

J'essaie de faire une boule suivre la souris à l'intérieur d'une zone de toile. Mais la balle n'obtient la première position que lorsque la souris pénètre dans la zone de la toile (donc sur les bords).Faire "boule" suivre la souris sur la toile

Qu'est-ce qui ne va pas puisque la balle ne suit pas la souris lorsque vous vous déplacez à l'intérieur de la toile?

\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>

Source

2017-09-19 jhermansen

Sur cette ligne:

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

... vous devez changer onmouseover-onmousemove. Pour en savoir plus: onmousemove

Exemple complet avec le changement:

\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>

Source

2017-09-19 05:21:29 Clonkex

Vous aurez également besoin d'ajouter le gestionnaire d'événements onmousemove.

Source

2017-09-19 05:18:08 AKX

L'écouteur d'événement mouseover ne fonctionne pas comme un "alors que la souris est terminé, exécuter ce code". Il ne se déclenche que lorsque cet état devient vrai, en d'autres termes, lorsque vous déplacez la souris de l'extérieur sur le nœud.

L'événement approprié que vous souhaitez utiliser est mousemove; stocker la nouvelle position de la souris, dès qu'il a changé.

plus que j'ai fait quelques autres modifications à votre code pour l'animation est plus lisse:

Cette approche de ballX += mouseX>ballX? 5: -5 est sujette à un bégaiement, car il ignore complètement la zone, lorsque la souris et la balle sont moins que 5px à part sur un axe.

De même, n'utilisez pas setInterval() pour votre boucle de jeu. Et plus large, n'utilisez pas setTimeout() ou setInterval() avec un argument de chaîne (du tout). C'est une mauvaise pratique. Non flexible et vous oblige à utiliser des variables globales.

Mieux vaut utiliser requestAnimationFrame() pour rester synchronisé avec le rendu des navigateurs.

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" />

Ne hésitez pas à jouer un peu avec le code de mouvement. Découvrez ce qui se passe lorsque vous modifiez le * .125 dans le calcul de la distance, lors de la suppression de la condition, ...

Source

2017-09-19 06:09:18 Thomas

Faire "boule" suivre la souris sur la toile

Répondre

Questions connexes