পয়েন্টার লক এপিআই ব্রাউজারে FPS গেম নিয়ে আসে

Ilmari Heikkinen
X Homepage

পয়েন্টার লক এপিআই সম্প্রতি ক্রোম ক্যানারি এবং ডেভ চ্যানেলে অবতরণ করেছে, সবাই আনন্দিত! কিসের অপেক্ষা? আপনি পয়েন্টার লক API শুনেন নি? ঠিক আছে, সংক্ষেপে, পয়েন্টার লক এপিআই ওয়েবের জন্য সঠিক প্রথম-ব্যক্তি শ্যুটার লেখা সম্ভব করে তোলে।

ক্রোম বাস্তবায়ন একটি পূর্ণ-স্ক্রীন ওয়েবপৃষ্ঠাকে মাউস পয়েন্টার ক্যাপচার করার জন্য আপনার অনুমতি চাইতে দেয় যাতে আপনি এটিকে পৃষ্ঠার বাইরে সরাতে না পারেন। এটি ওয়েব ডেভেলপারদের পৃষ্ঠার বাইরে মাউস কার্সার নিয়ে চিন্তা না করেই 3D গেম এবং অ্যাপ্লিকেশন লিখতে দেয়। যখন পয়েন্টারটি লক করা থাকে, পয়েন্টার মুভ ইভেন্টে movementX এবং movementY অ্যাট্রিবিউট সংজ্ঞায়িত থাকে যা বলে যে শেষ মুভ ইভেন্ট থেকে মাউস কতটা সরেছে। ব্লিডিং এজ এপিআইগুলির সাথে স্বাভাবিক হিসাবে, এই বৈশিষ্ট্যগুলি বিক্রেতা-প্রিফিক্সড, তাই আপনাকে webkitMovementX এবং এই জাতীয় ব্যবহার করতে হবে।

বর্তমান ক্রোম বিল্ডে পয়েন্টার লক এপিআই সক্ষম করতে, সবচেয়ে সহজ উপায় হল about:flags যান এবং "পয়েন্টার লক সক্ষম করুন"-পতাকা চালু করুন৷ আপনি --enable-pointer-lock কমান্ড লাইন পতাকা ব্যবহার করে Chrome শুরু করে এটি চালু করতে পারেন।

এই বৈশিষ্ট্যের সুবিধা নিয়ে ইতিমধ্যেই কয়েকটি দুর্দান্ত ডেমো রয়েছে। পয়েন্টার লক এপিআই কীভাবে WebGL FPS গেমগুলিকে একটি কার্যকর সম্ভাবনা তৈরি করে তা দেখতে ব্র্যান্ডন জোন্সের Quake 3 WebGL ডেমো দেখুন৷ আরেকটি দুর্দান্ত ডেমো হল Webgl Street Viewer

পয়েন্টার লক 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 এ একটি পূর্ণাঙ্গ উদাহরণ দেখতে পারেন। আরও তথ্যের জন্য, দেখুন: