Question

我正在制作一个桨球比赛，我在边界下设计并编写了脚本。我想制作一个更多的桨，并在当前鼠标位置移动。我怎么做到的？这是我的球在边界下移动的代码，我需要一个底部的桨。

<!doctype html>
<html>
<body onload="init();">
<script>
var context;
var x=150;
var y=150;
var dx=2;
var dy=4;

function init()
{
  context= myCanvas.getContext('2d');
  setInterval(draw,10);
}

function draw()
{
  context.clearRect(0,0, 300,300);
  context.beginPath();
  context.fillStyle="#98bf26";
  // Draws a circle of radius 20 at the coordinates 100,100 on the canvas
  context.arc(x,y,10,0,Math.PI*2,true);
  context.closePath();
  context.fill();


  // Boundary Logic
if( x<0 || x>300) dx=-dx;
if( y<0 || y>300) dy=-dy;
x+=dx;
y+=dy;
}

</script>

  <canvas id="myCanvas" width="300" height="300" style="border:1px dotted #111;" >
  </canvas>
</body>
</html>

Answer 1

尝试添加到您的代码中

myCanvas.onmousemove = mouse_move_callback

其中mouse_move_callback是一个类似

的函数

function mouse_move_callback(ev) {
  // Get mouse position
  if (ev.offsetX) {
    c_x = ev.offsetX;
    c_y = ev.offsetY;
  }
  if (ev.layerX) {
    c_x = ev.layerX;
    c_y = ev.layerY;
  }
  // Update paddle position
  update_paddle(c_x,c_y);
}

移动光标位置

1 个答案: