3

私は簡単な Web クイズを開発しており、javascript を使用して、ユーザーが特定のレベルまたはスコアに到達したときに「ゲーム デッキ」をさまよう小さな画像 (1UP) を表示する効果を作成したいと考えています。ユーザーは時間内にクリックするだけで追加のライフを得ることができます。

このような効果を達成するための Jquery プラグインまたは JavaScript スニペットを知っていますか?

4

2 に答える 2

8

実際、これを行うのは驚くほど簡単です。

要素を作成します。

img = document.createElement('img');

ソースを設定します。

img.src = "myimage.png";

絶対に配置するなど：

img.style.position = "absolute";
img.style.left = "50px";
img.style.top = "50px";
img.style.width = "50px";  // Make these match the image...
img.style.height = "50px"; // ...or leave them off

(明らかに、必要な座標とサイズを使用してください。)

他のものの上に表示されることを確認したい場合があります。

img.style.zIndex = 100; // Or whatever

ドキュメントに追加します。

document.body.appendChild(img);

動かしてみよう

を使用してwindow.setInterval(または、setTimeoutやりたい方法に応じて)style.leftと のstyle.top設定を変更して移動します。を使用Math.randomして、0 から 1 の間のランダムな浮動小数点数を取得し、それを乗算して実行しMath.floor、座標を変更するための整数を取得できます。

例

これは 50,50 で画像を作成し、10 秒間 5 分の 1 秒ごとに (非常にぎくしゃくしたランダムな方法で; 私はそれを気の利いたように見せるために時間をかけませんでした) それをアニメーション化してから、それを削除します:

function createWanderingDiv() {
    var img, left, top, counter, interval;

    img = document.createElement('img');

    img.src = "myimage.png";

    left = 200;
    top  = 200;
    img.style.position = "absolute";
    img.style.left = left + "px";
    img.style.top = top + "px";
    img.style.width = "200px";  // Make these match the image...
    img.style.height = "200px"; // ...or leave them out.

    img.style.zIndex = 100; // Or whatever

    document.body.appendChild(img);

    counter = 50;
    interval = 200; // ms
    window.setTimeout(wanderAround, interval);

    function wanderAround() {

        --counter;
        if (counter < 0)
        {
            // Done; remove it
            document.body.removeChild(img);
        }
        else
        {
            // Animate a bit more
            left += Math.floor(Math.random() * 20) - 10;
            if (left < 0)
            {
                left = 0;
            }
            top  += Math.floor(Math.random() * 10)  - 5;
            if (top < 0)
            {
                top = 0;
            }
            img.style.left = left + "px";
            img.style.top  = top  + "px";

            // Re-trigger ourselves
            window.setTimeout(wanderAround, interval);
        }
    }
}

setTimeout( [上記のように] を使用するよりも、反復ごとに再スケジュールすることを好みsetIntervalますが、それは完全にあなたの呼び出しです。 を使用する場合はsetInterval、間隔ハンドルを覚えておいてください。setIntervalwindow.clearTimeout

上記は生の DOM/JavaScript です。jQuery には、もう少し単純にするためのヘルパーがいくつか用意されていますが、ご覧のとおり、なくても非常に簡単です。

于 2010-01-31T15:28:34.777 に答える