اصنع لعبة نجاة للـ متصفح بنفسك باستخدام وكلاء الذكاء الاصطناعي وأدوات الـ Sprite
TuBrief 편집팀
2026년 8월 8일
0
Video & Computer Games원본 영상을 바탕으로 AI의 도움을 받아 작성했습니다. 원본 영상이 기준입니다.
커뮤니티의 다른 글
댓글 (0)
Log in to leave a comment
아직 작성된 글이 없습니다
원본 영상을 바탕으로 AI의 도움을 받아 작성했습니다. 원본 영상이 기준입니다.
Log in to leave a comment
아직 작성된 글이 없습니다
لا داعي لإهدار المال على الاستعانة بمصادر خارجية. تكلف الاستعانة بمصادر خارجية لتصميم حركات الشخصيات 10 ساعات على الأقل وتتجاوز 500 دولار. يمكنك توفير التكاليف عن طريق استخراج Texture Atlas دفعة واحدة باستخدام مولد صور بالذكاء الاصطناعي. أدخل أمر موجه (Prompt) مثل 16-bit SNES style pixel art لإنشاء ورقة Sprite بخلفية ذات لون موحد، ثم قم بتنفيذ المعالجة بشفافية باستخدام أداة CLI.
افتح الطرفية (Terminal) وأدخل الأمر rembg i -m u2net raw_spritesheet.png transparent_spritesheet.png لحذف الخلفية باستخدام نموذج U2Net. بعد ذلك، قم بتنقية بيكسلات اللون الأبيض المتبقية بالأمر magick transparent_spritesheet.png -fuzz 15% -transparent white cleaned_spritesheet.png. وأخيراً، أدخل الأمر magick cleaned_spritesheet.png -crop 32x32 +repage tiles/frame_%02d.png لتقسيمها إلى مجموعة مربعات بحجم 32x32 بيكسل. في غضون ساعة واحدة، ستكتمل ورقة الـ Sprite الإطار تلو الآخر.
إذا تعطلت نسب عرض الارتفاع لشاشات الهواتف المحمولة وأجهزة سطح المكتب، فلن تتمكن من لعب اللعبة. للحفاظ على نفس مجال الرؤية بغض النظر عن بيئة العرض، يجب تثبيت الدقة المنطقية داخل المحرك بحجم 960x540. من خلال تطبيق خصائص flexbox و object-fit: contain في الـ CSS، يمكنك منع تشوه نسبة عرض الارتفاع على الجوال وسطح المكتب. قم بإدخال واجهة ResizeObserver API لمنع مشكلة تلف العرض من جذورها.
لتحويل موقع الماوس إلى إحداثيات افتراضية، يجب إجراء تصحيح رياضي باستخدام طريقة getBoundingClientRect. بعد الحصول على إحداثيات الحدود الفعلية للوحة الرسم (Canvas) داخل دالة مستمع الأحداث، قم بطرح إزاحة الزاوية العلوية اليسرى للوحة الرسم من إحداثيات الماوس للعميل. بعد ذلك، احسب الإحداثيات الافتراضية النهائية عن طريق الضرب في نسبة التغيير الناتجة عن قسمة عرض دقة المخزن المؤقت على عرض شاشة لوحة الرسم. تطبيق هذه المعادلة يمنع حدوث أخطاء في موقع النقرة حتى في بيئات تحجيم الشاشة.
إذا قمت بتشغيل وكلاء CLI للذكاء الاصطناعي مثل Claude Code أو Aider في وقت واحد على طرفية واحدة، فس ينقطع السياق وستتضارب اليكود. قم بتقسيم نافذة الطرفية عمودياً وأفقياً لوضع وكيل منطق اللعبة الرئيسي، ووكيل خط أنابيب واجهة المستخدم، وجلسة مراقبة اختبار البناء في مساحات مستقلة لكل منها. يؤدي الجمع بين بنية Git Worktree وهياكل ملفات الموجهات المنفصلة إلى منع تضارب الأدوار بين الوكلاء.
إجراءات إنشاء دليل عمل مستقل بسيطة. أدخل الأمر git worktree add ../agent-engine-worktree -b feature/game-engine في الطرفية لإنشاء شجرة عمل مخصصة لمحرك اللعبة. بعد ذلك، قم بتنفيذ الأمر git worktree add ../agent-ui-worktree -b feature/canvas-ui لفصل دليل واجهة المستخدم. قم بتشغيل الأمر npm run test -- --watch بشكل دائم في لوحة الاختبار السفلية اليمنى لمراقبة السجلات في الوقت الفعلي، وقم بدمج التغييرات في الفرع الرئيسي بعد التحقق منها يدويًا. ستختفي صراعات قفل الملفات تمامًا.
إذا اعتبرت نطاق الاصطدام هو كامل الـ Sprite المرئي بحجم 64x64 بيكسل والذي يتضمن هوامش شفافة، فسيتم الحكم على إصابة الشخصية على الرغم من عدم لمسها فعليًا. يجب الفصل بصرياً وبشكل صارم بين منطقة الـ Sprite المرئية ومنطقة الـ Hitbox التي يتعرف عليها محرك الفيزياء الحقيقي لتحديد صندوق إحاطة متوافق مع المحور ومركز على نقطة هدف الإصابة. عندما يظهر مئات الأعداء على الشاشة في نفس الوقت، فإن تطبيق خوارزمية Spatial Hashing سيقلل بشكل كبير من التعقيد الزمني.
قم بتهيئة فئة SpatialHashGrid لتقسيم الشاشة المنطقية إلى خلايا شبكية بحجم 60x60 بيكسل وأدخل منطقة AABB لكل كيان. قم بتنفيذ دالة takeDamage داخل فئة اللاعب والتي تحدد مدة مناعة قدرها 1000 مللي ثانية لمنع حكم الموت الفوري في كل إطار. عندما يتداخل الكيان مع العدو، يتم التحقق من متغير حالة المناعة وتطبيق الضرر وفقًا للشرط، مما يحافظ على إطارات مستقرة حتى في بيئات الحساب المتزامنة التي تزيد عن 500 كائن.