JS - Запретить мышь покидать экран

Мне нужно, чтобы курсор не выходил из окна. Я читал, что это невозможно, но я уже сделал это с помощью экспорта WebGL из проекта Unity. Сначала вам нужно было щелкнуть холст, затем браузер покажет вам уведомление о том, что вы должны нажать «escape», чтобы выйти и вернуть курсор. Поскольку холст Unity WebGL может это сделать, я предполагаю, что это можно сделать без Unity?


javascript unity3d css unity-webgl
person TheCat    schedule 23.08.2018    source источник
comment
Даже если это возможно, просто не делайте этого, поскольку это неудобно для пользователя, если для этого нет веской причины, например в играх.   -  person Timo    schedule 23.08.2018
comment
На самом деле это для игры.   -  person TheCat    schedule 23.08.2018

Ответы (1)


arrow_upward
2
arrow_downward

Используйте HTML5 Pointer Lock API

https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API

Не мой пример кода ниже, все кредиты

https://github.com/mdn/dom-examples/tree/master/pointer-lock

HTML

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Pointer lock demo</title>
  <link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
  <div class="information">
    <h1>Pointer lock demo</h1>

    <p>This demo demonstrates usage of the pointer lock API. Click on the canvas area and your mouse will directly control the ball inside the canvas, not your mouse pointer. You can press escape to return to the standard expected state.</p>
  </div>

  <canvas width="640" height="360">
    Your browser does not support HTML5 canvas
  </canvas>
  <div id="tracker"></div>

  <script src="app.js"></script>
</body>
</html>

JS

// helper function
const RADIUS = 20;

function degToRad(degrees) {
  var result = Math.PI / 180 * degrees;
  return result;
}

// setup of the canvas

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

var x = 50;
var y = 50;

function canvasDraw() {
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "#f00";
  ctx.beginPath();
  ctx.arc(x, y, RADIUS, 0, degToRad(360), true);
  ctx.fill();
}
canvasDraw();

// pointer lock object forking for cross browser

canvas.requestPointerLock = canvas.requestPointerLock ||
                            canvas.mozRequestPointerLock;

document.exitPointerLock = document.exitPointerLock ||
                           document.mozExitPointerLock;

canvas.onclick = function() {
  canvas.requestPointerLock();
};

// pointer lock event listeners

// Hook pointer lock state change events for different browsers
document.addEventListener('pointerlockchange', lockChangeAlert, false);
document.addEventListener('mozpointerlockchange', lockChangeAlert, false);

function lockChangeAlert() {
  if (document.pointerLockElement === canvas ||
      document.mozPointerLockElement === canvas) {
    console.log('The pointer lock status is now locked');
    document.addEventListener("mousemove", updatePosition, false);
  } else {
    console.log('The pointer lock status is now unlocked');  
    document.removeEventListener("mousemove", updatePosition, false);
  }
}

var tracker = document.getElementById('tracker');

var animation;
function updatePosition(e) {
  x += e.movementX;
  y += e.movementY;
  if (x > canvas.width + RADIUS) {
    x = -RADIUS;
  }
  if (y > canvas.height + RADIUS) {
    y = -RADIUS;
  }  
  if (x < -RADIUS) {
    x = canvas.width + RADIUS;
  }
  if (y < -RADIUS) {
    y = canvas.height + RADIUS;
  }
  tracker.textContent = "X position: " + x + ", Y position: " + y;

  if (!animation) {
    animation = requestAnimationFrame(function() {
      animation = null;
      canvasDraw();
    });
  }
}
person Fredrik Widerberg    schedule 23.08.2018