javascript - 始终从给定坐标加载起点(DIV 位置)

Question

我正在尝试创建一个游戏，你必须在平台上移动球。游戏开始时，球会掉落在平台上，然后您可以使用箭头键移动它。这一切正常，没有问题。

游戏开始时，球落在黄色瓷砖上，如 my fiddle 所示。 (点击 1 开始)。该平台采用 javascript 构建，如下(针对级别 1 和 2):

var levels = [
    [
        [1,1,1,1,1],
        [1,1,1,1,1],
        [1,2,1,1,1]
    ],
    [
        [1,1,1,2,1],
        [1,1,1,1,1],
        [1,1,1,1,1]
    ]
];

其中 1 = 绿色瓷砖，0 = 无瓷砖，2 为黄色瓷砖。

为了让球落在黄色瓷砖上，我有以下代码:

go: function() {
            ball.reset((1*100+50),(2*100+50));
            start();
        }

其中 (1*100+50) 是黄色图 block 的 x 坐标，(2*100+50) 是 y 坐标。更好地解释一下:1 是向右 1 个格子 * 格子长度 + 50(+50 是将球扔到 div 中间)。一切都按预期进行。

但是如果我加载第 2 关(参见 fiddle ，单击 2)，我们会看到黄色方 block 移动了，但球仍然落在固定位置(参见 go: function )。这就是我需要解决的问题。

我希望在加载关卡时加载这些黄色图 block 坐标。在这种情况下，最简单的做法是将这些坐标添加到每个级别。我想到了这样的事情:

var levels = [
    {
        yellowTile : [1, 2],
             tiles : [ [1,1,1,1,1],
                       [1,1,1,1,1],
                       [1,2,1,1,1] ]
    },
    {
        yellowTile : [3, 0],
             tiles : [ [1,1,1,2,1],
                       [1,1,1,1,1],
                       [1,1,1,1,1] ]
    }
];

因此，go: 函数 将类似于:

go: function() {
            ball.reset((yellowTileX*100+50),(yellowTileY*100+50));
            start();
        }

但我没能成功完成这项工作。希望有人可以帮助我。

非常感谢

Answer 1

找到起始位置的最简单方法是在循环所有图 block 时保存它。我修改了您的脚本，以便通过将以下内容添加到 loadLevel 来保存起始位置:

    if(levels[level][i][j] === 2) {
        startPosition = {x: j, y: i};
    }

我在plane类中添加了函数getStartPosition()，这个函数可以在“go”函数中使用来获取飞机的起始x和y。这可用于将球重置为正确的 x 和 y

    go: function() {
        ball.reset((plane.getStartPosition().x*100+50),(plane.getStartPosition().y*100+50));
        start();
    }

查看我的修改版本:http://jsfiddle.net/BKEbL/7/