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 回答