單擊未按預期工作的圖像

Question

我制作了一款游戲，您需要單擊屏幕左側的圖像，而您在另一側看不到圖像才能進入下一個級別。 出於某種原因，當您單擊左側的任何圖像時，您仍然 go 到下一個級別。 當您單擊錯誤的圖像時，它應該說游戲結束。 現在它僅在單擊空格時執行此操作。 有小費嗎？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Matching Game</title>
    <style>
      img {
        position: absolute;
     }  
     div {
       position: absolute;
       width: 500px;
       height: 500px;
     }
     #rightSide {
       left: 500px;
       border-left: 1px solid;
     }
   </style>
</head>
<body onload="generateFaces()">
<h1>Matching Game</h1>
<p>Click on the extra smiling face on the left.</p>

<div id="leftSide"></div>
<div id="rightSide"></div>

<script >
    let numberOfFaces = 5;
    const theLeftSide = document.querySelector("#leftSide");
    const theRightSide = document.querySelector("#rightSide");

    function generateFaces() {
        for (let i = 0; i < numberOfFaces; i++) {
            let face = document.createElement("img");
            face.src = 'images/smile.png';

            const randomTop = Math.floor(Math.random() * 400) + 1;
            const randomLeft = Math.floor(Math.random() * 400) + 1;

            face.style.top = randomTop + 'px';
            face.style.left = randomLeft + 'px';

            theLeftSide.appendChild(face);

            theLeftSide.lastChild.addEventListener('click', nextLevel);
            document.body.addEventListener('click', gameOver);
        }   

        const leftSideImages = theLeftSide.cloneNode(true);
        leftSideImages.removeChild(leftSideImages.lastChild);
        theRightSide.appendChild(leftSideImages); 
        
    function nextLevel(event) {
        event.stopPropagation();
        numberOfFaces += 5;

        while (theLeftSide.firstChild) {
            theLeftSide.removeChild(theLeftSide.firstChild);
        }

        while (theRightSide.firstChild) {
            theRightSide.removeChild(theRightSide.firstChild);
        }
        
        generateFaces();
    }

    function gameOver() {
        alert('Game Over!');
        document.body.removeEventListener('click', gameOver);
        theLeftSide.lastChild.removeEventListener('click', nextLevel);
    }
    
    } 
</script>
</body>
</html>

Answer 1

注意

for (let i = 0; i < numberOfFaces; i++) {
    let face = document.createElement("img");
    ...
    theLeftSide.appendChild(face);

    // you do this in every loop
    theLeftSide.lastChild.addEventListener('click', nextLevel);
}

把theLeftSide.lastChild.addEventListener('click', nextLevel); 外循環讓它工作

單擊未按預期工作的圖像

問題描述

1 個解決方案

解決方案1
2 已采納 2023-01-09 01:35:02

單擊未按預期工作的圖像

問題描述

1 個解決方案

解決方案1 2 已采納 2023-01-09 01:35:02

解決方案1
2 已采納 2023-01-09 01:35:02