定義開始到結束的位置

我正在創建一個新的「重擊 - 鼴鼠」風格的遊戲，孩子們必須根據問題點擊正確的數字。到目前爲止，它確實發展得很好，我有一個計時器，計算正確和錯誤的答案，當遊戲開始時，我有一些名爲「字符」的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/

來源

2013-01-02 Milo-J

低於實際設置的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-02 11:34:00

好的謝謝。我希望他們向上移動，儘管任何想法將如何實現@Luigi van der pal –

var movement = {x：0，y：-5} 也許你可以設置一個小提琴......所以我可以進一步幫助 –

定義開始到結束的位置

回答

相關問題