กระโดดข้ามสิ่งกีดขวางด้วย Gamepad API

มาร์ซิน วิคารี

เกริ่นนำ

ให้เหล่ามือใหม่เก็บคีย์บอร์ดไว้สำหรับเกมผจญภัย ใช้ปลายนิ้วมือที่ล้ำค่าสำหรับการตัดผลไม้ และเซ็นเซอร์ตรวจจับการเคลื่อนไหวแบบใหม่สุดล้ำสำหรับแสร้งเต้นแบบไมเคิล แจ็กสัน (Newsflash: ไม่สามารถทำได้) แต่คุณแตกต่าง คุณดีขึ้นแล้ว เป็นมืออาชีพแล้ว สำหรับคุณ เกมจะเริ่มต้นขึ้นและจบลงด้วยเกมแพดในมือของคุณ

แต่เดี๋ยวก่อน ก็ไม่เสียหายที่จะสนับสนุนเกมแพดในเว็บแอปใช่ไหม ไม่ได้แล้ว Gamepad API ใหม่ล่าสุดช่วยคุณได้ โดยให้คุณใช้ JavaScript เพื่ออ่านสถานะของตัวควบคุมเกมแพดที่ต่ออยู่กับคอมพิวเตอร์ นี่เป็นข้อมูลใหม่ที่เพิ่งเผยแพร่ไปโดยเผยแพร่ใน Chrome 21 เมื่อสัปดาห์ที่แล้วเท่านั้น และใกล้จะได้รับการสนับสนุนใน Firefox แล้ว (ปัจจุบันมีให้บริการในเวอร์ชันพิเศษ)

และตอนนี้ก็เป็นโอกาสอันดีทีเดียว เนื่องจากเรามีโอกาสใช้ Google doodle ในปี 2012 เร็วๆ นี้ บทความนี้จะอธิบายคร่าวๆ ถึงวิธีที่เราเพิ่ม Gamepad API ลงใน Doodle และสิ่งที่เราได้เรียนรู้ไปในระหว่างกระบวนการนี้

Google Doodle ปี 2012
Google Doodles 2012 (Hurdles 2012)

ผู้ทดสอบเกมแพด

ซึ่งเกิดขึ้นเพียงชั่วคราว แต่ Doodle แบบอินเทอร์แอกทีฟมักจะดูซับซ้อนค่อนข้างซับซ้อน เพื่อให้เราสามารถสาธิตสิ่งที่เรากำลังพูดถึงได้ง่ายขึ้น เราจึงนำโค้ดเกมแพดจาก doodle มารวมเข้าด้วยกันเป็นเครื่องทดสอบเกมแพดแบบง่ายๆ คุณสามารถใช้เพื่อดูว่าเกมแพด USB ทำงานอย่างถูกต้องหรือไม่ และตรวจดูเบื้องหลังการทำงานของเกมด้วย

ปัจจุบันมีเบราว์เซอร์ใดบ้างที่รองรับ

การสนับสนุนเบราว์เซอร์

  • 21
  • 12
  • 29
  • 10.1

แหล่งที่มา

เกมแพดใดใช้งานได้

โดยทั่วไปแล้ว เกมแพดสมัยใหม่ที่ระบบของคุณรองรับอยู่แล้วน่าจะทำงานได้ เราได้ทดสอบเกมแพดหลายเกมจากตัวควบคุม USB ของแบรนด์บน PC ผ่านเกมแพด PlayStation 2 ที่เชื่อมต่อผ่านดองเกิลกับ Mac ไปจนถึงตัวควบคุมบลูทูธที่จับคู่กับโน้ตบุ๊ก ChromeOS

เกมแพด
เกมแพด

รูปนี้เป็นรูปคอนโทรลเลอร์ที่ใช้ทดสอบ doodle "ใช่แล้ว คุณแม่ นั่นคืองานที่ฉันทำงานจริงๆ" หากตัวควบคุมไม่ทำงานหรือหากตัวควบคุมแมปไม่ถูกต้อง โปรดรายงานข้อบกพร่องเกี่ยวกับ Chrome หรือ Firefox (โปรดทดสอบด้วยเวอร์ชันล่าสุดของแต่ละเบราว์เซอร์ เพื่อให้แน่ใจว่ายังไม่ได้แก้ไข)

ฟีเจอร์การตรวจหา Gamepad API<

ง่ายพอใน Chrome:

var gamepadSupportAvailable = !!navigator.webkitGetGamepads || !!navigator.webkitGamepads;

ยังไม่สามารถตรวจพบเรื่องนี้ใน Firefox ได้ เนื่องจากทุกอย่างเป็นแบบอิงตามเหตุการณ์ และตัวแฮนเดิลเหตุการณ์ทั้งหมดต้องแนบกับหน้าต่าง ซึ่งทำให้เทคนิคทั่วไปในการตรวจหาตัวแฮนเดิลเหตุการณ์ไม่ทำงาน

แต่เราแน่ใจว่านี่เป็นเพียงชั่วคราว Modernizr สุดยอดเกมนี้เคยแจ้งคุณเกี่ยวกับ Gamepad API ไปแล้ว เราจึงขอแนะนําฟีเจอร์นี้เพื่อตอบสนองความต้องการด้านการตรวจหาในปัจจุบันและในอนาคตของคุณ

var gamepadSupportAvailable = Modernizr.gamepads;

การค้นหาเกี่ยวกับเกมแพดที่เชื่อมต่อ

แม้ว่าคุณจะเชื่อมต่อเกมแพด เกมแพดก็จะไม่แสดงผลออกมาไม่ว่าในกรณีใดก็ตามเว้นแต่ผู้ใช้จะกดปุ่มใดๆ ก่อน เพื่อป้องกันการเก็บลายนิ้วมือ แม้จะพิสูจน์แล้วว่าให้ประสบการณ์ของผู้ใช้ค่อนข้างยาก คุณไม่สามารถขอให้ผู้ใช้กดปุ่มหรือบอกวิธีการเฉพาะสำหรับเกมแพดได้ เพราะไม่ทราบว่าพวกเขาเชื่อมต่อตัวควบคุมหรือไม่

แต่เมื่อคุณผ่านอุปสรรคได้แล้ว (ขอโทษด้วย...) รออะไรอีก

การจัดทำแบบสำรวจ

การใช้ API ของ Chrome ทำให้มีฟังก์ชัน navigator.webkitGetGamepads() ซึ่งคุณสามารถใช้เพื่อดูรายการเกมแพดทั้งหมดที่เชื่อมต่ออยู่กับระบบ พร้อมกับสถานะปัจจุบันของเกมแพด (ปุ่ม + สติ๊ก) เกมแพดเกมแรกที่เชื่อมต่ออยู่จะแสดงเป็นรายการแรกในอาร์เรย์ เป็นต้น

(การเรียกใช้ฟังก์ชันนี้เพิ่งแทนที่อาร์เรย์ที่คุณเข้าถึงได้โดยตรง – navigator.webkitGamepads[] ตั้งแต่ต้นเดือนสิงหาคม 2012 เป็นต้นมา การเข้าถึงอาร์เรย์นี้ยังคงจำเป็นใน Chrome 21 ในขณะที่การเรียกใช้ฟังก์ชันใช้งานได้ใน Chrome 22 และเวอร์ชันใหม่กว่า นับจากนี้ไป แนะนำให้ใช้การเรียกฟังก์ชัน API นี้ และจะค่อยๆ กระจายไปยังเบราว์เซอร์ Chrome ทั้งหมดที่ติดตั้งไว้)

ในส่วนของข้อกำหนดที่มีการติดตั้งล่าสุดนั้น คุณจะต้องคอยตรวจสอบสถานะของเกมแพดที่เชื่อมต่ออยู่อย่างต่อเนื่อง (และเปรียบเทียบกับเกมแพดก่อนหน้าหากจำเป็น) แทนการให้เหตุการณ์เริ่มทำงานเมื่อมีการเปลี่ยนแปลง เราอาศัย requestAnimationFrame() ในการตั้งค่าแบบสำรวจด้วยวิธีที่มีประสิทธิภาพและประหยัดแบตเตอรี่มากที่สุด สำหรับ Doodle ของเรา แม้ว่าเราจะมีลูป requestAnimationFrame() เพื่อรองรับภาพเคลื่อนไหวอยู่แล้ว แต่เราก็สร้างภาพเคลื่อนไหวอีกแบบที่แยกออกมาโดยสมบูรณ์แล้ว ซึ่งหมายความว่าเป็นโค้ดที่ง่ายกว่าและไม่ควรส่งผลกระทบต่อประสิทธิภาพการทำงานในลักษณะใด

นี่คือโค้ดจากผู้ทดสอบ:

/**
 * Starts a polling loop to check for gamepad state.
 */
startPolling: function() {
    // Don't accidentally start a second loop, man.
    if (!gamepadSupport.ticking) {
    gamepadSupport.ticking = true;
    gamepadSupport.tick();
    }
},

/**
 * Stops a polling loop by setting a flag which will prevent the next
 * requestAnimationFrame() from being scheduled.
 */
stopPolling: function() {
    gamepadSupport.ticking = false;
},

/**
 * A function called with each requestAnimationFrame(). Polls the gamepad
 * status and schedules another poll.
 */
tick: function() {
    gamepadSupport.pollStatus();
    gamepadSupport.scheduleNextTick();
},

scheduleNextTick: function() {
    // Only schedule the next frame if we haven't decided to stop via
    // stopPolling() before.
    if (gamepadSupport.ticking) {
    if (window.requestAnimationFrame) {
        window.requestAnimationFrame(gamepadSupport.tick);
    } else if (window.mozRequestAnimationFrame) {
        window.mozRequestAnimationFrame(gamepadSupport.tick);
    } else if (window.webkitRequestAnimationFrame) {
        window.webkitRequestAnimationFrame(gamepadSupport.tick);
    }
    // Note lack of setTimeout since all the browsers that support
    // Gamepad API are already supporting requestAnimationFrame().
    }
},

/**
 * Checks for the gamepad status. Monitors the necessary data and notices
 * the differences from previous state (buttons for Chrome/Firefox,
 * new connects/disconnects for Chrome). If differences are noticed, asks
 * to update the display accordingly. Should run as close to 60 frames per
 * second as possible.
 */
pollStatus: function() {
    // (Code goes here.)
},

หากคุณสนใจเกมแพดเพียงรายการเดียว การดูข้อมูลของเกมแพดก็อาจทำได้ง่ายๆ ดังนี้

var gamepad = navigator.webkitGetGamepads && navigator.webkitGetGamepads()[0];

หากคุณอยากฉลาดมากขึ้นหรือต้องรองรับผู้เล่นมากกว่า 1 คนในเวลาเดียวกัน คุณจะต้องเพิ่มโค้ดอีก 2-3 บรรทัดเพื่อตอบสนองต่อสถานการณ์ที่ซับซ้อนมากขึ้น (เกมแพดที่เชื่อมต่อ 2 เกมขึ้นไป บางเกมยกเลิกการเชื่อมต่อกลางคัน เป็นต้น) คุณสามารถดูซอร์สโค้ดของผู้ทดสอบอย่างฟังก์ชัน pollGamepads() เพื่อหาวิธีการหนึ่งที่จะแก้ปัญหานี้ได้

กิจกรรม

Firefox ใช้วิธีอื่นที่ดีกว่าซึ่งอธิบายอยู่ในข้อกำหนดของ Gamepad API โดยจะแสดง 2 เหตุการณ์คือ MozGamepadConnected และ MozGamepadDisconnected ซึ่งเริ่มทำงานเมื่อใดก็ตามที่เกมแพดเสียบปลั๊ก (หรือเสียบปลั๊กและ "ประกาศ" ด้วยการกดปุ่มใดก็ได้อย่างแม่นยำมากขึ้น) หรือถอดปลั๊กออก ระบบจะส่งออบเจ็กต์เกมแพดที่จะยังคงแสดงสถานะในอนาคตเป็นพารามิเตอร์ .gamepad ของออบเจ็กต์เหตุการณ์

จากซอร์สโค้ดของผู้ทดสอบ:

/**
 * React to the gamepad being connected. Today, this will only be executed
 * on Firefox.
 */
onGamepadConnect: function(event) {
    // Add the new gamepad on the list of gamepads to look after.
    gamepadSupport.gamepads.push(event.gamepad);

    // Start the polling loop to monitor button changes.
    gamepadSupport.startPolling();

    // Ask the tester to update the screen to show more gamepads.
    tester.updateGamepads(gamepadSupport.gamepads);
},

สรุป

ท้ายที่สุดแล้ว ฟังก์ชันการเริ่มต้นของเราในผู้ทดสอบซึ่งรองรับทั้ง 2 แนวทางจะมีหน้าตาดังนี้

/**
 * Initialize support for Gamepad API.
 */
init: function() {
    // As of writing, it seems impossible to detect Gamepad API support
    // in Firefox, hence we need to hardcode it in the third clause.
    // (The preceding two clauses are for Chrome.)
    var gamepadSupportAvailable = !!navigator.webkitGetGamepads ||
        !!navigator.webkitGamepads ||
        (navigator.userAgent.indexOf('Firefox/') != -1);

    if (!gamepadSupportAvailable) {
    // It doesn't seem Gamepad API is available – show a message telling
    // the visitor about it.
    tester.showNotSupported();
    } else {
    // Firefox supports the connect/disconnect event, so we attach event
    // handlers to those.
    window.addEventListener('MozGamepadConnected',
                            gamepadSupport.onGamepadConnect, false);
    window.addEventListener('MozGamepadDisconnected',
                            gamepadSupport.onGamepadDisconnect, false);

    // Since Chrome only supports polling, we initiate polling loop straight
    // away. For Firefox, we will only do it if we get a connect event.
    if (!!navigator.webkitGamepads || !!navigator.webkitGetGamepads) {
        gamepadSupport.startPolling();
    }
    }
},

ข้อมูลเกมแพด

เกมแพดทุกเกมที่เชื่อมต่อกับระบบจะแสดงด้วยวัตถุที่มีลักษณะดังต่อไปนี้

id: "PLAYSTATION(R)3 Controller (STANDARD GAMEPAD Vendor: 054c Product: 0268)"
index: 1
timestamp: 18395424738498
buttons: Array[8]
    0: 0
    1: 0
    2: 1
    3: 0
    4: 0
    5: 0
    6: 0.03291
    7: 0
axes: Array[4]
    0: -0.01176
    1: 0.01961
    2: -0.00392
    3: -0.01176

ข้อมูลพื้นฐาน

ช่องยอดนิยม 2-3 ช่องเป็นข้อมูลเมตาทั่วไป

  • id: ข้อความอธิบายเกมแพด
  • index: จำนวนเต็มมีประโยชน์ในการแยกแยะเกมแพดต่างๆ ที่แนบอยู่กับคอมพิวเตอร์ 1 เครื่องออกจากกัน
  • timestamp: การประทับเวลาการอัปเดตสถานะปุ่ม/แกนครั้งล่าสุด (ขณะนี้รองรับเฉพาะใน Chrome เท่านั้น)

ปุ่มและไม้ตี

เกมแพดในปัจจุบันนี้ไม่ใช่สิ่งที่คุณปู่ใช้เพื่อช่วยรักษาเจ้าหญิงในปราสาทที่ไม่ถูกต้อง แต่โดยทั่วไปจะมีปุ่มแยกกันอย่างน้อย 16 ปุ่ม (บางปุ่มแยกกัน บางส่วนเป็นแอนะล็อก) นอกเหนือจากไม้แอนะล็อก 2 อัน Gamepad API จะแจ้งให้คุณทราบเกี่ยวกับปุ่มและแอนะล็อกสติ๊กทั้งหมดที่ระบบปฏิบัติการรายงาน

เมื่อได้รับสถานะปัจจุบันในออบเจ็กต์เกมแพดแล้ว คุณจะเข้าถึงปุ่มต่างๆ ได้ผ่านทาง .buttons[] และสติ๊กผ่านอาร์เรย์ .axes[] ต่อไปนี้เป็นข้อมูลสรุปแบบภาพซึ่งแสดงให้เห็นถึงความเกี่ยวข้อง

แผนภาพเกมแพด
แผนภาพเกมแพด

ข้อกำหนดนี้จะขอให้เบราว์เซอร์จับคู่ปุ่ม 16 ปุ่มแรกและ 4 แกนกับ

gamepad.BUTTONS = {
    FACE_1: 0, // Face (main) buttons
    FACE_2: 1,
    FACE_3: 2,
    FACE_4: 3,
    LEFT_SHOULDER: 4, // Top shoulder buttons
    RIGHT_SHOULDER: 5,
    LEFT_SHOULDER_BOTTOM: 6, // Bottom shoulder buttons
    RIGHT_SHOULDER_BOTTOM: 7,
    SELECT: 8,
    START: 9,
    LEFT_ANALOGUE_STICK: 10, // Analogue sticks (if depressible)
    RIGHT_ANALOGUE_STICK: 11,
    PAD_TOP: 12, // Directional (discrete) pad
    PAD_BOTTOM: 13,
    PAD_LEFT: 14,
    PAD_RIGHT: 15
};

gamepad.AXES = {
    LEFT_ANALOGUE_HOR: 0,
    LEFT_ANALOGUE_VERT: 1,
    RIGHT_ANALOGUE_HOR: 2,
    RIGHT_ANALOGUE_VERT: 3
};

ปุ่มและแกนเพิ่มเติมจะต่อท้ายปุ่มด้านบน โปรดทราบว่าทั้ง 16 ปุ่มหรือ 4 แกนไม่สามารถรับประกันความถูกต้องได้ โปรดเตรียมให้มีปุ่มบางส่วนที่ไม่มีการกำหนด

ปุ่มต่างๆ สามารถรับค่าตั้งแต่ 0.0 (ไม่ได้กด) ไปจนถึง 1.0 (กดอย่างสมบูรณ์) แกนมีตั้งแต่ -1.0 (ซ้ายหรือด้านบนทั้งหมด) ถึง 0.0 (ตรงกลาง) ไปจนถึง 1.0 (ขวาหรือล่างเลย)

แอนะล็อกหรือแยก

พูดง่ายๆ ก็คือ ทุกปุ่มอาจเป็นปุ่มแบบแอนะล็อก ซึ่งเป็นเรื่องปกติสำหรับปุ่มไหล่ เป็นต้น ดังนั้นจึงควรกำหนดเกณฑ์มากกว่าแค่เปรียบเทียบให้เห็นชัดเจนกับ 1.00 (จะเกิดอะไรขึ้นถ้าปุ่มแอนะล็อกเกิดปัญหาเล็กน้อย ก็อาจไม่เคยถึง 1.00 เลยก็ได้) ใน doodle ของเราเป็นแบบต่อไปนี้

gamepad.ANALOGUE_BUTTON_THRESHOLD = .5;

gamepad.buttonPressed_ = function(pad, buttonId) {
    return pad.buttons[buttonId] &&
            (pad.buttons[buttonId] > gamepad.ANALOGUE_BUTTON_THRESHOLD);
};

คุณสามารถทำแบบเดียวกันเพื่อเปลี่ยนไม้แอนะล็อกเป็นจอยสติ๊กดิจิทัล ได้เลย มีแผ่นดิจิทัล (d-pad) เสมอ แต่เกมแพดอาจไม่มี นี่คือโค้ดของเราในการจัดการเรื่องนี้

gamepad.AXIS_THRESHOLD = .75;

gamepad.stickMoved_ = function(pad, axisId, negativeDirection) {
    if (typeof pad.axes[axisId] == 'undefined') {
    return false;
    } else if (negativeDirection) {
    return pad.axes[axisId] < -gamepad.AXIS_THRESHOLD;
    } else {
    return pad.axes[axisId] > gamepad.AXIS_THRESHOLD;
    }
};

การกดปุ่มและการขยับแท่ง

กิจกรรม

