Pointer Lock API מביא משחקי FPS לדפדפן

Ilmari Heikkinen

Pointer Lock API הגיע לאחרונה ל-Chrome Canary ולערוץ Dev. רגע, מה? לא שמעתם על Pointer Lock API? בקצרה, Pointer Lock API מאפשר לכתוב משחקי ירי בגוף ראשון ראויים לאינטרנט.

ההטמעה ב-Chrome מאפשרת לדף אינטרנט במסך מלא לבקש מכם הרשאה לצלם את סמן העכבר, כדי שלא תוכלו להזיז אותו מחוץ לדף. כך מפתחי אתרים יכולים לכתוב משחקים ואפליקציות תלת-ממדיות בלי לדאוג שמיקום הסמן של העכבר יעבור מחוץ לדף. כשהסמן נעול, למאפיינים movementX ו-movementY מוגדרים אירועי תנועת הסמן שמציינים את המרחק שבו העכבר נע מאז אירוע התנועה האחרון. כמו תמיד בממשקי API מתקדמים, המאפיינים האלה מתחילים בתחילית של הספק, כך שצריך להשתמש ב-webkitMovementX וכו'.

כדי להפעיל את Pointer Lock API בגרסאות העדכניות של Chrome, הדרך הקלה ביותר היא לעבור אל about:flags ולהפעיל את הדגל 'Enable Pointer Lock'. אפשר גם להפעיל את התכונה הזו על ידי הפעלת Chrome באמצעות הדגל --enable-pointer-lock בשורת הפקודה.

כבר יש כמה הדגמות מגניבות שמנצלות את התכונה הזו. כדאי לצפות בהדגמה של Quake 3 WebGL של ברנדון ג'ונס כדי לראות איך Pointer Lock API מאפשר ליצור משחקי FPS ב-WebGL. דוגמה מגניבה נוספת היא Webgl Street Viewer

כדי להתחיל להשתמש ב-Pointer Lock API, הנה קטע קוד קטן שגנבנו מ-MDN:

<button onclick="document.body.webkitRequestFullScreen();">No, you lock it up!</button>
<script>
navigator.pointer = navigator.pointer || navigator.webkitPointer;

var onError = function() {
    console.log("Mouse lock was not successful.");
};

document.addEventListener('webkitfullscreenchange', function(e) {
    if (document.webkitIsFullScreen) {
    navigator.pointer.lock(document.body, function() {
        // Locked and ready to play.
    }, onError);
    }
}, false);

document.body.addEventListener('webkitpointerlocklost', function(e) {
    console.log('Pointer lock lost!');
}, false);

document.body.addEventListener('mousemove', function(e) {
    if (navigator.pointer.isLocked) { // got a locked pointer
    var movementX = e.movementX || e.webkitMovementX;
    var movementY = e.movementY || e.webkitMovementY;
    }
}, false);
</script>