Question

我是javascript的初学者，我正在尝试制作一个非常简单的游戏。我知道我的代码不是最好的，但我想让它工作。我想停止功能nahoru（）或使其移动到另一个方式，在它触及页面底部/ 100％后，重复它。

<html>

<head>
    <script>
        function naloud() {
            var elem = document.getElementById("krtek");
            elem.style.top = '100%';
            var eleme = document.getElementById("krtek2");
            eleme.style.top = '100%';
            var elemen = document.getElementById("krtek3");
            elemen.style.top = '100%';
        }
        var pos = 100;
        var los = 0;

        function nahoru() {
            var elemend = document.getElementById("batn");
            elemend.style.opacity = '0';

            var elem = document.getElementById("krtek");
            var id = setInterval(frame, 30);

            function frame() {
                if (pos == 0) {
                    clearInterval(id);
                    document.write('<center>GAME OVER<br>YOUR SCORE: ' + skore +
                        '<br>Press F5 for restart.')

                } else {
                    pos = pos - 1;
                    elem.style.top = pos + '%';
                }
            }
        }
        var skore = 0;

        function pric() {
            skore++;
            document.getElementById("skore").innerHTML = "Skore: " + skore;
            elem.style.top = '+100%';
        }
    </script>
    <style>
        .prvni {
            position: absolute;
            width: 10%;
            height: 110%;
            left: 10%;
            background-color: brown;
        }
        
        .druhy {
            position: absolute;
            width: 10%;
            height: 110%;
            left: 45%;
            background-color: brown;
        }
        
        .treti {
            position: absolute;
            width: 10%;
            height: 110%;
            left: 80%;
            background-color: brown;
        }
    </style>
</head>

<body onload="naloud()">
    <button onclick="nahoru()" id="batn">START</button>
    <div id="skore">Skore: 0</div>
    <div id="krtek" class="prvni" onclick="pric()"></div>
    <div id="krtek2" class="druhy" onclick="pric()"></div>
    <div id="krtek3" class="treti" onclick="pric()"></div>
</body>

</html>

Answer 1

在nahoru函数之外声明id，喜欢这里

var pos = 100;
var los = 0;
var id = null;

在nahoru函数中设置间隔，像这样（很重要，从这里删除var）

id = setInterval(frame, 30);

现在清除pric函数的间隔像这样

function pric(elem) {
        skore++;
        clearInterval(id);
        document.getElementById("skore").innerHTML = "Skore: " + skore;
        elem.style.top = '+100%';
    }

工作https://jsfiddle.net/ee1bdL5k/

Answer 2

你需要在函数外部声明这个var，用于pric函数：

var elem, eleme, elemen;  
function naloud() {
    elem = document.getElementById("krtek");
    elem.style.top = '100%';
    eleme = document.getElementById("krtek2");
    eleme.style.top = '100%';
    elemen = document.getElementById("krtek3");
    elemen.style.top = '100%';
}

停止javascript“动画”onclick div

2 个答案: