JSFiddle - React, Tailwind, and code Playground

HTML

<form name='score'><input name='scorer' type='text' value='0' style='border:none; font-size:22pt; text-align:center;' readonly></form><p>

<p id="scorearea"><button style="font-size:32pt;width:100%;height:300px;">Prototype</button></p>

JavaScript

var prevX, prevY, score = 0;
$('button').mousemove(function(e) {
    if (prevX === undefined || prevY === undefined) {
        score += 1;
    } else {
        dx = Math.abs(e.pageX - prevX);
        dy = Math.abs(e.pageY - prevY);
        score += Math.floor(Math.sqrt(dx * dx + dy * dy));
    }
    prevX = e.pageX;
    prevY = e.pageY;
    console.log(score);
    $('input').val(score);
});