Question

我一直在尝试制作一个游戏，其中有一个显示红色或蓝色的大方块，用户必须相应地点击“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

“红色或蓝色”点击游戏得分计数器

1 个答案: