KANA: أرنب رامي سهام بفن البكسل

Prompt

سجّل الدخول للنسخ

أنشئ ملف HTML واحدًا مكتفيًا بذاته يعرض شخصية أرنب رامٍ بالسهام برسوم بكسلية متحركة باستخدام JavaScript الأصلي وCanvas 2D. استخدم شخصية الأرنب KANA المرفقة مرجعًا بصريًا: فرو أبيض؛ أذنان كبيرتان منتصبتان بتفاصيل داخلية مضيئة بالسماوي/الأزرق؛ عين زرقاء طبيعية وعين ميكانيكية سيبرانية حمراء؛ سترة صفراء بقلنسوة تحمل «KANA»؛ قفازات وسروال بالأزرق الداكن؛ دروع أرجل ميكانيكية مستقبلية بالأصفر/الأزرق؛ نسب تشيبي لطيفة؛ قوس وسهم مستقبليان؛ جعبة صغيرة على الظهر. لا تستخدم أصولًا خارجية أو مكتبات أو صورًا أو خطوطًا أو طلبات شبكة. يجب رسم كل شيء إجرائيًا بواسطة الكود. العرض - ارسم كل شيء أولًا على canvas خارج الشاشة بدقة منطقية ثابتة 160x120. - كبّره على canvas عرض بملء الشاشة باستخدام أكبر معامل تكبير صحيح يتسع لنافذة المتصفح، ووسّطه. - اضبط imageSmoothingEnabled = false وخاصية CSS‏ image-rendering: pixelated. - اجعل جميع الإحداثيات أعدادًا صحيحة. لا تدرجات لونية أو ضبابية أو تنعيم حواف أو shadowBlur أو رسم بأجزاء البكسل. - استخدم لوحة ثابتة من نحو 28 لونًا: كحلي داكن للخلفية، أبيض/رمادي للفرو، درجات أصفر للسترة، أزرق للملابس، أحمر للعين السيبرانية، سماوي لإضاءة الأذنين، وأصفر/برتقالي لمؤثرات القوس والسهم. الشخصية ابنِ الأرنب إجرائيًا من مستطيلات بكسلية وصفوف بكسلات تشبه المضلعات ودوائر مقربة بالبكسلات وأشكال كتلية بسيطة. الحجم التقريبي: عرض 28–34 بكسلًا وارتفاع 40–48 بكسلًا. حافظ على هيئة يسهل التعرف عليها: أذنا أرنب كبيرتان، رأس مستدير منفوش، جسم صغير، عين سيبرانية حمراء، سترة صفراء، أرجل ميكانيكية، قوس، سهم وجعبة. حرّك الأذنين والرأس والذراعين والساقين والسترة والقوس والسهم والجسم بصورة مستقلة. كمّم الوضعيات إلى خطوات منفصلة بحيث تبدو الحركة كتحريك سبرايت متقن بسرعة 8–12 إطارًا/ثانية، رغم أن الحلقة الرئيسية ترسم بسرعة 60 إطارًا/ثانية. الأفعال أنشئ عرضًا متحركًا متكررًا يتضمن هذه الأفعال الثمانية: 1. IDLE — الاستعداد - يقف الأرنب مستعدًا؛ يتمايل الجسم قليلًا، وتتحرك الأذنان بخفة، وتتأرجح السترة والجعبة. - تنبض العين السيبرانية برفق، ويُمسك القوس باسترخاء على الجانب. 2. RUN — الركض - ركض سريع إلى الأمام مع تناوب قوي لحركة الساقين، بينما توازن الذراعان الحركة. - القوس في يد واحدة، والجعبة ترتد، والأذنان تميلان قليلًا إلى الخلف، وتظهر بكسلات غبار صغيرة تحت القدمين. 3. AIM — التصويب - يثبت الأرنب قدميه، ويرفع القوس، ويسحب سهمًا من الجعبة، ويضعه على الوتر، ثم يشد الوتر إلى الخلف. - تركز إحدى العينين على الهدف، وتزداد العين السيبرانية سطوعًا، ويميل الجسم قليلًا باتجاه الرمية. 4. SHOOT — إطلاق السهم - أطلق الوتر؛ ينطلق السهم سريعًا عبر الشاشة، ويرتد القوس قليلًا، وتتابع الذراع الحركة. - أثر طاقة أصفر ساطع خلف السهم، واهتزاز خفيف للشاشة بمقدار 1–2 بكسل، ووميض أحمر من العين السيبرانية، وانفجار ضوئي وجيز من القوس شبيه بوميض فوهة سلاح. 5. JUMP — القفز - يقرفص الأرنب، ثم يقفز إلى الأعلى ويضم ساقيه تحت جسمه. - تستجيب الأذنان بتأخر، ويظل القوس قريبًا من الجسم، وتظهر دفعة غبار صغيرة عند الانطلاق. - أضف انضغاطًا وتمددًا طفيفين باستخدام تحويلات بأعداد صحيحة تحافظ على البكسلات. 6. DODGE / ROLL — المراوغة / التدحرج - ينخفض الأرنب بسرعة ويتدحرج جانبيًا، مع إبقاء القوس قريبًا من الجسم وإرجاع الأذنين مسطحتين إلى الخلف. - جسيمات غبار صغيرة وبكسلات حركة؛ تنتهي الحركة بوضعية منخفضة جاهزة للقتال. 7. HURT / HIT — الإصابة / الضربة - يُدفع الأرنب قليلًا إلى الخلف، ويرتد رأسه فجأة، وتتفاعل الأذنان بوضوح، وترتعش إضاءة العين السيبرانية. - تظهر نجوم بكسلية صغيرة أو شرارات ارتطام؛ ينخفض القوس أو يكاد يسقط. تتعافى الشخصية بعد مهلة قصيرة. 8. VICTORY — النصر - يرفع الأرنب القوس فوق رأسه بتعبير سعيد، وأذن مائلة بمرح، وعين سيبرانية متوهجة بقوة. - جسيمات احتفال صفراء صغيرة وقفزة نصر قصيرة. يجب أن تبدو الوضعية النهائية لطيفة وبطولية. آلة الحالات استخدم الدورة التالية: IDLE → RUN → AIM → SHOOT → JUMP → DODGE → HURT → VICTORY → IDLE. يجب أن يستمر كل فعل مدة تكفي لفهمه بصريًا. استخدم دوال تلطيف الحركة للانتقال بين الوضعيات، وأضف حركات انتقالية قصيرة بين الحالات لتبدو الدورة متصلة بدل التبديل المفاجئ. القوس والسهم - قوس مستقبلي مقوس، بهيكل أبيض/كحلي داكن، ومفاصل ميكانيكية صفراء مضيئة، ووتر رفيع ساطع. - رأس سهم أصفر ساطع؛ يستمر أثر السهم خلال SHOOT لفترة وجيزة. يجب أن تظهر عدة أسهم داخل الجعبة. الجسيمات نفّذ نظام جسيمات يستخدم مخزونًا مسبقًا دون تخصيص ذاكرة داخل الحلقة. خصص جميع الجسيمات قبل بدء حلقة التحريك. الأنواع: غبار الخطوات، أثر السهم، شرارات طاقة القوس، شرارات العين السيبرانية، نجوم الإصابة وجسيمات النصر. يغير كل جسيم لونه ضمن اللوحة مع تقدمه في العمر. لا تنشئ كائنات جديدة داخل الحلقة الرئيسية. المشهد أنشئ بيئة بكسلية بسيطة: سماء ليلية داكنة، بضع نجوم بحجم بكسل واحد، قمر كبير، منصة بسيطة حجرية أو مستقبلية، وهيئات بعيدة خافتة جدًا. أبقِ الخلفية بسيطة لتظل هيئة الأرنب واضحة دائمًا. أثناء AIM وSHOOT أضف إضاءة حواف خفيفة بالسماوي/الأحمر من العين السيبرانية، وبالأصفر من القوس. المتطلبات التقنية ملف HTML واحد؛ JavaScript الأصلي وCanvas 2D فقط؛ دون مكتبات أو SVG أو صور خارجية أو أصول أو طلبات شبكة. خطوة زمنية ثابتة عند 60 هرتز؛ requestAnimationFrame للرسم؛ دون أي تخصيص لكائنات داخل حلقة التحريك الرئيسية؛ سرعة ثابتة 60 إطارًا/ثانية؛ تكبير متجاوب بملء الشاشة؛ بكسلات حادة مكبرة بمعامل صحيح. مستوى الجودة يجب أن تبدو النتيجة كتحريك سبرايت متقن لبطل لعبة حركة من عصر 16 بت. تجنب مظهر الأشكال الهندسية البسيطة. يجب أن يكون الأرنب معبرًا ولطيفًا وسريعًا وقادرًا على القتال. يجب أن تكون لكل فعل من الأفعال الثمانية هيئة مميزة بوضوح. حافظ على اتساق تصميم الشخصية في جميع حالات التحريك. ينبغي أن تكون النتيجة مناسبة للعبة حركة حقيقية برسوم بكسلية.