Question

在Brick Breaker游戏开始时，玩家使用鼠标瞄准球。当您左键单击鼠标时，它将向该方向移动球。如何创建一条指示球瞄准位置的线。我试着查看如何做的例子，却找不到任何东西。

当我放B1=REG时没有显示，但是当我放ctx.lineTo(cursorX, cursorY);时它会画出线条。我是否需要动画功能，以便在新ctx.lineTo(100, 100);和cursorX的位置绘制线条？

我的代码：

cursorY

Answer 1

我注意到以下代码存在以下问题：

drawLine()仅在初始化期间调用一次，而不是在cursorX和cursorY的后续更新中调用。
cursorX和cursorY未初始化，并在第一次调用<input>之前引用相应的drawLine元素。
cursorX和cursorY的计算存在缺陷。

我假设您正在寻找以下内容：

＆＃13;

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);

＆＃13;

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

＆＃13;

我如何在javascript中瞄准我的球

1 个答案: