Question

我正在创造一种新的“whack-a-mole”风格游戏，孩子们必须根据问题找到正确的数字。到目前为止它确实很顺利，我有一个计时器，计算正确和错误的答案，当游戏开始时，我有一些称为“字符”的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/

Answer 1

下面的部分实际上设置了CSS（以及元素的位置）。

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

您应该添加使用移动变量的函数移动。小例子：

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像素。希望它有所帮助！

定义开始完成头寸

1 个答案: