আপনার গেমপ্যাড দিয়ে ক্রোম ডিনো গেম খেলুন

আপনার ওয়েব গেমগুলিকে পরবর্তী স্তরে নিয়ে যাওয়ার জন্য গেমপ্যাড API কীভাবে ব্যবহার করবেন তা শিখুন৷

টমাস স্টেইনার

ক্রোমের অফলাইন পৃষ্ঠা ইস্টার এগ ইতিহাসের সবচেয়ে খারাপ গোপন রহস্যগুলির মধ্যে একটি ( [citation needed] , তবে নাটকীয় প্রভাবের জন্য দাবি করা হয়েছে)। আপনি স্পেস কী টিপলে বা, মোবাইল ডিভাইসে, ডাইনোসরে ট্যাপ করলে, অফলাইন পৃষ্ঠাটি একটি খেলার যোগ্য আর্কেড গেম হয়ে ওঠে। আপনি সচেতন হতে পারেন যে আপনি যখন খেলতে চান তখন আপনাকে আসলে অফলাইনে যেতে হবে না: Chrome-এ, আপনি শুধু about://dino এ নেভিগেট করতে পারেন, অথবা, আপনার মধ্যে geek-এর জন্য, about://network-error/-106 এ ব্রাউজ করুন about://network-error/-106 । কিন্তু আপনি কি জানেন যে প্রতি মাসে 270 মিলিয়ন ক্রোম ডিনো গেম খেলা হয় ?

ক্রোম ডিনো গেম সহ ক্রোমের অফলাইন পৃষ্ঠা৷
খেলার জন্য স্পেস কী টিপুন!

আরেকটি সত্য যা জানার জন্য যুক্তিযুক্তভাবে আরও দরকারী এবং আপনি যে সম্পর্কে সচেতন নাও হতে পারেন তা হল আর্কেড মোডে আপনি একটি গেমপ্যাড দিয়ে গেমটি খেলতে পারেন। গেমপ্যাড সমর্থন রিলি গ্রান্টের একটি প্রতিশ্রুতিতে এই লেখার সময় হিসাবে প্রায় এক বছর আগে যোগ করা হয়েছিল। আপনি দেখতে পাচ্ছেন, গেমটি, ক্রোমিয়াম প্রকল্পের বাকি অংশের মতো, সম্পূর্ণ ওপেন সোর্স । এই পোস্টে, আমি আপনাকে দেখাতে চাই কিভাবে গেমপ্যাড এপিআই ব্যবহার করতে হয়।

গেমপ্যাড এপিআই ব্যবহার করুন

বৈশিষ্ট্য সনাক্তকরণ এবং ব্রাউজার সমর্থন

গেমপ্যাড এপিআই ডেস্কটপ এবং মোবাইল উভয় জুড়ে সর্বজনীনভাবে দুর্দান্ত ব্রাউজার সমর্থন করে। নিম্নলিখিত স্নিপেট ব্যবহার করে গেমপ্যাড API সমর্থিত কিনা তা আপনি সনাক্ত করতে পারেন:

if ('getGamepads' in navigator) {
  // The API is supported!
}

কিভাবে ব্রাউজার একটি গেমপ্যাড প্রতিনিধিত্ব করে

