Rumah >hujung hadapan web >tutorial js >Membuat permainan pelarian yang boleh diakses menggunakan Audio Web dan SVG

Membuat permainan pelarian yang boleh diakses menggunakan Audio Web dan SVG

尊渡假赌尊渡假赌尊渡假赌
尊渡假赌尊渡假赌尊渡假赌asal
2025-02-19 12:50:11406semak imbas

Artikel ini, sebahagian daripada Siri Pembangunan Microsoft Web, memperincikan penciptaan permainan pelarian yang boleh diakses menggunakan WebGL, Audio Web, dan SVG, menunjukkan bahawa permainan yang menarik secara visual dapat sepenuhnya termasuk. Penulis, pengarang bersama Babylon.js, telah diilhamkan untuk membuat permainan yang boleh dimainkan secara universal selepas perbincangan persidangan mengenai kebolehcapaian.

Creating an Accessible Breakout Game Using Web Audio and SVG

Permainan, dimainkan dalam pelayar serasi audio web (semak caniuse.com), dan boleh didapati di GitHub, memanfaatkan beberapa ciri kebolehcapaian utama:

  • bunyi spatial (Web Audio API): membolehkan pemain cacat penglihatan untuk mengesan kedudukan bola melalui isyarat audio.
  • grafik SVG berskala: Memastikan paparan optimum di semua saiz dan resolusi skrin.
  • Aria Live Regions: Menyediakan kemas kini permainan untuk skrin pembaca tanpa sintesis pertuturan yang mengganggu.
  • Gameplay Adaptive: Termasuk paddle dayung dan isyarat audio yang diubah suai dalam mod yang boleh diakses untuk meningkatkan mainan.
  • Ujian Pengguna: Ujian yang luas dengan pengguna yang cacat penglihatan audio dan permainan.
  • Kod sumber terbuka: kod sumber boleh didapati di GitHub untuk sumbangan komuniti.

Proses Pembangunan dan Eksperimen:

Projek ini bermula dengan klon pelarian mudah menggunakan SVG, kemudian dipertingkatkan dengan latar belakang Starfield Webgl menggunakan Babylon.js. Eksperimen awal dengan bunyi spatial terbukti terlalu kompleks untuk permainan intuitif. Anak penulis mencadangkan menggunakan kadar permainan dan kesan bunyi untuk menunjukkan kedudukan bola berbanding dengan dayung, penyelesaian yang ditapis melalui ujian berulang. Paddle yang lebih luas dalam mod yang boleh diakses dan melambatkan bola di dekat bahagian bawah skrin yang lebih baik memainkan mainan.

Ujian dengan pengguna buta mendedahkan bahawa audio spatial awal terlalu kompleks. Memudahkan isyarat audio untuk menggunakan saluran kiri dan kanan untuk bimbingan arah membuktikan lebih berkesan.

Creating an Accessible Breakout Game Using Web Audio and SVG Creating an Accessible Breakout Game Using Web Audio and SVG Viewbox SVG memastikan skala yang sempurna merentasi saiz dan resolusi skrin yang berbeza.

Creating an Accessible Breakout Game Using Web Audio and SVG Creating an Accessible Breakout Game Using Web Audio and SVG Creating an Accessible Breakout Game Using Web Audio and SVG

Ciri -ciri tambahan:

  • Aria Live Regions (bukan sintesis pertuturan): Berkomunikasi status permainan (baki bata, menang/kehilangan, skor) ke teknologi bantuan.
  • CSS Styling: Menyediakan visual kontras tinggi dalam mod yang boleh diakses, mudah ditukar untuk pengguna dengan kebolehan visual yang berbeza-beza. Ini membolehkan permainan visual yang menarik walaupun dalam mod yang boleh diakses.

Creating an Accessible Breakout Game Using Web Audio and SVG Creating an Accessible Breakout Game Using Web Audio and SVG Creating an Accessible Breakout Game Using Web Audio and SVG

Artikel ini menyimpulkan dengan menonjolkan kejayaan projek dalam mewujudkan pengalaman permainan yang benar-benar inklusif dan menggalakkan pembangunan dan sumbangan lanjut kepada kod sumber terbuka. Ia juga menggalakkan sumber Microsoft yang lain untuk pembangunan dan kebolehaksesan web.

Atas ialah kandungan terperinci Membuat permainan pelarian yang boleh diakses menggunakan Audio Web dan SVG. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn