javascript - 将子元素添加到元素时的事件触发器

Question

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

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

移动位置时，前一个玩家位置的子图像将被删除。从而创建 Angular 色在迷宫中移动的动画。

上面的方框(方框 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 代码中创建了一个框数组，然后测试其中哪一个具有子元素( Angular 色的图像)。然后，它获取该 ID 并将其拆分，只留下盒子的编号(即 36)

Answer 1

所以事实证明，playerFinished 函数上没有满足条件的原因是因为该方法在页面加载时立即执行，因此，显然条件没有得到满足，因为玩家的位置没有满足在终点位置(事后看来非常明显)。

我现在已将playerFinished函数添加到方向键事件监听器中，以便当用户单击方向键盘键时，如果玩家位置位于结束位置，则将调用playerFinished函数。

这是代码:

playerFinished: (currentPos) => {
            if (document.querySelector(DOMstrings.characterImg).parentNode.id === 36 || document.querySelector(DOMstrings.characterImg).parentNode.id === "box-36") {

                console.log("finished");
            }
        }, 


document.addEventListener("keydown", moveCharacter = (e) => {
                    let currentPos = naviCtrl.currentPosition(DOMstrings.boxes, DOMstrings);
                    document.querySelector(DOMstrings.timer).innerHTML = "";

                    const key_code = e.which || e.keyCode;
                    switch (key_code) {
                        case 37: //left arrow key
                            naviCtrl.moveLeft(currentPos, chosenCharacter);
                            playerCtrl.playerFinished();
                            break;
                        case 38: //Up arrow key
                            naviCtrl.moveUp(currentPos, chosenCharacter);
                            playerCtrl.playerFinished();
                            break;
                        case 39: //right arrow key
                            naviCtrl.moveRight(currentPos, chosenCharacter);
                            playerCtrl.playerFinished();
                            break;
                        case 40: //down arrow key
                            naviCtrl.moveDown(currentPos, chosenCharacter);
                            playerCtrl.playerFinished();
                            break;
                    }
                });