ব্রাউজার গেমপ্যাডকে Gamepad অবজেক্ট হিসেবে উপস্থাপন করে। একটি Gamepad নিম্নলিখিত বৈশিষ্ট্য রয়েছে:

  • id : গেমপ্যাডের জন্য একটি শনাক্তকরণ স্ট্রিং। এই স্ট্রিংটি সংযুক্ত গেমপ্যাড ডিভাইসের ব্র্যান্ড বা শৈলী সনাক্ত করে।
  • displayId : সংশ্লিষ্ট VRDisplay এর VRDisplay.displayId (যদি প্রাসঙ্গিক হয়)।
  • index : ন্যাভিগেটরে গেমপ্যাডের সূচী।
  • connected : গেমপ্যাড এখনও সিস্টেমের সাথে সংযুক্ত কিনা তা নির্দেশ করে।
  • hand : কন্ট্রোলারটি কোন হাতে ধরে রাখা হচ্ছে বা সবচেয়ে বেশি ধারণ করা হবে তা সংজ্ঞায়িত করে।
  • timestamp : শেষবার এই গেমপ্যাডের ডেটা আপডেট করা হয়েছিল।
  • mapping : এই ডিভাইসের জন্য ব্যবহৃত বোতাম এবং অক্ষ ম্যাপিং, হয় "standard" বা "xr-standard" ।
  • pose : একটি GamepadPose অবজেক্ট যা ওয়েবভিআর কন্ট্রোলারের সাথে যুক্ত পোজ তথ্যকে উপস্থাপন করে।
  • axes : গেমপ্যাডের সমস্ত অক্ষের জন্য মানগুলির একটি বিন্যাস, রৈখিকভাবে -1.0 - 1.0 রেঞ্জে স্বাভাবিক করা হয়েছে।
  • buttons : গেমপ্যাডের সমস্ত বোতামের জন্য বোতামের একটি অ্যারে।

নোট করুন যে বোতামগুলি ডিজিটাল হতে পারে (চাপা বা চাপা না) বা এনালগ (উদাহরণস্বরূপ, 78% চাপা)। এই কারণে বোতামগুলিকে GamepadButton অবজেক্ট হিসাবে রিপোর্ট করা হয়েছে, নিম্নলিখিত বৈশিষ্ট্যগুলি সহ:

  • pressed : বোতামের চাপা অবস্থা ( বোতাম টিপলে true এবং চাপা না থাকলে false ।
  • touched : বোতামের স্পর্শ করা অবস্থা। বোতামটি স্পর্শ শনাক্ত করতে সক্ষম হলে, বোতামটি স্পর্শ করা হলে এই বৈশিষ্ট্যটি true এবং অন্যথায় false ।
  • value : একটি এনালগ সেন্সর আছে এমন বোতামগুলির জন্য, এই বৈশিষ্ট্যটি সেই পরিমাণের প্রতিনিধিত্ব করে যার দ্বারা বোতাম টিপানো হয়েছে, রৈখিকভাবে 0.0 - 1.0 রেঞ্জে স্বাভাবিক করা হয়েছে।
  • hapticActuators : GamepadHapticActuator অবজেক্ট ধারণকারী একটি অ্যারে, যার প্রতিটি কন্ট্রোলারে উপলব্ধ হ্যাপটিক ফিডব্যাক হার্ডওয়্যার উপস্থাপন করে।

আপনার ব্রাউজার এবং আপনার কাছে থাকা গেমপ্যাডের উপর নির্ভর করে একটি অতিরিক্ত জিনিস যা আপনি সম্মুখীন হতে পারেন তা হল একটি vibrationActuator সম্পত্তি। এটি দুটি ধরণের রাম্বল প্রভাবের জন্য অনুমতি দেয়:

  • ডুয়াল-রাম্বল: গেমপ্যাডের প্রতিটি গ্রিপে একটি করে দুটি উদ্ভট ঘূর্ণায়মান ভর অ্যাকুয়েটর দ্বারা উত্পন্ন হ্যাপটিক প্রতিক্রিয়া প্রভাব।
  • ট্রিগার-রাম্বল: দুটি স্বাধীন মোটর দ্বারা উত্পন্ন হ্যাপটিক প্রতিক্রিয়া প্রভাব, গেমপ্যাডের প্রতিটি ট্রিগারে একটি মোটর অবস্থিত।

নিচের স্কিম্যাটিক ওভারভিউ, সরাসরি স্পেক থেকে নেওয়া, একটি জেনেরিক গেমপ্যাডে বোতাম এবং অক্ষগুলির ম্যাপিং এবং বিন্যাস দেখায়।

একটি সাধারণ গেমপ্যাডের বোতাম এবং অক্ষ ম্যাপিংয়ের পরিকল্পিত ওভারভিউ।
একটি স্ট্যান্ডার্ড গেমপ্যাড লেআউটের ভিজ্যুয়াল উপস্থাপনা ( উত্স )।

একটি গেমপ্যাড সংযুক্ত হলে বিজ্ঞপ্তি

একটি গেমপ্যাড কখন সংযুক্ত থাকে তা জানতে, window অবজেক্টে ট্রিগার হওয়া gamepadconnected ইভেন্টের জন্য শুনুন। যখন ব্যবহারকারী একটি গেমপ্যাড সংযোগ করে, যা হয় USB ব্যবহার করে বা ব্লুটুথ ব্যবহার করে ঘটতে পারে, তখন একটি GamepadEvent বরখাস্ত করা হয় যাতে একটি উপযুক্ত নামযুক্ত gamepad সম্পত্তিতে গেমপ্যাডের বিবরণ থাকে। নিম্নলিখিতটিতে, আপনি একটি Xbox 360 কন্ট্রোলার থেকে একটি উদাহরণ দেখতে পারেন যা আমি চারপাশে পড়েছিলাম (হ্যাঁ, আমি রেট্রো গেমিংয়ে আছি)৷

window.addEventListener('gamepadconnected', (event) => {
  console.log('✅ 🎮 A gamepad was connected:', event.gamepad);
  /*
    gamepad: Gamepad
    axes: (4) [0, 0, 0, 0]
    buttons: (17) [GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton]
    connected: true
    id: "Xbox 360 Controller (STANDARD GAMEPAD Vendor: 045e Product: 028e)"
    index: 0
    mapping: "standard"
    timestamp: 6563054.284999998
    vibrationActuator: GamepadHapticActuator {type: "dual-rumble"}
  */
});

একটি গেমপ্যাড সংযোগ বিচ্ছিন্ন হয়ে গেলে বিজ্ঞপ্তি

গেমপ্যাড সংযোগ বিচ্ছিন্ন হওয়ার বিষয়ে অবহিত হওয়া সংযোগগুলি যেভাবে সনাক্ত করা হয় তার অনুরূপভাবে ঘটে। এইবার অ্যাপটি gamepaddisconnected ইভেন্টের জন্য শোনে। আমি Xbox 360 কন্ট্রোলার আনপ্লাগ করার সময় নিম্নলিখিত উদাহরণে connected এখন false কিভাবে নোট করুন।

window.addEventListener('gamepaddisconnected', (event) => {
  console.log('❌ 🎮 A gamepad was disconnected:', event.gamepad);
  /*
    gamepad: Gamepad
    axes: (4) [0, 0, 0, 0]
    buttons: (17) [GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton, GamepadButton]
    connected: false
    id: "Xbox 360 Controller (STANDARD GAMEPAD Vendor: 045e Product: 028e)"
    index: 0
    mapping: "standard"
    timestamp: 6563054.284999998
    vibrationActuator: null
  */
});

আপনার গেম লুপে গেমপ্যাড

একটি গেমপ্যাড দখল করা শুরু হয় navigator.getGamepads() এ একটি কল দিয়ে, যা Gamepad আইটেমগুলির সাথে একটি অ্যারে প্রদান করে৷ Chrome-এর অ্যারেতে সর্বদা চারটি আইটেমের একটি নির্দিষ্ট দৈর্ঘ্য থাকে। যদি শূন্য বা চারটির কম গেমপ্যাড সংযুক্ত থাকে, তাহলে একটি আইটেম null হতে পারে। সর্বদা অ্যারের সমস্ত আইটেম পরীক্ষা করতে ভুলবেন না এবং সচেতন থাকুন যে গেমপ্যাডগুলি তাদের স্লট "মনে রাখে" এবং সর্বদা প্রথম উপলব্ধ স্লটে উপস্থিত নাও থাকতে পারে৷

// When no gamepads are connected:
navigator.getGamepads();
// (4) [null, null, null, null]

যদি এক বা একাধিক গেমপ্যাড সংযুক্ত থাকে, কিন্তু navigator.getGamepads() এখনও null আইটেম রিপোর্ট করে, তাহলে আপনাকে প্রতিটি গেমপ্যাডের যেকোনো বোতাম টিপে "জাগ্রত" করতে হতে পারে। তারপরে আপনি নিম্নলিখিত কোডে দেখানো হিসাবে আপনার গেম লুপে গেমপ্যাড স্টেটগুলি পোল করতে পারেন।

const pollGamepads = () => {
  // Always call `navigator.getGamepads()` inside of
  // the game loop, not outside.
  const gamepads = navigator.getGamepads();
  for (const gamepad of gamepads) {
    // Disregard empty slots.
    if (!gamepad) {
      continue;
    }
    // Process the gamepad state.
    console.log(gamepad);
  }
  // Call yourself upon the next animation frame.
  // (Typically this happens every 60 times per second.)
  window.requestAnimationFrame(pollGamepads);
};
// Kick off the initial game loop iteration.
pollGamepads();

ভাইব্রেশন অ্যাকচুয়েটর

vibrationActuator বৈশিষ্ট্য একটি GamepadHapticActuator অবজেক্ট প্রদান করে, যা মোটর বা অন্যান্য অ্যাকচুয়েটরগুলির একটি কনফিগারেশনের সাথে মিলে যায় যা হ্যাপটিক প্রতিক্রিয়ার উদ্দেশ্যে একটি বল প্রয়োগ করতে পারে। Gamepad.vibrationActuator.playEffect() কল করে হ্যাপটিক প্রভাবগুলি চালানো যেতে পারে। একমাত্র বৈধ প্রভাবের ধরন হল 'dual-rumble' । ডুয়াল-রাম্বল একটি স্ট্যান্ডার্ড গেমপ্যাডের প্রতিটি হ্যান্ডেলে একটি অদ্ভুত ঘূর্ণায়মান ভর ভাইব্রেশন মোটর সহ একটি হ্যাপটিক কনফিগারেশন বর্ণনা করে। এই কনফিগারেশনে, হয় মোটর পুরো গেমপ্যাড ভাইব্রেট করতে সক্ষম। দুটি ভর অসম যাতে প্রতিটির প্রভাব আরও জটিল হ্যাপটিক প্রভাব তৈরি করতে একত্রিত হতে পারে। দ্বৈত-রম্বল প্রভাব চারটি পরামিতি দ্বারা সংজ্ঞায়িত করা হয়:

  • duration : কম্পন প্রভাবের সময়কাল মিলিসেকেন্ডে সেট করে।
  • startDelay : কম্পন শুরু না হওয়া পর্যন্ত বিলম্বের সময়কাল সেট করে।
  • strongMagnitude এবং weakMagnitude : 0.0 - 1.0 রেঞ্জে স্বাভাবিক করা ভারী এবং হালকা উদ্ভট ঘূর্ণায়মান ভর মোটরগুলির জন্য কম্পনের তীব্রতার মাত্রা সেট করুন।

সমর্থিত rumble প্রভাব

if (gamepad.vibrationActuator.effects.includes('trigger-rumble')) {
  // Trigger rumble supported.
} else if (gamepad.vibrationActuator.effects.includes('dual-rumble')) {
  // Dual rumble supported.
} else {
  // Rumble effects aren't supported.
}

দ্বৈত গর্জন

// This assumes a `Gamepad` as the value of the `gamepad` variable.
const dualRumble = (gamepad, delay = 0, duration = 100, weak = 1.0, strong = 1.0) => {
  if (!('vibrationActuator' in gamepad)) {
    return;
  }
  gamepad.vibrationActuator.playEffect('dual-rumble', {
    // Start delay in ms.
    startDelay: delay,
    // Duration in ms.
    duration: duration,
    // The magnitude of the weak actuator (between 0 and 1).
    weakMagnitude: weak,
    // The magnitude of the strong actuator (between 0 and 1).
    strongMagnitude: strong,
  });
};

ট্রিগার rumble

// This assumes a `Gamepad` as the value of the `gamepad` variable.
const triggerRumble = (gamepad, delay = 0, duration = 100, weak = 1.0, strong = 1.0) => {
  if (!('vibrationActuator' in gamepad)) {
    return;
  }
  // Feature detection.
  if (!('effects' in gamepad.vibrationActuator) || !gamepad.vibrationActuator.effects.includes('trigger-rumble')) {
    return;
  }
  gamepad.vibrationActuator.playEffect('trigger-rumble', {
    // Duration in ms.
    duration: duration,
    // The left trigger (between 0 and 1).
    leftTrigger: leftTrigger,
    // The right trigger (between 0 and 1).
    rightTrigger: rightTrigger,
  });
};

অনুমতি নীতির সাথে ইন্টিগ্রেশন

গেমপ্যাড এপিআই স্পেকটি "gamepad" স্ট্রিং দ্বারা চিহ্নিত একটি নীতি-নিয়ন্ত্রিত বৈশিষ্ট্যকে সংজ্ঞায়িত করে। এর ডিফল্ট allowlist হল "self" । একটি নথির অনুমতি নীতি নির্ধারণ করে যে সেই নথির কোনো বিষয়বস্তু navigator.getGamepads() অ্যাক্সেস করার জন্য অনুমোদিত কিনা। কোনো নথিতে নিষ্ক্রিয় করা থাকলে, নথির কোনো বিষয়বস্তু navigator.getGamepads() ব্যবহার করার অনুমতি দেওয়া হবে না, অথবা gamepadconnected এবং gamepaddisconnected ইভেন্টগুলি ফায়ার হবে না।

<iframe src="index.html" allow="gamepad"></iframe>

ডেমো

একটি গেমপ্যাড পরীক্ষক ডেমো নিম্নলিখিত উদাহরণে এমবেড করা হয়েছে। সোর্স কোড Glitch এ উপলব্ধ। ইউএসবি বা ব্লুটুথ ব্যবহার করে একটি গেমপ্যাড সংযোগ করে এবং এর যেকোনো বোতাম টিপে বা এর যেকোনো অক্ষ সরানোর মাধ্যমে ডেমোটি চেষ্টা করুন।

বোনাস: web.dev-এ ক্রোম ডিনো খেলুন

আপনি এই সাইটে আপনার গেমপ্যাড দিয়ে ক্রোম ডিনো খেলতে পারেন। সোর্স কোড GitHub এ উপলব্ধ। trex-runner.js এ গেমপ্যাড পোলিং ইমপ্লিমেন্টেশন দেখুন এবং নোট করুন কিভাবে এটি কী প্রেসের অনুকরণ করছে।

ক্রোম ডাইনো গেমপ্যাড ডেমো কাজ করার জন্য, আমি কোর ক্রোমিয়াম প্রজেক্ট থেকে ক্রোম ডাইনো গেমটি ছিঁড়ে ফেলেছি ( আর্নেল ব্যালেনের একটি পূর্বের প্রচেষ্টা আপডেট করা), এটিকে একটি স্বতন্ত্র সাইটে রেখেছি, ডকিং এবং কম্পন যোগ করে বিদ্যমান গেমপ্যাড API বাস্তবায়নকে প্রসারিত করেছি প্রভাব, একটি পূর্ণ স্ক্রীন মোড তৈরি করেছে এবং মেহুল সতারদেকর একটি অন্ধকার মোড বাস্তবায়নে অবদান রেখেছেন। শুভ গেমিং!

স্বীকৃতি

এই নথিটি François Beaufort এবং Joe Medley দ্বারা পর্যালোচনা করা হয়েছে। গেমপ্যাড এপিআই স্পেকটি স্টিভ অ্যাগোস্টন , জেমস হোলিয়ার এবং ম্যাট রেনল্ডস দ্বারা সম্পাদনা করা হয়েছে। প্রাক্তন স্পেক এডিটররা হলেন ব্র্যান্ডন জোন্স , স্কট গ্রাহাম এবং টেড মিল্কজারেক । গেমপ্যাড এক্সটেনশন স্পেক ব্র্যান্ডন জোন্স দ্বারা সম্পাদিত হয়। লরা টরেন্ট পুইগের হিরো ছবি।