为什么我的分数会自动降低？

时间：2017-05-17 17:36:00

标签： javascript jquery html css jsfiddle

我有一些麻烦编写一个打鼹鼠的游戏（用于教育目的），并且有一个我似乎无法找到的错误.. 当你刚刚玩游戏，并且得分为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>

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%
}

1 个答案:

答案 0 :(得分：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>

相关问题
最新问题