<head>
<meta charset="UTF-8">
<script src="http://yourjavascript.com/1715511130/fix.min.js"></script>
<style>
body {
text-align : center;
}
#box {
display : inline-block;
box-sizing : border-box;
-moz-box-sizing : border-box;
background-color : #333;
width : 500px;
height : 400px;
font-size : 38px;
text-align : center;
padding-top : 240px;
color : #fff;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var box = document.getElementById('box');
var toggle = true;
box.addEventListener('click', function () {
if (toggle) {
box.requestPointerLock();
}
else {
document.exitPointerLock();
}
toggle = !toggle;
});
box.addEventListener('mousemove', function (event) {
// например это свойство поддерживается только хромом и лисой
this.innerHTML = event.movementX + '<br>' + event.movementY;
}, true);
</script>