Wie ziele ich meinen Ball in Javascript

-4

Zu Beginn eines Brick Breaker Spiel zielt der Spieler den Ball mit der Maus. Wenn Sie mit der linken Maustaste klicken, bewegt sich der Ball in diese Richtung. Wie erstelle ich eine Linie, die anzeigt, wohin der Ball zielt? Ich habe versucht, Beispiele zu finden, wie es geht, konnte aber nichts finden.Wie ziele ich meinen Ball in Javascript

Wenn ich setzen ctx.lineTo(cursorX, cursorY); nichts zeigt, aber wenn ich ctx.lineTo(100, 100); setzen es zieht die Linie. Benötige ich eine Animationsfunktion, damit die Linie an der Stelle am neuen cursorX und cursorY gezeichnet wird?

Mein Code:

<html> 
    <script type="text/javascript"> 
    window.onload = init; 
    function init() { 
     if (window.Event) { 
      document.captureEvents(Event.MOUSEMOVE); 
     } 
     document.onmousemove = getCursorXY; 
     drawLine(); 
    } 

    function getCursorXY(e) { 
     cursorX = document.getElementById('cursorX').value = (window.Event) 
     ? e.pageX 
     : event.clientX + (document.documentElement.scrollLeft 
      ? document.documentElement.scrollLeft 
      : document.body.scrollLeft); 
     cursorY = document.getElementById('cursorY').value = (window.Event) 
     ? e.pageY 
     : event.clientY + (document.documentElement.scrollTop 
      ? document.documentElement.scrollTop 
      : document.body.scrollTop); 
    } 

    function drawLine() { 
     var c=document.getElementById("myCanvas"); 
     var ctx=c.getContext("2d"); 
     ctx.beginPath(); 
     ctx.moveTo(0,0); 
     ctx.lineTo(cursorX, cursorY); 
     ctx.stroke(); 
    } 


    </script> 

    <body> 
    <canvas id="myCanvas" width="578" height="200"></canvas> 
    <input type="text" id="cursorX" size="3"> X-position of the mouse cursor 
    <br /><br /> 
    <input type="text" id="cursorY" size="3"> Y-position of the mouse cursor 
    </body> 
</html>

Quelle

2017-05-16 Ronay13

welchen Teil Sie eine Linie verwirrt zu schaffen? Wie bekomme ich die Endpunkte? oder wie man das verdammte Ding wirklich zeichnet? –

bemerkte ich die folgenden Probleme mit dem präsentierten Code:

drawLine() nur einmal während der Initialisierung nicht auf nachfolgende Aktualisierungen cursorX und cursorY genannt wird.
cursorX und cursorY sind nicht initialisiert und beziehen sich auf die entsprechenden <input> Elemente vor dem ersten Aufruf an drawLine.
Die Berechnung von cursorX und cursorY ist fehlerhaft.

Ich nehme an, Sie für die folgenden suchen:

let canvas = document.getElementById("canvas"); 
 
let ctx = canvas.getContext("2d"); 
 

 
// Origin: 
 
let ox = canvas.width/2; 
 
let oy = canvas.height; 
 
    
 
// Mouse cursor positions: 
 
let mx = ox; 
 
let my = 0; 
 
    
 
window.addEventListener("mousemove", event => { 
 
    let rect = canvas.getBoundingClientRect(); 
 
    mx = event.clientX - rect.left; 
 
    my = event.clientY - rect.top; 
 
}); 
 

 
function drawPointer(ctx, ox, oy, dx, dy) { 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    ctx.beginPath(); 
 
    ctx.moveTo(ox, oy); 
 
    ctx.lineTo(ox + dx * 100, oy + dy * 100); 
 
    ctx.stroke(); 
 
} 
 

 
function frame(timestamp) { 
 
    requestAnimationFrame(frame); 
 

 
    // Direction: 
 
    let dx = mx - ox; 
 
    let dy = my - oy; 
 
    
 
    // Normalize direction to length 1: 
 
    let dl = Math.sqrt(dx * dx + dy * dy); 
 
    dx /= dl; 
 
    dy /= dl; 
 
    
 
    drawPointer(ctx, ox, oy, dx, dy); 
 
    
 
    // TODO: draw balls etc... 
 
} 
 
requestAnimationFrame(frame);

<canvas id="canvas"></canvas>

Quelle

2017-05-20 18:54:29

Wie ziele ich meinen Ball in Javascript

Antwort

Verwandte Themen