javascript - "Red or blue"点击游戏得分计数器

Question

我一直在尝试制作一个游戏，其中有一个显示红色或蓝色的大方 block ，用户必须相应地单击“v”或“b”。我最终以一种不令人满意和不专业的方式完成了这一部分(如果你能指导我找到更好的方法，那就太好了)你可以在这里看到我到目前为止所做的事情:http://www.ysk.co.za/red-blue/

我的问题是我无法记录分数或耗时

我的 JavaScript 是:

function key(e){
    var code=e.keyCode? e.keyCode : e.charCode;
    var random = Math.random();
    if (random <= 0.5) {
        $("#RedBlue").css("background-color","red")
    } else {
        $("#RedBlue").css("background-color","blue")
    }

    if (code === 86) {
        $("#red").css("background","#ff4e00");
        setTimeout(function(){$("#red").css("background-color","red")},500);
        var color ="rgb(255, 0, 0)";
    } else if (code === 66) {
        $("#blue").css("background-color","#006bff");
        setTimeout(function(){$("#blue").css("background-color","blue")},500);
        color = "rgb(0, 0, 255)";
    }


        var i = 0;
        if ($("#RedBlue").css("background-color") != color) {
            alert("you lost, you got a total of: "+i+"! click ok to restart");
            document.location.reload(true);
        } else if ($("#RedBlue").css("background-color") == color) {
            $("#score").prepend("Correct<br>");
            i+=200;
        }


}

我的 HTML 是:

<h1>Red or blue</h1>
<h3>Concentration game</h3>
<div id="RedBlue"></div>
<div id="red" style="background:red;"></div>
<div id="blue" style="background:blue;"></div><div class="clear"></div>
Click "v" if the big square is red and "b" if the big square is blue<br>
<input type="text" size="2" maxlength="1" onkeyup="key(event); this.select()" />
<div id="score"></div>

我尝试使用 var i 作为每次用户正确时的计数器，并在用户错误时显示该数字，但是“i”不会增加。

记分的最佳方法是什么

PS:最终我希望记分方法是每秒的点击率。一旦我能够计算出点击次数和秒数，这将是基本的数学——“点击次数除以秒数”

Answer 1

将 var i = 0 放在函数之外。

如果你把它放在你的函数中，当用户做出错误的选择时它总是0。

要获取每秒的点击次数，您可以这样做

var i = 0;
//add a click counter (you could also use i, but as you increment it by 200...)
var click = 0;
//startTime
var startTime =new Date().getTime() / 1000; //this will count the time as soon as page is loaded. You may prefer to start after first click.

    function key(e){
        click +=1;
        var code=e.keyCode? e.keyCode : e.charCode;
        var random = Math.random();
        if (random <= 0.5) {
            $("#RedBlue").css("background-color","red")
        } else {
            $("#RedBlue").css("background-color","blue")
        }

        if (code === 86) {
            $("#red").css("background","#ff4e00");
            setTimeout(function(){$("#red").css("background-color","red")},500);
            var color ="rgb(255, 0, 0)";
        } else if (code === 66) {
            $("#blue").css("background-color","#006bff");
            setTimeout(function(){$("#blue").css("background-color","blue")},500);
            color = "rgb(0, 0, 255)";
        }



            if ($("#RedBlue").css("background-color") != color) {
                //calculate the elapsed time  = now - startTime
                var timeElapsed =(new Date().getTime() / 1000) -startTime;
                alert("you lost, you got a total of: "+i+"! click ok to restart");
                //simple click / second calculation
                alert('nb of clicks / seconds : ' + click / timeElapsed);
                alert('total time in seconds : ' + timeElapsed);
                document.location.reload(true);
            } else if ($("#RedBlue").css("background-color") == color) {
                $("#score").prepend("Correct<br>");
                i+=200;
            }
    }

编辑

按下第一个键后启动“计时器”:

var i = 0; 
var click = 0;
var startTime;

function key(e) {
if (click == 0) startTime = new Date().getTime() / 1000;
click +=1;
//etc.
}

参见jsFiddle