Question

我正在创建一个简单的迷宫游戏。当用户到达终点时，我希望触发一个事件，以便停止计时器并显示排行榜等。迷宫的工作方式是将子元素（图像）添加到每个迷宫中当用户单击键盘方向箭头时，将显示以下框：

<div class="box box36" id="box-36">
    <img class="character-img character-box" src="' + chosenCharacter + '">
</div>

在移动位置时，将从先前玩家位置移出的图像孩子。因此，创建了在迷宫中移动的角色的动画。

上方的框（框36）是迷宫中的终点线。我认为我需要为此使用某种事件侦听器，但是在查看了事件侦听器的完整列表之后，我无法确定要使用哪个侦听器，或者，如果这确实是解决问题的正确方法。

我尝试创建一个简单的if语句来测试box-36是否包含一个具有src图像的孩子，但是这样做的结果是，当用户到达终点时，什么也没有发生（没有任何内容打印到控制台上）测试）。我还尝试测试当前玩家位置是否等于终点线位置。仍然没有任何反应，也没有任何内容输出到控制台。我将在下面包含JS代码。

这是Javascript代码：

 playerFinished: (currentPos) => {
            if (currentPos === "36" || currentPos === 36) {
                console.log("finished");
}

在这里被称为：

playerCtrl.playerFinished(currentPos);

这是currentPos的来源：

    currentPos = naviCtrl.currentPosition(DOMstrings.boxes, DOMstrings);

这是currentPostion的来源：

currentPosition: (boxes) => {
            let playerPosition = document.querySelector(DOMstrings.boxOne);
            let res = null;
            boxes.forEach((curr) => {
                if (typeof curr.children[0] !== 'undefined' && curr.children[0]) {
                    splitID = curr.id.split('-');
                    res = splitID[1];
                    return;
                }
            });
            return res;

上面的currentPosition方法在我的html代码中创建了一系列的框，然后测试其中的哪一个框具有子元素（字符的图像）。然后，它将获取该ID并将其拆分，仅留下盒子的编号（即36）

Answer 1

所以事实证明，在playerFinished函数上未满足条件的原因是因为该方法是在页面加载时立即被执行的，因此，显然由于未满足玩家位置而未满足条件在终点位置（事后看来很明显）。

我现在已经在方向键事件侦听器中添加了playerFinished函数，以便当用户单击方向键盘键时，如果播放器位置在结束位置，则会调用playerFinished函数。

代码如下：

hugo_0.59.1_Linux-64bit.deb

将孩子添加到元素

1 个答案: