7

次の 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-参照、ローリング効果なし

4

3 に答える 3

4

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

img 要素をスパンに置き換え、CSS を介して background-image を指定し、border-radius を指定して丸くしました。plane.move 関数に次の行を追加しました。

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

出来上がり、Flash の例と同じ効果: http://jsfiddle.net/dhUw5/1/

于 2012-12-29T18:48:24.303 に答える
2

おそらく HTML5 キャンバスを使用するでしょう。を使用してボールの表面として使用される画像の一部を切り取りdrawImage、それをマスクして円形にします。次に、リンク先のフラッシュの例と同様の方法でクリッピング位置(sx、sy)を変更して、キャンバスを再描画することでアニメーション化できます。(以下はテストされていません。試してみたい場合は、元のコードで 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 を使用して円を作成するか、別の画像をオーバーレイしてマスクすることもできます ( HTML5 で画像をマスクする最良の方法 を参照)。次に、使用して背景画像 (テクスチャ) の座標を変更します。

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

于 2012-12-29T15:48:37.810 に答える
1

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)'
    });

このコードは のmoveメソッドに入りplaneます。ここにデモンストレーションがあります: http://jsfiddle.net/BahnU/show/

于 2012-12-29T18:30:41.667 に答える