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

Ilmari Heikkinen
X דף הבית

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

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

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

כבר יש כמה הדגמות מגניבות שמנצלות את התכונה הזו. כדאי לצפות בהדגמת Quake 3 WebGL מאת ברנדון ג'ונס כדי לראות איך Pointer Lock API הופך את משחקי WebGL FPS ללקוח פוטנציאלי בר-קיימא. עוד הדגמה מגניבה היא 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>

דוגמה מלאה יותר זמינה בכתובת html5-demos.com. מידע נוסף זמין במאמרים הבאים: