如何跟踪JavaScript画布上按键的时间？

Question

我有一个包含JavaScript <canvas>的程序，我正在尝试获取按下某个键的时间。

我正在使用的方法是获取按下按键的当前时间（以秒为单位）;像这样的东西：

if(keys[37]){
    temptime = new Date().getTime() / 1000;
    myarcher.x-=3;
    movetime+=((new Date().getTime() / 1000)-temptime);
}
console.log(movetime);

然而，在我的控制台中，即使我按下按键，它也会给我一个类似0.0699999...的值，即使我知道我按下按键至少10秒钟。

FIDDLE 的

var canvas = document.getElementById("canvas"),
                ctx = canvas.getContext("2d"),
                movetime = 0;
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight-50;
            var charh = charw = 80;
            function drawRect(x, y, height, width, color){
                ctx.fillStyle = color;
                ctx.beginPath();
                ctx.fillRect(x, y, width, height);
                ctx.fill();
            }
            function Archer(x, y){
                this.x = x;
                this.y = y;
                this.draw = function (){
                    updatePlayer(this.x+10, this.y, '#3B1000');
                    updatePlayer(this.x+15, this.y, '#3B1000');
                    updatePlayer(this.x+20, this.y, '#3B1000');
                    updatePlayer(this.x+5, this.y+5, '#A56122');
                    updatePlayer(this.x+10, this.y+5, '#A56122');
                    updatePlayer(this.x+15, this.y+5, '#A56122');
                    updatePlayer(this.x+20, this.y+5, '#A56122');
                    updatePlayer(this.x+25, this.y+5, '#A56122');
                    updatePlayer(this.x+5, this.y+10, '#A56122');
                    updatePlayer(this.x+15, this.y+10, '#A56122');
                    updatePlayer(this.x+25, this.y+10, '#A56122');
                    updatePlayer(this.x+5, this.y+15, '#A56122');
                    updatePlayer(this.x+10, this.y+15, '#A56122');
                    updatePlayer(this.x+15, this.y+15, '#A56122');
                    updatePlayer(this.x+20, this.y+15, '#A56122');
                    updatePlayer(this.x+25, this.y+15, '#A56122');
                    updatePlayer(this.x+15, this.y+20, '#A56122');
                    updatePlayer(this.x+10, this.y+10, '#FFFFFF');
                    updatePlayer(this.x+20, this.y+10, '#FFFFFF');
                    updatePlayer(this.x+5, this.y+25, '#00B89F');
                    updatePlayer(this.x+10, this.y+25, '#00B89F');
                    updatePlayer(this.x+15, this.y+25, '#00B89F');
                    updatePlayer(this.x+20, this.y+25, '#00B89F');
                    updatePlayer(this.x+25, this.y+25, '#00B89F');
                    updatePlayer(this.x+10, this.y+30, '#35BA2A');
                    updatePlayer(this.x+15, this.y+30, '#35BA2A');
                    updatePlayer(this.x+20, this.y+30, '#35BA2A');
                    updatePlayer(this.x+5, this.y+35, '#35BA2A');
                    updatePlayer(this.x+10, this.y+35, '#35BA2A');
                    updatePlayer(this.x+15, this.y+35, '#35BA2A');
                    updatePlayer(this.x+20, this.y+35, '#35BA2A');
                    updatePlayer(this.x+25, this.y+35, '#35BA2A');
                    updatePlayer(this.x+30, this.y+10, '#B50000');
                    updatePlayer(this.x+35, this.y+15, '#B50000');
                    updatePlayer(this.x+30, this.y+20, '#B50000');
                    updatePlayer(this.x+30, this.y+30, '#B50000');
                    updatePlayer(this.x+35, this.y+10, '#FFFFFF');
                    updatePlayer(this.x+30, this.y+15, '#FFFFFF');
                    updatePlayer(this.x+30, this.y+25, '#FFFFFF');
                }
            }
            var myarcher = new Archer(Math.round(canvas.width/2-charw/2), Math.round(canvas.height/2-charh/2)),
                keys = [],
                temptime;
            function update() {
                if(keys[37]){
                    temptime = new Date().getTime() / 1000;
                    myarcher.x-=3;
                    movetime+=((new Date().getTime() / 1000)-temptime);
                }
                if(keys[38]){
                    temptime = new Date().getTime() / 1000;
                    myarcher.y-=3;
                    movetime+=((new Date().getTime() / 1000)-temptime);
                }
                if(keys[39]){
                    temptime = new Date().getTime() / 1000;
                    myarcher.x+=3;
                    movetime+=((new Date().getTime() / 1000)-temptime);
                }
                if(keys[40]){
                    temptime = new Date().getTime() / 1000;
                    myarcher.y+=3;
                    movetime+=((new Date().getTime() / 1000)-temptime);
                }
                console.log(movetime);
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                myarcher.draw();
                setTimeout(update, 10);
            }
            function updatePlayer(x, y, color){
                ctx.fillStyle = color;
                ctx.beginPath();
                ctx.fillRect(x, y, 5, 5);
                ctx.fill();
            }
            update();
            document.body.addEventListener("keydown", function (e) {
                                       keys[e.keyCode] = true;
                                       });
           document.body.addEventListener("keyup", function (e) {
                                      keys[e.keyCode] = false;
                                      });

html, body {
                background:#000000;
            }
            canvas {
                background:#000000;
                position:fixed;
                left:0;
                top:0;
                width:100%;
                height:100%;
                
            }

<!DOCTYPE html>
    <body>
        <canvas id="canvas"></canvas>
    </body>

Answer 1

试试这个

var pressed = {};
window.onkeydown = function(e) {
 if ( pressed[e.which] )
    return;
 pressed[e.which] = e.timeStamp; 
}; 
window.onkeyup = function(e) { 
 if ( !pressed[e.which] ) 
     return; 
 var duration = ( e.timeStamp - pressed[e.which] ) / 1000; // Key "e.which" was pressed for "duration" seconds 
 alert(duration);
 pressed[e.which] = 0;
 };

Answer 2

开始计算keydown事件的时间并完成keyup。

var timeBefore;

document.body.addEventListener("keydown", function (e) {
    timeBefore = new Date().getTime();
});

document.body.addEventListener("keyup", function (e) {
    var holdTime = (new Date().getTime() - timeBefore) / 1000;
    console.log("Key was holded " + holdTime + " sec");
});