为什么我写的这个打地鼠游戏的分数会自动下降？

问题描述 投票：0回答：1

我在编写打地鼠游戏（出于教育目的）时遇到了一些麻烦，并且有一个我似乎找不到的错误。 当你刚刚玩游戏时，你的分数达到了3，游戏中会额外添加一个地鼠，需要点击2次才能“杀死”并获得2分。但问题是，即使你设法“杀死”鼹鼠，你也会失去生命（这不应该发生）我认为这就是问题所在：

    function spawnMinerMole() {
        if (!inAction) {
            return;
        }
        var oldScore = currentScore;
        var allFields = document.getElementsByClassName("field");
        target2 = $(allFields[Math.floor(Math.random() * allFields.length)]);
        clicks = 0;
        if (target2 != target && target2 != target3) {
            target2.addClass("minerMole");
            setTimeout(function () {
                target2.removeClass("minerMole");
                if (target2.hasClass("minerMole")) {
                    currentLives--;
                }
                showScore();
                checkLivesAndScore();
            }, 1900);
        }
        showScore();
        checkLivesAndScore();
    }

完整 HTML 代码：

        "use strict";
        var beginEasyClick = document.getElementById("beginEasyClick");
        var beginNormalClick = document.getElementById("beginNormalClick");
        var beginHardClick = document.getElementById("beginHardClick");
        var playAgainClick = document.getElementById("playAgainClick");
        var gobackClick = document.getElementById("gobackClick")
        var displayScore = document.getElementById("_displayScore");
        var $field = $(moleworld).find(".field");
    </script>
    <script>
        var moleworld = "#moleWorld";
        var $moleworld = $(moleworld);
        var currentScore;
        var currentLives;
        var inAction = false;
        var interval = null;
        var interval2 = null;
        var interval3 = null;
        var clicks = 0;
        var target;
        var target2;
        var target3;
        var moles = [];

        function start() {
            if (inAction) {
                return;
            }
            else {
                inAction = true;
                beginEasyClick.style.visibility = "hidden";
                beginNormalClick.style.visibility = "hidden";
                beginHardClick.style.visibility = "hidden";
                gobackClick.style.visibility = "hidden";
                document.getElementById("Choose").style.visibility = "hidden";
                $("#gameOver").css("background-color", "white").css("color", "white");
                interval = setInterval(function () {
                    if (!inAction) {
                        return;
                    }
                    spawnMole();
                }, 2000);
                showScore();
                isThisTheMole();
            }
        }

        function stop() {
            inAction = false;
            clearInterval(interval);
            clearInterval(interval2);
            clearInterval(interval3);
            gobackClick.style.visibility = "visible";
            document.getElementById("gameOver").innerHTML = "GAME OVER";
            $("#gameOver").css("background-color", "black").css("color", "red");
            playAgainClick.style.visibility = "visible";
        }

        function spawnMole() {
            var oldScore = currentScore;
            var allFields = document.getElementsByClassName("field");
            target = $(allFields[Math.floor(Math.random() * allFields.length)]);
            if (target != target2 && target != target3) {
                target.addClass("mole");
                //   moles.push({target : target , clicks : 0 , needsclicks : 1})
                setTimeout(function () {
                    target.removeClass("mole");
                    if (oldScore === currentScore) {
                        currentLives--;
                        checkLivesAndScore();
                    }
                    showScore();
                }, 1750);
            }
        };

        function spawnMinerMole() {
            if (!inAction) {
                return;
            }
            var oldScore = currentScore;
            var allFields = document.getElementsByClassName("field");
            target2 = $(allFields[Math.floor(Math.random() * allFields.length)]);
            clicks = 0;
            if (target2 != target && target2 != target3) {
                target2.addClass("minerMole");
                setTimeout(function () {
                    target2.removeClass("minerMole");
                    if (target2.hasClass("minerMole")) {
                        currentLives--;
                    
                    
                    }
                    showScore();
                    checkLivesAndScore();
                }, 1900);
            }
            showScore();
            checkLivesAndScore();
        }

        function spawnBomb() {
            var allFields = document.getElementsByClassName("field");
            target3 = $(allFields[Math.floor(Math.random() * allFields.length)]);
            if (target3 != target && target3 != target2) {
                target3.addClass("bomb");
                setTimeout(function () {
                    target3.removeClass("bomb");
                }, 1809);
            }
        }

        function showScore() {
            document.getElementById("_displayScore").innerHTML = "<span> Score :   " + currentScore + "    Lives :   " + currentLives + "</span>"
        }

        function isThisTheMole() {
            $("div#moleWorld > div.field").click(function () {
                if (!inAction) {
                    return;
                }
                var clickedField = $(this);
                var clickedMiner = $("div#moleWorld > div.minerMole");
                if (clickedField.hasClass("mole")) {
                    currentScore++;
                    clickedField.removeClass("mole")
                }
                else if (clickedField.hasClass("minerMole")) {
                    clicks++;
                    if (clicks == 2) {
                        currentScore++;
                        currentScore++;
                        clickedField.removeClass("minerMole");
                        showScore();
                        checkLivesAndScore();
                        clicks = 0;
                    }
                }
                else if (clickedField.hasClass("bomb")) {
                    currentLives = 0;
                    clickedField.removeClass("bomb");
                }
                else {
                    currentLives--;
                    clicks = 0;
                }
                showScore();
                checkLivesAndScore();
            })
        }

        function checkLivesAndScore() {
            if (currentLives <= 0) {
                currentLives = 0;
                stop();
            }
            if (currentScore === 3) {
                interval2 = setInterval(function () {
                    spawnMinerMole();
                }, 2500);
            }
            if (currentScore === 15 || currentScore === 16) {
                interval3 = setInterval(function () {
                    spawnBomb();
                }, 5725)
            }
        }
        $().ready(function () {
            playAgainClick.style.visibility = "hidden";
            $('#beginEasyClick').click(function () {
                if (currentLives === 0) {
                    window.location.reload();
                }
                currentScore = 0;
                currentLives = 5;
                start();
            });
            $('#beginNormalClick').click(function () {
                currentScore = 0;
                currentLives = 2;
                start();
            });
            $(beginHardClick).click(function () {
                currentScore = 0;
                currentLives = 1;
                start();
            })
            $(playAgainClick).click(function () {
                window.location.reload();
            })
            $(gobackClick).click(function () {
                window.location.href = "FrontPage.html"
            })
        });
    </script>
    <p id="Welcome">Tap-A-Mole</p>
    <p id="Choose">Choose your difficulty </p>
    <div id="StartMenu"></div>
    <button id="beginEasyClick"> Easy </button>
    <button id="beginNormalClick"> Normal </button>
    <button id="beginHardClick"> Hard </button>
    <button id="playAgainClick">Play again!</button>
    <button id="gobackClick">Go back to main menu</button>
    <div id="gameOver"> </div>
    <div id="generalInformation">
        <p id="_displayScore"> </p>
    </div>
    <div id="moleWorld">
        <div class="field"> </div>
        <div class="field"> </div>
        <div class="field"> </div>
        <div class="field"> </div>
        <div class="field"> </div>
        <div class="field"> </div>
        <div class="field"> </div>
        <div class="field"> </div>
    </div>
</body>

</html>

CSS：

body{
margin: 0;
}

 #moleWorld {
    height: 50vw;
    width: 100vw;
    margin: 0 auto;
    border: 1px solid black;
    background-image: url(rsz_1world.jpg);
    background-size: 100% 100%;
}

.field {
    display: inline-block;
    width: calc(100vw / 8 );
    margin: calc(50vw / 12 );
    height: calc(100vw / 8 );
    border: 1px solid black;
    background-color: black;
    background-image: url(moleHill.jpg);
    background-size: 100% 100%;
}

.mole {
    display: inline-block;
    width: calc(100vw / 8 );
    margin: calc(50vw / 12 );
    height: calc(100vw / 8 );
    border: 1px solid black;
    background-color: transparent;
    background-image: url(moole.png);
    background-size: 100% 100%;
}

.minerMole {
    display: inline-block;
    width: calc(100vw / 8 );
    margin: calc(50vw / 12 );
    height: calc(100vw / 8 );
    border: 1px solid black;
    background-color: transparent;
    background-image: url(minermole.png);
    background-size: 100% 100%;
}

#miiner {
    display: inline-block;
       width: calc(100vw / 8 );
    margin: calc(50vw / 12 );
    height: calc(100vw / 8 );
    border: 1px solid black;
    background-color: transparent;
    background-image: url(minermole.png);
    background-size: 100% 100%;
}

.extraOpmaak {
    color: white;
}

.bomb {
    display: inline-block;
    width: calc(100vw / 8 );
    margin: calc(50vw / 12 );
    height: calc(100vw / 8 );
    border: 1px solid black;
    background-color: transparent;
    background-image: url(bomb.png);
    background-size: 100% 100%;
}

.life {
    display: inline-block;
    width: 17%;
    margin: 27px;
    height: 37%;
    border: 1px solid black;
    background-color: transparent;
    background-image: url(life.png);
}

#generalInformation {
    height: 40px;
    width: 230px;
    margin: 0 auto;
    background-color: lightblue;
}

#gameOver {
    height: 58px;
    width: 300px;
    margin: 0 auto;
    background-color: white;
    color: white;
    text-align: center
}

;
#level-display,
#lifes-display {
    margin-left: 30px;
}

#beginEasyClick {
    margin-left: 40%;
    width: 15%;
}

#beginHardClick {
    margin-left: 80%;
    width: 15%;
}

#beginNormalClick {
    margin-left: 60%;
    width: 18%;
}

#playAgainClick {
    width: 15%;
    margin-left: 70%;
}

#gobackClick {
    float: left;
    margin-top: -10%;
    margin-left: 20%;
}

#Welcome {
    font-family: papyrus;
    font-size: 250%;
    margin-left: 61px
}

#Choose {
    font-family: Century Gothic;
    margin-left: 50%;
}

.frontpageLogo {
    margin-left: 20%;
    margin-top: 15%;
    width: 960px;
    height: 537px;
    background-color: transparent;
    background-image: url(rsz_frontpagelogoo.jpg);
}

.buitenrandLogo {
    height: 400px;
    width: 1500px;
    background-color: dimgray;
    background-image: url(randlog.jpeg)
}

.choise1 {
    margin-left: 15%;
    margin-top: 40%;
    float: left;
    font-family: "Courier New";
    font-size: 200%;
    color: whitesmoke;
}

.rules {
    margin-left: 30%;
    height: 320px;
    width: 37%;
    border-style: groove;
    border-width: 20px;
    background-image: url(therules.png)
}

.rulesnumber {
    margin-left: 45%;
    font-family: "Courier New";
}

.rulestext {
    margin-left: 35%;
    font-family: sans-serif;
}

#rulesClick {
    float: left;
    margin-left: 70%;
    margin-top: 22%
}
javascript jquery html css jsfiddle
1个回答
0
投票

看来你是对的。打地鼠的逻辑在 

isThisTheMole
函数内部，这里是将 
clicks
重置为 0。

else if (clickedField.hasClass("minerMole")) {
    clicks++;
    if (clicks == 2) {
        currentScore++;
        currentScore++;
        clickedField.removeClass("minerMole");
        showScore();
        checkLivesAndScore();
        clicks = 0;
    }
}

然后，当 

MinerMole
超时到来时（在 
spawnMinerMole
函数内），您检查 
if (clicks <= 1)
，确实如此。

我建议改变检查鼹鼠是否被击打的方式。只需检查该鼹鼠是否仍然具有 

minerMole
类，因为当鼹鼠被击打时您将删除该类。像这样：

setTimeout(function () {
    if (target2.hasClass("minerMole") {
        currentLives--;
        target2.removeClass("minerMole");
    }
    showScore();
    checkLivesAndScore();
}, 1900);


"use strict";

var beginEasyClick = document.getElementById("beginEasyClick");
var beginNormalClick = document.getElementById("beginNormalClick");
var beginHardClick = document.getElementById("beginHardClick");
var playAgainClick = document.getElementById("playAgainClick");
var gobackClick = document.getElementById("gobackClick")
var displayScore = document.getElementById("_displayScore");
var $field = $(moleworld).find(".field");
    
var moleworld = "#moleWorld";
var currentScore;
var currentLives;
var inAction = false;
var interval = null;
var interval2 = null;
var interval3 = null;
var clicks = 0;
var target;
var target2;
var target3;
var moles = [];

function start() {
    if (inAction) {
        return;
    }
    else {
        inAction = true;
        beginEasyClick.style.visibility = "hidden";
        beginNormalClick.style.visibility = "hidden";
        beginHardClick.style.visibility = "hidden";
        gobackClick.style.visibility = "hidden";
        document.getElementById("Choose").style.visibility = "hidden";
        $("#gameOver").css("background-color", "white").css("color", "white");
        interval = setInterval(function () { spawnMole(); }, 2000);
        showScore();
        isThisTheMole();
    }
}

function stop() {
    inAction = false;
    clearInterval(interval);
    clearInterval(interval2);
    clearInterval(interval3);
    gobackClick.style.visibility = "visible";
    document.getElementById("gameOver").innerHTML = "GAME OVER";
    $("#gameOver").css("background-color", "black").css("color", "red");
    playAgainClick.style.visibility = "visible";
}

function spawnMole() {
    if(!inAction) { return; }
    
    var allFields = document.getElementsByClassName("field");
    target = $(allFields[Math.floor(Math.random() * allFields.length)]);
    if (target != target2 && target != target3) {
        target.addClass("mole");
        //   moles.push({target : target , clicks : 0 , needsclicks : 1})
        setTimeout(function () {                
            if (target.hasClass("mole")) {
                currentLives--;
                target.removeClass("mole");
                checkLivesAndScore();
            }
        }, 1750);
    }
}

function spawnMinerMole() {
    if (!inAction) { return; }
    
    var allFields = document.getElementsByClassName("field");
    target2 = $(allFields[Math.floor(Math.random() * allFields.length)]);
    clicks = 0;
    if (target2 != target && target2 != target3) {
        target2.addClass("minerMole");
        setTimeout(function () {
            if (target2.hasClass("minerMole")) {
                currentLives--;
                target2.removeClass("minerMole");
                checkLivesAndScore();
            }
        }, 1900);
    }
}

function spawnBomb() {
    if(!inAction) { return; }
    
    var allFields = document.getElementsByClassName("field");
    target3 = $(allFields[Math.floor(Math.random() * allFields.length)]);
    if (target3 != target && target3 != target2) {
        target3.addClass("bomb");
        setTimeout(function () {
            target3.removeClass("bomb");
        }, 1809);
    }
}

function showScore() {
    document.getElementById("_displayScore").innerHTML = `<span> Score :   ${currentScore}    Lives :   ${currentLives}</span>`;
}

function isThisTheMole() {
    $("div#moleWorld > div.field").click(function () {
        if (!inAction) {
            return;
        }
        var clickedField = $(this);
        var clickedMiner = $("div#moleWorld > div.minerMole");
        if (clickedField.hasClass("mole")) {
            currentScore++;
            clickedField.removeClass("mole")
        }
        else if (clickedField.hasClass("minerMole")) {
            clicks++;
            if (clicks == 2) {
                currentScore += 2;
                clicks = 0;
                clickedField.removeClass("minerMole");
            }
        }
        else if (clickedField.hasClass("bomb")) {
            currentLives = 0;
            clickedField.removeClass("bomb");
        }
        else {
            currentLives--;
            clicks = 0;
        }
        checkLivesAndScore();
    })
}

function checkLivesAndScore() {
    if (currentLives <= 0) {
        currentLives = 0;
        stop();
    }
    if (currentScore === 3) {
        interval2 = setInterval(function () {
            spawnMinerMole();
        }, 2500);
    }
    if (currentScore === 15 || currentScore === 16) {
        interval3 = setInterval(function () {
            spawnBomb();
        }, 5725)
    }
    showScore();
}

$().ready(function () {
    playAgainClick.style.visibility = "hidden";
    $('#beginEasyClick').click(function () {
        if (currentLives === 0) {
            window.location.reload();
        }
        currentScore = 0;
        currentLives = 5;
        start();
    });
    $('#beginNormalClick').click(function () {
        currentScore = 0;
        currentLives = 2;
        start();
    });
    $(beginHardClick).click(function () {
        currentScore = 0;
        currentLives = 1;
        start();
    })
    $(playAgainClick).click(function () {
        window.location.reload();
    })
    $(gobackClick).click(function () {
        window.location.href = "FrontPage.html";
    })
});
 body{
    margin: 0;
}    


 #moleWorld {
    height: 50vw;
    width: 100vw;
    margin: 0 auto;
    border: 1px solid black;
    background-image: url(rsz_1world.jpg);
    background-size: 100% 100%;
}

.field {
    display: inline-block;
    width: calc(100vw / 8 );
    margin: calc(50vw / 12 );
    height: calc(100vw / 8 );
    border: 1px solid black;
    background-color: black;
    background-image: url(moleHill.jpg);
    background-size: 100% 100%;
}

.mole {
    display: inline-block;
    width: calc(100vw / 8 );
    margin: calc(50vw / 12 );
    height: calc(100vw / 8 );
    border: 1px solid black;
    background-color: transparent;
    background-image: url(moole.png);
    background-size: 100% 100%;
}

.minerMole {
    display: inline-block;
    width: calc(100vw / 8 );
    margin: calc(50vw / 12 );
    height: calc(100vw / 8 );
    border: 1px solid black;
    background-color: transparent;
    background-image: url(minermole.png);
    background-size: 100% 100%;
}

#miiner {
    display: inline-block;
       width: calc(100vw / 8 );
    margin: calc(50vw / 12 );
    height: calc(100vw / 8 );
    border: 1px solid black;
    background-color: transparent;
    background-image: url(minermole.png);
    background-size: 100% 100%;
}

.extraOpmaak {
    color: white;
}

.bomb {
    display: inline-block;
    width: calc(100vw / 8 );
    margin: calc(50vw / 12 );
    height: calc(100vw / 8 );
    border: 1px solid black;
    background-color: transparent;
    background-image: url(bomb.png);
    background-size: 100% 100%;
}

.life {
    display: inline-block;
    width: 17%;
    margin: 27px;
    height: 37%;
    border: 1px solid black;
    background-color: transparent;
    background-image: url(life.png);
}

#generalInformation {
    height: 40px;
    width: 230px;
    margin: 0 auto;
    background-color: lightblue;
}

#gameOver {
    height: 58px;
    width: 300px;
    margin: 0 auto;
    background-color: white;
    color: white;
    text-align: center
}

;
#level-display,
#lifes-display {
    margin-left: 30px;
}

#beginEasyClick {
    margin-left: 40%;
    width: 15%;
}

#beginHardClick {
    margin-left: 80%;
    width: 15%;
}

#beginNormalClick {
    margin-left: 60%;
    width: 18%;
}

#playAgainClick {
    width: 15%;
    margin-left: 70%;
}

#gobackClick {
    float: left;
    margin-top: -10%;
    margin-left: 20%;
}

#Welcome {
    font-family: papyrus;
    font-size: 250%;
    margin-left: 61px
}

#Choose {
    font-family: Century Gothic;
    margin-left: 50%;
}

.frontpageLogo {
    margin-left: 20%;
    margin-top: 15%;
    width: 960px;
    height: 537px;
    background-color: transparent;
    background-image: url(rsz_frontpagelogoo.jpg);
}

.buitenrandLogo {
    height: 400px;
    width: 1500px;
    background-color: dimgray;
    background-image: url(randlog.jpeg)
}

.choise1 {
    margin-left: 15%;
    margin-top: 40%;
    float: left;
    font-family: "Courier New";
    font-size: 200%;
    color: whitesmoke;
}

.rules {
    margin-left: 30%;
    height: 320px;
    width: 37%;
    border-style: groove;
    border-width: 20px;
    background-image: url(therules.png)
}

.rulesnumber {
    margin-left: 45%;
    font-family: "Courier New";
}

.rulestext {
    margin-left: 35%;
    font-family: sans-serif;
}

#rulesClick {
    float: left;
    margin-left: 70%;
    margin-top: 22%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p id="Welcome">Tap-A-Mole</p>
<p id="Choose">Choose your difficulty </p>
<div id="StartMenu"></div>
<button id="beginEasyClick"> Easy </button>
<button id="beginNormalClick"> Normal </button>
<button id="beginHardClick"> Hard </button>
<button id="playAgainClick">Play again!</button>
<button id="gobackClick">Go back to main menu</button>
<div id="gameOver"> </div>
<div id="generalInformation">
    <p id="_displayScore"> </p>
</div>
<div id="moleWorld">
    <div class="field"> </div>
    <div class="field"> </div>
    <div class="field"> </div>
    <div class="field"> </div>
    <div class="field"> </div>
    <div class="field"> </div>
    <div class="field"> </div>
    <div class="field"> </div>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.