Erstellen eines zugänglichen Breakout -Spiels mit Web Audio und SVG

Dieser Artikel, Teil einer Microsoft Web Development -Serie, beschreibt die Erstellung eines zugänglichen Breakout -Spiels mit WebGL, Web Audio und SVG, in dem gezeigt wird, dass visuell ansprechende Spiele vollständig inklusive sein können. Der Autor, ein Co-Autor von babylon.js, wurde nach einem Konferenzgespräch über die Zugänglichkeit ein universell spielbares Spiel erstellen.

Das Spiel, das in Web-Audio-kompatiblen Browsern spielbar ist (prüfen Sie Caniuse.com) und in GitHub verfügbar, nutzt mehrere wichtige Zugänglichkeitsfunktionen:

• räumlicher Sound (Web -Audio -API): ermöglicht sehbehinderte Spieler, die Position des Balls durch Audio -Hinweise zu verfolgen.
• skalierbare SVG -Grafiken: sorgt für eine optimale Anzeige über alle Bildschirmgrößen und -auflösungen.
• Aria Live -Regionen: Bietet Spiele -Updates für Screen -Leser ohne disruptive Sprachsynthese.
• adaptives Gameplay: enthält ein breiteres Paddel und modifizierte Audio -Hinweise im zugänglichen Modus, um die Spielbarkeit zu verbessern.
• Benutzertests: Umfangreiche Tests mit sehbehinderten Benutzern verfeinert Audio und Gameplay.
• Open Source Code: Der Quellcode ist auf GitHub für Community -Beiträge verfügbar.

Entwicklungsprozess und Experimente:

Das Projekt begann mit einem einfachen Breakout -Klon mit SVG, der später mit einem WebGGGGGGGGL -Starfield -Hintergrund mit babylon.js verbessert wurde. Erste Experimente mit räumlichem Klang erwiesen sich als zu komplex für intuitives Gameplay. Der Sohn des Autors schlug vor, die Schallspielrate und Effekte zu verwenden, um die Ballposition im Verhältnis zum Paddel anzuzeigen, eine Lösung, die durch iterative Tests verfeinert wurde. Ein breiteres Paddel im zugänglichen Modus und die Verlangsamung des Balls am unteren Rand des Bildschirms verbesserte die Spielbarkeit weiter.

Tests mit einem blinden Benutzer zeigte, dass der anfängliche räumliche Audio zu komplex war. Die Vereinfachung der Audio -Hinweise zur Verwendung von linken und rechten Kanälen für die Richtungsführung erwies sich als viel effektiver.

Die SVG Viewbox sorgt für eine perfekte Skalierung über verschiedene Bildschirmgrößen und -auflösungen.

Zusätzliche Funktionen:

• Aria Live -Regionen (anstelle von Sprachsynthese): vermittelt den Spielstatus (verbleibende Ziegel, Sieg/Verlust, Punktzahl) mit assistiven Technologien.
• CSS-Styling: bietet im zugängliche Modus mit hohem kontrastischen Visuals und für Benutzer mit unterschiedlichen visuellen Fähigkeiten leicht. Dies ermöglicht ein visuell ansprechendes Spiel auch im zugänglichen Modus.

Der Artikel schließt mit dem Erfolg des Projekts bei der Schaffung eines wirklich integrativen Spielerlebnisses und der Förderung der weiteren Entwicklung und der Beiträge zum Open-Source-Code. Es fördert auch andere Microsoft -Ressourcen für die Entwicklung und Zugänglichkeit.

Das obige ist der detaillierte Inhalt vonErstellen eines zugänglichen Breakout -Spiels mit Web Audio und SVG. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!