ในบางกรณี อย่างเกมจำลองการบิน การตรวจสอบและตอบสนองกับตำแหน่งที่ติดหรือกดปุ่มซ้ำๆ จะเป็นสิ่งที่สมเหตุสมผลมากกว่า แต่สำหรับสิ่งต่างๆ อย่าง Hurdles 2012 Doodle ล่ะ คุณอาจสงสัยว่าทำไมฉันต้องตรวจหาปุ่มทุกๆ เฟรม ทำไมฉันจึงไม่เห็นเหตุการณ์แบบที่ทำสำหรับแป้นพิมพ์หรือเมาส์ขึ้น/ลง

ข่าวดีคือคุณทำได้ ข่าวร้ายคือ เรื่องในอนาคต เป็นไปตามข้อกำหนดแล้ว แต่ยังไม่ได้ติดตั้งในเบราว์เซอร์ใด

การจัดทำแบบสำรวจ

ในระหว่างนี้ วิธีส่งออกจะเปรียบเทียบสถานะปัจจุบันกับสถานะก่อนหน้า และการเรียกใช้ฟังก์ชันหากคุณเห็นความแตกต่าง เช่น

if (buttonPressed(pad, 0) != buttonPressed(oldPad, 0)) {
    buttonEvent(0, buttonPressed(pad, 0) ? 'down' : 'up');
}

for (var i in gamepadSupport.gamepads) {
    var gamepad = gamepadSupport.gamepads[i];

    // Don't do anything if the current timestamp is the same as previous
    // one, which means that the state of the gamepad hasn't changed.
    // This is only supported by Chrome right now, so the first check
    // makes sure we're not doing anything if the timestamps are empty
    // or undefined.
    if (gamepadSupport.prevTimestamps[i] &&
        (gamepad.timestamp == gamepadSupport.prevTimestamps[i])) {
    continue;
    }
    gamepadSupport.prevTimestamps[i] = gamepad.timestamp;

    gamepadSupport.updateDisplay(i);
}

แนวทางที่ใช้แป้นพิมพ์เป็นหลักใน doodle ในปี 2012

เนื่องจากยังไม่มีเกมแพด วิธีการป้อนข้อมูลที่นิยมใช้กันมากที่สุดในปัจจุบันคือแป้นพิมพ์ ซึ่งหมายถึงการตัดสินใจ 3 ประการ ดังนี้

  1. Doodle ใช้เพียง 3 ปุ่ม โดยมี 2 ปุ่มสำหรับวิ่งและอีกปุ่มหนึ่งสำหรับกระโดด แต่เกมแพดมีแนวโน้มที่จะมีอีกมาก เราจึงจับคู่ปุ่มที่รู้จักทั้ง 16 ปุ่มและปุ่มที่รู้จัก 2 ปุ่มกับฟังก์ชันเชิงตรรกะทั้ง 3 รายการนั้นในแบบที่เราคิดว่าเหมาะสมมากที่สุด เพื่อที่ผู้คนจะวิ่งได้โดยสลับปุ่ม A/B สลับปุ่มไหล่ กดปุ่มซ้าย/ขวาบน D-pad หรือการแกว่งปุ่มใดปุ่มหนึ่งไปทางซ้ายและขวาอย่างรุนแรง (แน่นอนว่าบางปุ่มจะมีประสิทธิภาพมากกว่าปุ่มอื่นๆ) เช่น

    newState[gamepad.STATES.LEFT] =
    gamepad.buttonPressed_(pad, gamepad.BUTTONS.PAD_LEFT) ||
    gamepad.stickMoved_(pad, gamepad.AXES.LEFT_ANALOGUE_HOR, true) ||
    gamepad.stickMoved_(pad, gamepad.AXES.RIGHT_ANALOGUE_HOR, true),

newState[gamepad.STATES.PRIMARY_BUTTON] =
    gamepad.buttonPressed_(pad, gamepad.BUTTONS.FACE_1) ||
    gamepad.buttonPressed_(pad, gamepad.BUTTONS.LEFT_SHOULDER) ||
    gamepad.buttonPressed_(pad, gamepad.BUTTONS.LEFT_SHOULDER_BOTTOM) ||
    gamepad.buttonPressed_(pad, gamepad.BUTTONS.SELECT) ||
    gamepad.buttonPressed_(pad, gamepad.BUTTONS.START) ||
    gamepad.buttonPressed_(pad, gamepad.BUTTONS.LEFT_ANALOGUE_STICK),

  2. เราถือว่าอินพุตแอนะล็อกแต่ละรายการเป็นแบบแยกกัน โดยใช้ฟังก์ชันเกณฑ์ที่อธิบายไว้ก่อนหน้านี้

  3. เราทำตั้งแต่การใส่ข้อมูลลงในเกมแพดลงใน Doodle เลย แทนที่จะนำไปใส่ใน doodle อันที่จริงแล้ว ลูปแบบสำรวจของเราได้สรุปเหตุการณ์การกดแป้นพิมพ์และเหตุการณ์ที่จำเป็น (ด้วยคีย์โค้ดที่เหมาะสม) และส่งกลับไปยัง DOM ดังนี้

    // Create and dispatch a corresponding key event.
    var event = document.createEvent('Event');
    var eventName = down ? 'keydown' : 'keyup';
    event.initEvent(eventName, true, true);
    event.keyCode = gamepad.stateToKeyCodeMap_[state];
    gamepad.containerElement_.dispatchEvent(event);

เท่านี้ก็เรียบร้อย

กลเม็ดเคล็ดลับ

  • โปรดทราบว่าเกมแพดจะมองไม่เห็นในเบราว์เซอร์ของคุณเลยก่อนที่จะกดปุ่ม
  • หากคุณกำลังทดสอบเกมแพดในเบราว์เซอร์ต่างๆ พร้อมกัน ให้สังเกตว่ามีเพียงโปรแกรมเดียวเท่านั้นที่ตรวจจับตัวควบคุมได้ หากคุณไม่ได้รับเหตุการณ์ใดเลย ให้ปิดหน้าอื่นๆ ที่อาจใช้งานอยู่ นอกจากนี้ จากประสบการณ์ของเรา บางครั้งเบราว์เซอร์สามารถ "กดค้าง" ที่เกมแพดได้แม้ว่าคุณจะปิดแท็บหรือออกจากเบราว์เซอร์ไปเองก็ตาม บางครั้งการรีสตาร์ทระบบก็อาจเป็นทางออกเดียวในการแก้ปัญหา
  • โปรดใช้ Chrome Canary และเบราว์เซอร์อื่นๆ ในเวอร์ชันที่เทียบเท่ากันเพื่อให้แน่ใจว่าคุณได้รับการสนับสนุนที่ดีที่สุด จากนั้นจะดำเนินการตามความเหมาะสมหากพบว่าเวอร์ชันเก่ากว่ามีการทำงานต่างออกไป

อนาคต

เราหวังว่าข้อมูลนี้จะช่วยให้คุณได้เห็นภาพของ API ใหม่นี้บ้าง ถึงแม้ว่าจะค่อนข้างหวาดกลัวอยู่บ้าง แต่ก็ได้ความสนุกสนานมากมายแล้ว

นอกจาก API ที่หายไปแล้ว (เช่น เหตุการณ์) และการสนับสนุนเบราว์เซอร์ในวงกว้างขึ้น เราหวังว่าจะได้เห็นสิ่งต่างๆ เช่น การควบคุมแบบพังทลาย การเข้าถึงเครื่องวัดการหมุนในตัว และอื่นๆ รวมถึงการสนับสนุนเพิ่มเติมสำหรับเกมแพดประเภทต่างๆ โปรดรายงานข้อบกพร่องเกี่ยวกับ Chrome และ/หรือรายงานข้อบกพร่องกับ Firefox หากคุณพบข้อบกพร่องที่ทำงานไม่ถูกต้องหรือไม่ได้เลย

แต่ก่อนหน้านั้น เชิญเล่นเกม Doodle จาก Hurdles 2012 แล้วดูว่าเกมแพดจะสนุกขึ้นอีกแค่ไหน คุณบอกว่าคุณทำได้มากกว่า 10.7 วินาทีใช่ไหม เอามาได้เลย

อ่านเพิ่มเติม