لقد شاهدت بضع حلقات من مقاطع فيديو Canvas على MOOC من قبل، وكنت أرغب دائمًا في التدرب على كتابة شيء ما. أشعر أن Snake بسيط نسبيًا عندما كنت في الكلية، وكتبت أيضًا نسخة شخصية من لغة C. وبشكل غير متوقع، ما زلت أواجه العديد من المشكلات.
التأثير النهائي هو كما يلي (إذا كانت الصورة كبيرة جدًا، فستستغرق وقتًا طويلاً. برنامج تسجيل GIF له حد زمني...)
ابدأ بتحديد منطقة اللعبة. يوجد عنصران فقط على شاشة Snake: جسم الثعبان والتفاحة، ويمكن أن يتكون كلاهما من شبكات مربعة. إضافة الفجوات بين المربعات. لماذا إضافة الثغرات؟ يمكنك أن تتخيل أنه عندما تملأ جميع الشبكات بنجاح، إذا لم تكن هناك فجوات، فسيكون مربعًا كبيرًا مصمتًا... ليس لديك أي فكرة عن شكل جسم الثعبان.
ارسم صورة.
إحداثيات الزاوية اليسرى العليا من الشبكة هي (0، 0)، ويزيد الإحداثي الإحداثي إلى اليمين، ويزيد الإحداثي إلى الأسفل. هذا الاتجاه هو نفس Canvas.
في كل مرة نرسم فيها شبكة، علينا أن نبدأ من الزاوية اليسرى العليا. نحن نعلم دائمًا أن إحداثيات الزاوية اليسرى العليا من Canvas هي (0، 0) على افتراض أن طول ضلع الشبكة هو GRID_WIDTH والعرض الفجوة هي GAP_WIDTH، يمكننا الحصول على (i، j) إحداثيات الزاوية اليسرى العليا من الشبكة (i*(GRID_WIDTH+GAP_WIDTH)+GAP_WIDTH، ي*(GRID_WIDTH+GAP_WIDTH)+GAP_WIDTH) .
لنفترض أن جسم الثعبان يتكون من ثلاث شبكات زرقاء، لا يمكننا رسم ثلاث شبكات فحسب، بل أيضًا فجوتين أرجوانيتين، وإلا، كما ذكرنا من قبل، فلن تعرف كيف يبدو جسم الثعبان. كما هو موضح في الصورة أدناه، على الرغم من إمكانية لعبها دون رسم فجوات، إلا أن التجربة ستكون مختلفة بالتأكيد.
ارسم فجوات بين الشبكات المتجاورة دون رسم فجوات
الآن يمكننا أن نحاول رسم الثعبان. جسم الثعبان هو في الواقع مجموعة من الشبكات، ويتم تمثيل كل شبكة بمصفوفة تحتوي على معلومات موقعين، ويمكن تمثيل الثعبان بأكمله بمصفوفة ثنائية الأبعاد.
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>blog_snack</title> <style> #canvas { لون الخلفية: #000 } </style></ head><body> <canvas id=canvas></canvas> <script> const GRID_WIDTH = 10; // طول ضلع الشبكة const GAP_WIDTH = 2; // الطول الجانبي للفجوة const ROW = 10; // إجمالي عدد صفوف الشبكات وعدد الشبكات الموجودة في كل صف Let Canvas = document.getElementById('canvas'); = GRID_WIDTH * ROW + GAP_WIDTH * ( ROW + 1)؛ = Canvas.getContext('2d'); دع الوجبات الخفيفة = [ [2, 3], [2, 4], [2, 5], [3, 5], [4, 5], [4, 4], [5, 4], [5, 5] ]; // تهيئة واحدة