المهارات web-games
🎮

web-games

آمن

بناء ألعاب المتصفح باستخدام WebGPU

يتطلب إنشاء ألعاب تعتمد على المتصفح فهم القيود الفريدة لهذه المنصة. توفر هذه المهارة إرشادات اختيار الإطار، واستراتيجيات تبني WebGPU، وتقنيات تحسين الأداء لبناء ألعاب ويب عالية الجودة.

يدعم: Claude Codex Code(CC)
🥉 73 برونزي
1

تنزيل ZIP المهارة

2

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

3

فعّل وابدأ الاستخدام

اختبرها

استخدام "web-games". What framework should I use for a 2D platformer?

النتيجة المتوقعة:

For a 2D platformer with full game features (physics, collisions, animations), use **Phaser 4**. It provides comprehensive game systems out of the box. If you need raw rendering performance without game logic, consider **PixiJS 8**.

استخدام "web-games". How do I handle audio in browser games?

النتيجة المتوقعة:

Browser audio requires user interaction. Create AudioContext on first click/tap, not on page load. Use Web Audio API with pooled audio sources for performance. Compress audio with WebM/Opus format.

التدقيق الأمني

آمن
v1 • 2/25/2026

Static analysis flagged 6 potential issues including external_commands, weak crypto, and system reconnaissance. Manual review confirms all findings are FALSE POSITIVES. The skill is pure markdown documentation providing browser game development guidance. Line 19/32 show ASCII decision trees (not shell backticks), lines 3/155 are description text (not crypto), and lines 30/80 are game dev terms (not reconnaissance). No dangerous patterns detected.

1
الملفات التي تم فحصها
156
الأسطر التي تم تحليلها
3
النتائج
1
إجمالي عمليات التدقيق
مشكلات متوسطة المخاطر (1)
SKILL.md:19-32
False Positive: External Commands Pattern
Static scanner detected 'Ruby/shell backtick execution' at SKILL.md:19 and :32. Actual content: ASCII decision tree using Unicode box-drawing characters (│, └). Not shell execution.
مشكلات منخفضة المخاطر (2)
SKILL.md:3SKILL.md:155
False Positive: Weak Cryptographic Algorithm
Static scanner detected 'weak cryptographic algorithm' at SKILL.md:3 and :155. Actual content: Frontmatter description and concluding text about browser game development. No cryptographic algorithms present.
SKILL.md:30SKILL.md:80
False Positive: System Reconnaissance
Static scanner detected 'system reconnaissance' at SKILL.md:30 and :80. Actual content: 'Hybrid / Canvas' (game type) and 'Object pooling' (performance technique). No system reconnaissance present.
تم تدقيقه بواسطة: claude

درجة الجودة

38
الهندسة المعمارية
100
قابلية الصيانة
87
المحتوى
50
المجتمع
96
الأمان
91
الامتثال للمواصفات

ماذا يمكنك بناءه

اختيار الإطار للعبة ثنائية الأبعاد

يحتاج مطور يبدأ لعبة متصفح ثنائية الأبعاد للاختيار بين Phaser (ميزات كاملة) أو PixiJS (أداء العرض). يساعد شجرة القرار في تحديد الخيار الصحيح بناءً على متطلبات المشروع.

تمكين دعم WebGPU

فريق يبني لعبة تعتمد بشكل كبير على الرسومات يريد استخدام WebGPU لأداء أفضل. توفر المهارة مصفوفة دعم المتصفح واستراتيجية الاحتياطي للمتصفحات القديمة.

تحسين وقت تحميل اللعبة

يلاحظ مطور أن لعبته على الويب تتحمل ببطء على الأجهزة المحمولة. توجه المهارة ضغط الأصول (KTX2 وDraco وWebP) واستراتيجيات التحميل الكسول لتقليل التحميل الأولي.

جرّب هذه الموجهات

مساعدة اختيار الإطار 
I want to build a [2D/3D] browser game with [specific features]. Which framework should I use?
تنفيذ WebGPU 
How do I implement WebGPU with WebGL fallback for my browser game?
إعداد لعبة PWA 
What are the requirements to make my browser game a Progressive Web App with offline support?
استراتيجية تحسين الأصول 
What compression formats should I use for textures, audio, and 3D models in my web game?

أفضل الممارسات

  • ابدأ بـ WebGPU tetapi selalu sediakan cadangannya WebGL untuk dukungan browser yang lebih luas (~73% cakupan WebGPU)
  • Compress semua aset menggunakan KTX2 untuk tekstur, WebM/Opus untuk audio, dan glTF dengan Draco untuk model 3D
  • Tangani visibilitas tab - jeda loop game saat tab browser disembunyikan untuk mencegah pemborosan sumber daya

تجنب

  • Memuat semua aset game saat startup alih-alih pemuatan progresif
  • Mengabaikan batasan autoplay audio tanpa memerlukan interaksi pengguna
  • Mengasumsikan semua pengguna memiliki koneksi cepat - selalu tangani kondisi jaringan lambat

الأسئلة المتكررة

Apa kerangka kerja terbaik untuk game browser 2D?
Phaser 4 terbaik untuk fitur game lengkap. PixiJS 8 terbaik untuk proyek yang fokus pada渲染 yang membutuhkan performa mentah.
Haruskah saya menggunakan WebGPU atau WebGL?
Untuk proyek baru, gunakan WebGPU dengan fallback WebGL. Ini memberikan akses ke grafis modern sambil mendukung ~73% browser.
Bagaimana cara membuat game saya dapat diinstal?
Buat manifes aplikasi web, tambahkan service worker untuk caching, dan layankan melalui HTTPS. Ini memungkinkan instalasi layar utama dan bermain offline.
Format aset apa yang harus saya gunakan?
Gunakan KTX2 + Basis Universal untuk tekstur, WebM/Opus untuk audio, dan glTF dengan kompresi Draco untuk model 3D.
Mengapa audio tidak diputar secara otomatis?
Kebijakan autoplay browser memerlukan interaksi pengguna. Buat AudioContext pada klik atau ketukan pertama.
Bagaimana cara mengoptimalkan untuk seluler?
Compress aset secara agresif, terapkan pemuatan lambat, tangani input sentuh dengan benar, dan uji pada perangkat low-end.

تفاصيل المطور

المؤلف

sickn33

الترخيص

MIT

المستودع

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/game-development/web-games

مرجع

main

بنية الملفات

📄 SKILL.md