0

我正在制作球和桨的动画。球弹得很好。在此之后，我想要一个桨或<div>x 轴上的元素形状的“桨”。该桨必须仅沿 x 轴移动，并且当我在任何位置将光标激活到 x 轴时应该移动。有什么帮助吗？

这是我的代码：

var x=150;
var y=150;
var dx=2;
var dy=4;
var WIDTH;
var HEIGHT;

var ctx=document.getElementById("canvas").getContext("2d");
ctx.beginPath();
ctx.arc(150,150,10,0,2*Math.PI,true);
ctx.closePath();
ctx.fill();

function init() {
  var ctx=document.getElementById("canvas").getContext("2d");
  return setInterval(draw,10);
}
function draw() {
  ctx.clearRect(0,0,300,300);
  ctx.beginPath();
  ctx.arc(x,y,10,0,2*Math.PI,true);
  ctx.closePath();
  ctx.fill();
  x+=dx;
  y+=dy;
  bounce();
}
function bounce(){
  if(x+dx>300||x+dx<0)
    dx=-dx;
  if(y+dy>300||y+dy<0)
    dy=-dy;
}
init();

在小提琴中，在这里。

4

1 回答 1

1

试试这个代码：

在您的 var 声明中：

var mouseX = 150;

在您的init()功能中：

document.getElementById("canvas").addEventListener('mousemove', moveHandler);

在您的draw()功能中：

ctx.rect(mouseX-20,280,40,5); // rect( x , y , width , height )
ctx.fillStyle = 'black';      //       ^ This is the mouse's X position, minus half the paddle width.
ctx.fill();

最后，添加这个函数：

function moveHandler(e){
  e = e || window.event; // Compatibility.
  mouseX = e.offsetX;
}

因此，您生成的代码将如下所示：

var x=150;
var y=150;
var dx=2;
var dy=4;
var WIDTH;
var HEIGHT;
var mouseX = 150;
var mouseY;

var ctx=document.getElementById("canvas").getContext("2d");
ctx.beginPath();
ctx.arc(150,150,10,0,2*Math.PI,true);
ctx.closePath();
ctx.fill();

function init() {
  document.getElementById("canvas").addEventListener('mousemove', moveHandler);
  return setInterval(draw,10);
}
function moveHandler(e){
  mouseX = e.offsetX;
}
function draw() {
  ctx.clearRect(0,0,300,300);
  ctx.rect(mouseX-20,280,40,5);
  ctx.fillStyle = 'black';
  ctx.fill();
  ctx.beginPath();
  ctx.arc(x,y,10,0,2*Math.PI,true);
  ctx.closePath();
  ctx.fill();
  x+=dx;
  y+=dy;
  bounce();
}
function bounce(){
  if(x+dx>300||x+dx<0)
    dx=-dx;
  if(y+dy>300||y+dy<0)
    dy=-dy;
}
init();
于 2013-01-18T07:53:59.923 回答