Warum erhöht sich die Bewegung meiner Canvas-Box beim Klicken?

Question

Die beigefügten Js Fiddle zeichnen eine Box, wo immer die Maus geklickt wird. Es funktioniert größtenteils wie erwartet. Außer jedes Mal, wenn eine neue Box auf der Leinwand gezeichnet wird, wird sie jedes Mal schneller, wenn sie viel zu schnell ist.

Ich habe console.log ed die dx/dy Werte und sie sind nicht im Wert steigen, so ist es nicht, dass ich nicht denke.

Der dx-Wert ist der Wert, um den sich die Position der Box bewegt.

Kann jemand Licht abwerfen?

var canvas = document.getElementById('myCanvas'); 
 
    var logger = document.getElementById('logger'); 
 
    var ctx = canvas.getContext('2d'); 
 
    var x = 0; 
 
    var y = 0; 
 
    var dx = -2; 
 
    var dy = -2; 
 
    var boxColour = '#'+(Math.random()*0xFFFFFF<<0).toString(16); 
 
    var boxSize = 20; 
 
    var mousex, 
 
     mousey; 
 
    
 
    canvas.addEventListener('click',function(e){ 
 
     mousex = e.clientX; 
 
     mousey = e.clientY; 
 
     x = mousex - canvas.offsetLeft-(boxSize/2); 
 
     y = mousey - canvas.offsetTop-(boxSize/2); 
 
     draw(); 
 
    }); 
 
    
 
    function draw(){ 
 
     logger.innerHTML = "x: " + x + "y: " + y; 
 
     ctx.clearRect(0,0,canvas.width,canvas.height); 
 
     collistionDetection(); 
 
     ctx.beginPath(); 
 
     ctx.rect(x,y,boxSize,boxSize); 
 
     ctx.fillStyle=boxColour; 
 
     ctx.fill(); 
 
     ctx.closePath(); 
 
     x+=dx; 
 
     y+=dy; 
 
     requestAnimationFrame(draw); 
 
    }; 
 
    
 
    function collistionDetection(){ 
 
     if(x<0 || x>canvas.width-boxSize){ 
 
     dx = -dx; 
 
     boxColour = '#'+(Math.random()*0xFFFFFF<<0).toString(16); 
 
     }; 
 
     if(y<canvas.offsetTop-(boxSize/2) || y>canvas.height-boxSize){ 
 
     boxColour = '#'+(Math.random()*0xFFFFFF<<0).toString(16); 
 
     dy = -dy; 
 
     }; 
 
    };

* { padding: 0; margin: 0; } 
 
    canvas { background: #eee; display: block; 
 
     margin: 0 auto; margin-top:10px; 
 
     }

<canvas id="myCanvas" width='480' height='320'></canvas> 
 
<div id="logger"></div>

ist Ihre Hilfe immer sehr geschätzt.
Dank
moe

Answer 1

Ich denke, Ihre requestAnimationFrames nicht so Ihre Animation Funktion nur aufgerufen immer häufiger klicken, um jedes Mal gelöscht werden wird. Ich habe unten eine kleine Änderung an Ihrem Code vorgenommen, die Ihnen zu helfen scheint.

var canvas = document.getElementById('myCanvas'); 
 
    var logger = document.getElementById('logger'); 
 
    var ctx = canvas.getContext('2d'); 
 
    var x = 0; 
 
    var y = 0; 
 
    var dx = -2; 
 
    var dy = -2; 
 
    var boxColour = '#'+(Math.random()*0xFFFFFF<<0).toString(16); 
 
    var boxSize = 20; 
 
    var mousex, 
 
     mousey; 
 
    var lastAnimationFrame; 
 
    canvas.addEventListener('click',function(e){ 
 
     mousex = e.clientX; 
 
     mousey = e.clientY; 
 
     x = mousex - canvas.offsetLeft-(boxSize/2); 
 
     y = mousey - canvas.offsetTop-(boxSize/2); 
 
     cancelAnimationFrame(lastAnimationFrame) 
 
     draw(); 
 
    }); 
 
    
 
    function draw(){ 
 
     logger.innerHTML = "x: " + x + "y: " + y; 
 
     ctx.clearRect(0,0,canvas.width,canvas.height); 
 
     collistionDetection(); 
 
     ctx.beginPath(); 
 
     ctx.rect(x,y,boxSize,boxSize); 
 
     ctx.fillStyle=boxColour; 
 
     ctx.fill(); 
 
     ctx.closePath(); 
 
     x+=dx; 
 
     y+=dy; 
 
     lastAnimationFrame = requestAnimationFrame(draw); 
 
    }; 
 
    
 
    function collistionDetection(){ 
 
     if(x<0 || x>canvas.width-boxSize){ 
 
     dx = -dx; 
 
     boxColour = '#'+(Math.random()*0xFFFFFF<<0).toString(16); 
 
     }; 
 
     if(y<canvas.offsetTop-(boxSize/2) || y>canvas.height-boxSize){ 
 
     boxColour = '#'+(Math.random()*0xFFFFFF<<0).toString(16); 
 
     dy = -dy; 
 
     }; 
 
    };

* { padding: 0; margin: 0; } 
 
    canvas { background: #eee; display: block; 
 
     margin: 0 auto; margin-top:10px;

<canvas id="myCanvas" width='480' height='320'></canvas> 
 
<div id="logger"></div>

Answer 2

Denn von jedem Mausklick Sie draw erneut, und dieser Ruf, wie offensichtlich in Ihrem Code aufrufen ist, rekursiv und hält sich selbst aufruft. So haben Sie bei jedem Klick eine Kette von Anrufen an draw.

können Sie einen boolean hinzufügen zu prüfen, ob draw aufgerufen zunächst wurde, und wenn ja, verhindern nachfolgende Anrufe in Ihrer draw Funktion:

if(!initialized) 
{ 
    requestAnimationFrame(draw); 
    initialized = true; 
}