在javascript中弹跳球动画

时间:2013-02-04 11:40:32

标签: html css html5 canvas html5-canvas

这是我的javascript游戏的主题 -

Fiddle

当球接触偏移到X时,Y桨然后它应该停止移动。我认为当前的轴应该是已知的,但不知怎的,我找不到任何办法。 请帮我把它变得更真实。

这是我的绘图功能 -

function draw() {
      ctx.clearRect(0,0,300,300);
      ctx.rect(mouseX-40,mouseY-20,40,20,true);
      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;
    }

1 个答案:

答案 0 :(得分:0)

如果您希望球在击中球拍时停止移动,您可以这样做:http://jsfiddle.net/nHfXV/2/

if(x+dx<mouseX&&x+dx>mouseX-40&&y+dy<mouseY&&y+dy>mouseY-20){
    dy=0;
    dx=0;
}