Question

我是新来的JV / web-dev的新手，并试图在JS中创建一个轻量级的反应游戏并遇到一些问题：

我试图在点击一个按钮后初始化游戏，但我发现在页面刷新后游戏会自动启动？我在脚本底部调用了按钮fxn“time_init（）”，但它仍然自行加载？
如何让游戏只进行15秒的设定时间？它继续......？我觉得setTimeout方法缺乏或我使用它错了？
最后，如果我想计算一个方块被点击的次数而不是一个圆圈并输出它们之后的反应时间，那么最好的方法是什么？我正在考虑创建一个while循环，它只计算在玩游戏时点击一个正方形的次数..

这是我到目前为止的代码：

<input type="button" value="Start" onclick="time_init()" />

<p class="bold">Your time: <span id="time">0</span>s</p>

<div id="box"></div>

<script type="text/javascript"> 

var clickedTime; var createdTime; var reactionTime;

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color +=letters[Math.round(Math.random() * 15)];
    }
    return color;
}

function time_init() {
setTimeout('makeBox()', 1000);}


function makeBox() {

    var time=Math.random();

    time=time*1500;

    setTimeout(function() {
        if (Math.random()>0.5) {
            document.getElementById("box").style.borderRadius="100px";
        } else {
            document.getElementById("box").style.borderRadius="";
        }

        var top=Math.random();
        top=top*500;
        var left=Math.random();
        left=left*800;

        document.getElementById("box").style.top=top+"px";

        document.getElementById("box").style.left=left+"px";

        document.getElementById("box").style.backgroundColor=getRandomColor();

        document.getElementById("box").style.display="block";

        createdTime=Date.now();

    }, time);

}

document.getElementById("box").onclick=function() {

    clickedTime=Date.now();

    reactionTime= (clickedTime - createdTime)/1000;

    document.getElementById("time").innerHTML=reactionTime;

    this.style.display="none";

    makeBox();

}

time_init();

Answer 1

您在代码末尾显式调用time_init();。这将立即启动，并在1秒后拨打makebox()。

如果你想在15秒后关闭它，请创建一个标志变量和另一个超时以在此之后翻转它。然后，只要你做任何事情来确定你是否继续这样做，你就检查那个标志变量。

var isRunning = true;
setTimeout( function() { isRunning=false; }, 15000 );

document.getElementById("box").onclick=function() {

    clickedTime=Date.now();

    reactionTime= (clickedTime - createdTime)/1000;

    document.getElementById("time").innerHTML=reactionTime;

    this.style.display="none";

    if ( isRunning ) {
        makeBox();
    }
}

Javascript中的setTimeout冲突

1 个答案: