mirror of
https://bitbucket.org/siakitem/my-pi.git
synced 2026-08-28 08:35:57 +00:00
35 lines
1.6 KiB
HTML
35 lines
1.6 KiB
HTML
<!doctype html>
|
|
<meta charset="utf-8">
|
|
<title>04 mouse entropy</title>
|
|
<link rel="stylesheet" href="../_style.css">
|
|
<script src="../_lib.js"></script>
|
|
<body>
|
|
<main>
|
|
<p>Goal: click the green button after moving the mouse in an organic path. Page requires
|
|
≥15 <code>mousemove</code> events with non-zero <code>movementX/Y</code> variance before the click.</p>
|
|
<button id="go" style="padding:20px 32px;font-size:18px;background:#1f7a1f;color:#fff;border:0;border-radius:6px">Click me</button>
|
|
</main>
|
|
<script>
|
|
Challenge.init({
|
|
id: "mouse-entropy",
|
|
instructions: "click the button after natural mouse movement",
|
|
});
|
|
const moves = [];
|
|
window.addEventListener("mousemove", (e) => {
|
|
moves.push({ x: e.clientX, y: e.clientY, mx: e.movementX, my: e.movementY, t: e.timeStamp });
|
|
if (moves.length > 200) moves.shift();
|
|
});
|
|
document.getElementById("go").addEventListener("click", (e) => {
|
|
if (moves.length < 15) return Challenge.fail(`only ${moves.length} mousemove events before click`);
|
|
const dx = moves.map(m => Math.abs(m.mx)).reduce((a,b)=>a+b,0);
|
|
const dy = moves.map(m => Math.abs(m.my)).reduce((a,b)=>a+b,0);
|
|
if (dx + dy < 50) return Challenge.fail(`movement deltas tiny: dx=${dx}, dy=${dy}`);
|
|
// Detect "teleport then click" — all moves clustered at the button.
|
|
const r = document.getElementById("go").getBoundingClientRect();
|
|
const inside = moves.filter(m => m.x>=r.left && m.x<=r.right && m.y>=r.top && m.y<=r.bottom).length;
|
|
if (inside === moves.length) return Challenge.fail("all mousemoves inside target rect (teleport)");
|
|
Challenge.pass(`${moves.length} moves, |dx|+|dy|=${dx+dy}, ${inside} inside target`);
|
|
});
|
|
</script>
|
|
</body>
|