私のjavascriptボールに動くときにローリングアニメーションを与える方法は？

Question

I次の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ボールにどのように適用できますか？何かご意見は？ http://jsfiddle.net/mauricederegt/dhUw5/

：

種類のよろしくと幸せな新年

psの私は/負荷のjQueryを使用し、同様

--edit --------

フィドルを作成しました

1つのファイルを開きます

2クリックして1

3矢印キーを使ってボールを移動させ、緑色のフィールドにとどまります！

4-ローリングエフェクトなし

Answer 1

リンクされたFlashの例と同じ効果を得るには、要素に背景を追加し、それに応じて移動するだけです。

あなたのimg要素をスパンで置き換え、CSSとborder-radiusでバックグラウンドイメージを与えて丸めました。あなたのplane.move機能で 私は次の行を追加：//：より良い[jsfiddle]（HTTPを添付して、このような何かのために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を参照）。そして、あなたはCSS変換を使用する場合これは非常に簡単です

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

Answer 3

を使用して、背景画像（テクスチャ）の座標を変更します。この例では、回転速度は、ボールが現在走行している速度のスカラー値に応じて決定される：

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/