0

私は、子供たちが質問に従って正しい数字を打たなければならない新しい「もぐらたたき」スタイルのゲームを作成しています。タイマーがあり、正解と不正解を数え、ゲームが開始されると、設定された時間にコンテナにランダムに表示される「キャラクター」と呼ばれる多数の div があります。

私は泡のテーマを与えられたので、彼らは私に「キャラクター」を下から始めて上にアニメーション化させたいと思っています. これを達成する方法はありますか？

現在、divをキャンバス内の位置にマップしているコードは次のとおりです...

function moveRandom(id) {

var cPos = $('#container').offset();
var cHeight = $('#container').height();
var cWidth = $('#container').width();

var pad = parseInt($('#container').css('padding-top').replace('px', ''));

var bHeight = $('#' + id).height();
var bWidth = $('#' + id).width();

maxY = cPos.top + cHeight - bHeight - pad;
maxX = cPos.left + cWidth - bWidth - pad;

minY = cPos.top + pad;
minX = cPos.left + pad;

newY = randomFromTo(minY, maxY);
newX = randomFromTo(minX, maxX);

$('#' + id).css({
    top: newY,
    left: newX
}).fadeIn(1000, function() {
    setTimeout(function() {
        $('#' + id).fadeOut(1000);
        window.cont++;
    }, 7000);
});

これが私の最新のフィドルです：http://jsfiddle.net/pUwKb/15/

4

1 に答える 1

0

以下の部分は、実際にCSS（したがって要素の位置）を設定します。

$('#' + id).css({
    top: newY,
    left: newX }).fadeIn(1000, function() {
    setTimeout(function() {
        $('#' + id).fadeOut(1000);
        window.cont++;
    }, 7000); });

移動変数を使用する関数moveを追加する必要があります。小さな例：

function move(movement, id) {

$('#' + id).css({
    top: this.css('top') + movement.y,
    left: this.css('left') + movement.x
}).fadeIn(1000, function() {
    setTimeout(function() {
        $('#' + id).fadeOut(1000);
        window.cont++;
    }, 7000);
});

}

移動中の場所は、{x：30、y：0}のようなオブジェクトである必要があります。これにより、右に30ピクセル移動します。それが役に立てば幸い！

于 2013-01-02T11:34:00.537 に答える