Как мне нацелить свой мяч в JavaScript

В начале игры Brick Breaker игрок направляет мяч с помощью мыши. Когда вы щелкните левой кнопкой мыши, он будет перемещать мяч в этом направлении. Как мне создать линию, которая укажет, куда направлен мяч. Я пытался найти примеры того, как это сделать, но ничего не смог найти.

Когда я положил ctx.lineTo(cursorX, cursorY); ничего не показывает, но когда я ставлю ctx.lineTo(100, 100); это рисует линию. Нужна ли мне функция анимации, чтобы она рисовала линию в месте на новом cursorX а также cursorY?

Мой код:

<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>
Источник

1 ответ

Я заметил следующие проблемы с представленным кодом:

  • drawLine() вызывается только один раз при инициализации, а не при последующих обновлениях cursorX а также cursorY,
  • cursorX а также cursorY не инициализируются и ссылаются на соответствующие <input> элементы перед первым вызовом drawLine,
  • Расчет cursorX а также cursorY имеет недостатки.

Я полагаю, вы ищете следующее:

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>

Источник
Другие вопросы по тегам