How do I aim my ball in javascript

Question

At the start of a Brick Breaker game, the player aims the ball using the mouse. When you left click the mouse, it will move the ball in that direction. How do I create a line that will indicate where the ball is aiming. I tried looking up examples on how to do it but couldn't find anything.

When I put ctx.lineTo(cursorX, cursorY); nothing shows, but when I put ctx.lineTo(100, 100); it draws the line. Do I need an animate function so that it draws the line at the location at the new cursorX and cursorY?

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

which part of creating a line confuses you? how to get the end points? or how to actually draw the damned thing? — Jaromanda X, May 17 '17 at 00:11

le_m · Answer 1 · 2017-05-20T19:08:30.760

I noticed the following issues with the presented code:

drawLine() is only called once during initialization, not on subsequent updates to cursorX and cursorY.
cursorX and cursorY are not initialized and refer to the respective <input> elements before the first call to drawLine.
The computation of cursorX and cursorY is flawed.

I assume you are looking for the following:

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>

How do I aim my ball in javascript

1 Answers1