javascript - 如何在Javascript中确定鼠标从A点移动到B点的效率？

Question

我正在尝试创建一个分析程序，用于跟踪用户鼠标在网站上的移动并将数据存储在数据库中。这是我陷入困境的地方:

假设鼠标始终从屏幕中间开始，并且指示用户将其移动到特定元素，我如何确定该移动的效率和准确性。我需要记住从悬停开始到单击的持续时间，但我还想包括鼠标的悬停路径。

完美得分是在 x 秒内从 A 点到 B 点的完美直线，如何确定 2x 秒内弯曲路径的得分，或者在前往 Point 之前路径走向错误方向的情况乙？是否存在任何算法？

感谢您的帮助!

Answer 1

这是一个JSFiddle我创造的。单击“开始”框，然后单击“完成”框。希望这将帮助您入门。

var start = false;
var start_time,end_time;
var points = [];

$("#start").click(function() {
    start = true;
    points = [];
    start_time = Date.now();
});

$("#finish").click(function() {
    start = false;
    distance = travelledDistance();
    time = (Date.now() - start_time)/1000;

    var center_x_start = $("#start").offset().left + $("#start").width() / 2;
    var center_y_start = $("#start").offset().top + $("#start").height() / 2;
    var center_x_finish = $("#finish").offset().left + $("#finish").width() / 2;
    var center_y_finish = $("#finish").offset().top + $("#finish").height() / 2;

    var straight_distance = Math.round(Math.sqrt(Math.pow(center_x_finish - center_x_start, 2) + Math.pow(center_y_finish - center_y_start, 2)));

    $("#time").text(+time+"s");
    $("#distance").text(distance+"px");
    $("#straight_distance").text(straight_distance+"px");

});

$(document).mousemove(function( event ) {
    if(!start)
        return;
    points.push(event.pageX + "," + event.pageY);
});

function travelledDistance(){
    var distance = 0;

    for (i = 0; i < points.length - 1; i++) { 
        start_point = points[i].split(",");
        end_point = points[i+1].split(",");

        distance += Math.round(Math.sqrt(Math.pow(end_point[0] - start_point[0], 2) +                                Math.pow(end_point[1] - start_point[1], 2)));
    }

    return distance;
}

更新

我做了一个new version here 。现在您可以拖动目标来检查不同的结果。