次の HTML コードがあります。
<img src="game_files/ball.png" id="ball" />
ボールの画像を含むdivです(ボールの上面図)
このボールは、矢印キーといくつかのjavacriptで上、左、右、下などに移動できます。次のコードでこれを行います。
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も使用/ロードします
- 編集 - - - -
フィドルを作成しました: http://jsfiddle.net/mauricederegt/dhUw5/
1-フィドルを開く
2 - 1をクリック
3- 矢印キーを使用してボールを動かし、グリーン フィールドに留まります。
4-参照、ローリング効果なし