如何在移动时给我的JavaScript球滚动动画？

Question

我有以下的HTML代码：

<img src="game_files/ball.png" id="ball" /> 它包含一个球 （球的俯视图）

这场球，我可以用我的方向键和一些javacript去移动的图像的DIV左，右，下，等等等我用这个代码这样做：

var ball = function () { 
    var inited = false, 
     el, 
     xcheck = 50, 
     x = 50, 
     ycheck = 50, 
     y = 50, 
     xspeed = 0, 
     yspeed = 0, 
     power = 0.4, 
     friction = 0.99, 
     xwind = 0, 
     ywind = 0, 
     dead = true, 
     timer = function(keys) { 
      if (dead === true) { 
       return; 
      } 
      if (keys[38] === true) { 
       yspeed += power; 
      } 
      if (keys[40] === true) { 
       yspeed -= power; 
      } 
      if (keys[37] === true) { 
       xspeed += power; 
      } 
      if (keys[39] === true) { 
       xspeed -= power; 
      } 
      xspeed = xspeed * friction - xwind; 
      yspeed = yspeed * friction - ywind; 
      if (Math.abs(xspeed) < 0.004) { 
       xspeed = 0; 
      } 
      if (Math.abs(xspeed) < 0.004) { 
       xspeed = 0; 
      } 
      x -= xspeed; 
      y -= yspeed; 
      plane.move(x,y); 
     }; 
    return { 
     init: function() { 
      if (inited != true) { 
       inited = true; 
       el = document.getElementById('ball'); 
       roller.register(timer, 'time'); 
      } 
     } 
    }; 
}(); 

这一切工作，但球没有滚动动画！图像只是向左或向右滑动如何添加？我发现这个教程：http://www.emanueleferonato.com/2007/06/10/creation-of-realistic-spheres-in-flash-with-textures-and-masking/，我认为这可以帮助我。

不幸的是，这是一个闪光球（我希望这也适用于某种类型的JS）。本教程准确显示了我想要的内容：一个带滚动动画的球（请参阅教程末尾附近的教程页面，其中包含豹皮，下面是第26-37行：如果纹理相对于球的位置。 ..）。

如何将这个应用到我的JS球？有什么想法吗？

亲切的问候和新年快乐

PS我使用/负载的jquery以及

--edit --------

创建一个小提琴： http://jsfiddle.net/mauricederegt/dhUw5/

1-打开小提琴

2-点击1

3-使用箭头键移动球，留在绿色的领域！

4-看不到滚动效果

Answer 1

为了与您链接的Flash示例具有相同的效果，您只需向该元素添加背景并相应地移动该背景。

我用一个跨度替换了你的img元素，并通过CSS和一个边框半径为它提供了背景图像。 在你plane.move功能添加以下行：

document.getElementById('ball').style.backgroundPosition = x + 'px ' + y +'px'; 

瞧，如闪存例子同样的效果：http://jsfiddle.net/dhUw5/1/

Answer 2

您可能会使用HTML5画布。您可以使用drawImage然后mask it to get a circle shape来剪切用作球表面的部分图像。然后，您可以通过重绘画布来对其进行动画处理，剪辑位置（sx，sy）的修改方式与链接的Flash示例类似。 （以下是未测试;做的jsfiddle与你原来的代码，如果你想尝试它。）

// ... when the user moves 
this.sy += yspeed; 
this.sx += xspeed; 
if (this.sx > textureSize) { 
    this.sx -= textureSize; 
} 
else if (this.sx < 0) { 
    this.sx += textureSize; 
} 
if (this.sy > textureSize) { 
    this.sy -= textureSize; 
} 
else if (this.sy < 0) { 
    this.sy += textureSize; 
} 

// ... redraw the ball once every frame 
context.clearRect(0, 0, canvasWidth, canvasHeight); // clear the canvas 
context.save(); 
context.beginPath(); 
context.arc(this.x, this.y, ballRadius, Math.PI * 2, false); 
context.clip();  
context.drawImage(ballImage, this.sx, this.sy, 
        ballDiameter, ballDiameter, 
        this.x, this.y, 
        ballDiameter, ballDiameter);  // redraw the ball  
context.restore(); 

或者你可以使用一个div纹理作为背景图像，并掩盖它做一个圆圈使用CSS3或叠加另一个图像（请参阅Best way to mask an image in HTML5）。然后，你将用

ballElement.style.backgroundPosition = this.sx + 'px ' + this.sy + 'px';

Answer 3

这是很容易的，如果你使用CSS变换更改背景图片（纹理）的坐标。在这个例子中的旋转速度根据该球目前行驶的速度的标量值来确定：

var increment = Math.round(Math.sqrt(Math.pow(xspeed, 2) + Math.pow(yspeed, 2))); 
    if (!isNaN(increment)) { 
     currangle = currangle + ((xspeed < 0 ? 1 : -1) * increment); 
    } 

    $('#ball').css({ 
     '-webkit-transform': 'rotate(' + currangle + 'deg)' 
    }); 

    $('#ball').css({ 
     '-moz-transform': 'rotate(' + currangle + 'deg)' 
    }); 

这一代码进入在plane的move方法。这里是一个演示：http://jsfiddle.net/BahnU/show/