เกมแห่งความใกล้ชิด ได้รับแรงบันดาลใจมาจากการปัดระเบิด
ทีมที่นำคุณมายัง squoosh.app กลับมาแล้ว! คราวนี้ เราได้สร้างเกมบนเว็บชื่อว่า PROXX (proxx.app) PROXX เป็นเกมสถานที่ใกล้เคียงที่ได้รับแรงบันดาลใจมาจากเกม Minesweeper ในตำนาน เกมนี้จะอยู่ในอวกาศและหน้าที่ของคุณคือค้นหาตำแหน่งของหลุมดำ ฟีเจอร์นี้ทำงานได้บนอุปกรณ์ทุกประเภท ตั้งแต่เดสก์ท็อปไปจนถึงฟีเจอร์โฟน ผู้ใช้สามารถเล่นเกมโดยใช้เมาส์, แป้นพิมพ์ หรือ D-pad ได้ แม้ว่าจะใช้โปรแกรมอ่านหน้าจอก็ตาม
เกณฑ์พื้นฐานของเรา
ก่อนที่จะสร้างเกมนี้ เราตั้งเป้าหมายและงบประมาณต่อไปนี้สำหรับแอปพลิเคชัน
- ประสบการณ์หลักเดียวกัน: อุปกรณ์ทั้งหมดต้องทำงานในลักษณะเดียวกัน
- สามารถเข้าถึงได้: เมาส์, แป้นพิมพ์, หน้าจอสัมผัส, d-pad, โปรแกรมอ่านหน้าจอ
- มีประสิทธิภาพ:
- เพย์โหลดเริ่มต้นน้อยกว่า 25 KB
- ไม่ถึง 5 วินาที TTI (เวลาในการโต้ตอบ) เมื่อใช้ 3G ที่ช้า
- ภาพเคลื่อนไหวที่สม่ำเสมอ 60 FPS
Web Worker
เกมประกอบด้วย 4 เอนทิตีหลัก, ตรรกะหลักของเกม, บริการ UI, บริการสถานะ และกราฟิกภาพเคลื่อนไหว เนื่องจากเราทราบมาตั้งแต่เริ่มใช้งานว่าเราจำเป็นต้องเรียกใช้กราฟิกแบบภาพเคลื่อนไหวจำนวนมากบนเทรดหลัก เราจึงย้ายลอจิกและบริการสถานะของเกมไปยังโปรแกรมทำงานบนเว็บเพื่อให้เทรดหลักใช้งานได้ฟรีมากที่สุด
การแสดงผลล่วงหน้าสำหรับเวลาบิลด์
UI ของเราสร้างขึ้นด้วย Preact เนื่องจากช่วยให้เราบรรลุเป้าหมายเชิงรุกสำหรับเพย์โหลดเริ่มต้นที่มีขนาดเล็กกว่า 25kb เพื่อให้ประสบการณ์การโหลดเริ่มต้นที่ดี เราจึงตัดสินใจแสดงผลล่วงหน้าในมุมมองแรก เราแสดงผลล่วงหน้า ณ เวลาที่สร้างโดยใช้ Puppeteer เพื่อเข้าถึงหน้าด้านบนและอนุญาตให้สร้าง DOM ไว้ล่วงหน้า จากนั้น DOM ที่ได้จะถูกทำให้เป็นอนุกรม เป็น HTML และบันทึกเป็น index.html
Canvas สำหรับภาพเคลื่อนไหว, DOM สำหรับการช่วยเหลือพิเศษ
เราแสดงผลกราฟิกเกมใน Canvas โดยใช้ WebGL ผืนผ้าใบ 1 ผืนจะรับผิดชอบต่อภาพเคลื่อนไหวพื้นหลังและอีก 1 ผืนสำหรับตารางกริดเกมที่ด้านบน นอกจากนี้ เรายังมีตาราง HTML ที่มีปุ่มสำหรับเหตุผลด้านการเข้าถึง ซึ่งอยู่ด้านบนของผืนผ้าใบทั้ง 2 นี้ แต่ไม่แสดง (ความทึบแสง: 0) แม้ว่าสิ่งที่คุณเห็นคือการแสดงภาพ Canvas ของสถานะเกม แต่โปรแกรมเล่นกำลังโต้ตอบกับตาราง DOM ที่มองไม่เห็น ทำให้เราสามารถแนบ Listener เหตุการณ์และอาศัยการจัดการโฟกัสของเบราว์เซอร์ได้
การเก็บองค์ประกอบ DOM ไว้ในผืนผ้าใบทำให้เราเข้าถึงฟีเจอร์การช่วยเหลือพิเศษในตัวของเบราว์เซอร์ได้ เช่น ด้วยการตั้งค่า role="grid" ในตารางเกม โปรแกรมอ่านหน้าจอจะอ่านแถวและคอลัมน์ของเซลล์ที่โฟกัสได้โดยที่เราไม่ต้องดำเนินการใดๆ
รายงานสําหรับการรวมกลุ่มและการแยกโค้ด
ขนาดทั้งหมดสำหรับแอปมีขนาดรวมไม่อยู่ถึง 100 KB 20KB สำหรับเพย์โหลดเริ่มต้น (index.html) เราใช้ Rollup.js สำหรับโปรเจ็กต์นี้ เราได้แชร์ทรัพยากร Dependency ร่วมกันระหว่างเทรดหลักและผู้ปฏิบัติงานบนเว็บ และ Rollup จะวางทรัพยากร Dependency ที่ใช้ร่วมกันเหล่านี้แยกเป็นส่วนๆ ซึ่งจะต้องโหลดเพียงครั้งเดียวเท่านั้น Bundler อื่นๆ เช่น Webpack จะคัดลอกการพึ่งพาที่ใช้ร่วมกันไว้ ซึ่งส่งผลให้เกิดการโหลด 2 ครั้ง
ฟีเจอร์โฟนที่รองรับ
ฟีเจอร์โฟนอัจฉริยะ เช่น โทรศัพท์ KaiOS กำลังได้รับความนิยมอย่างรวดเร็ว อุปกรณ์เหล่านี้มีข้อจำกัดด้านทรัพยากรสูง แต่วิธีที่เราใช้ Web Worker ทุกครั้งที่เราสามารถทำให้ประสบการณ์ ตอบสนองได้ดีในโทรศัพท์เหล่านี้ เนื่องจากฟีเจอร์โฟนมาพร้อมอินเทอร์เฟซ การป้อนข้อมูลที่แตกต่างกัน (แป้น D-pad และแป้นตัวเลข ไม่มีหน้าจอสัมผัส) เราจึงใช้อินเทอร์เฟซแบบแป้นด้วย
ขั้นตอนถัดไป
เกมนี้สนุกมากในช่วงที่มีงาน Google I/O 2019 ทำให้เสร็จทันเวลาพอดี เราจึงจะหาเวลาว่างเพื่อพักผ่อน แต่วางแผนว่าจะกลับมาอ่านเอกสารที่เจาะลึกมากขึ้นเกี่ยวกับแต่ละส่วนของเกมได้
ในระหว่างนี้ โปรดดูการบรรยายที่ Mariko ให้ไว้ในงาน I/O เกี่ยวกับโปรเจ็กต์นี้
ดูโค้ดได้ที่ที่เก็บ Proxx github
ไชโย! เซอร์มา เจค มาริโก