ملخص: لقد تم لعب لعبة Tetris ثنائية الأبعاد بشكل سيء من قبل الناس، لذلك قمت بصنع وحدة تحكم ألعاب ثلاثية الأبعاد للعب Tetris. . . الفكرة الأساسية للتنفيذ هي أولاً تنفيذ لعبة Tetris المصغرة ثنائية الأبعاد، ثم استخدام وظيفة النمذجة ثلاثية الأبعاد لإنشاء نموذج أركيد ثلاثي الأبعاد، وأخيرًا لصق اللعبة المصغرة ثنائية الأبعاد على النموذج ثلاثي الأبعاد.
(ملاحظة: جزء التوسيع النهائي يدرك الجمع بين الفيديو والنموذج ثلاثي الأبعاد)
http://www.hightopo.com/demo/tetris/
تنفيذ التعليمات البرمجيةأولاً، أكمل اللعبة المصغرة ثنائية الأبعاد
في عملية التحقق من المستندات الرسمية، تعلمت أن معلمات مكون HT يتم تخزينها في كائن ht.DataModel()، ويتم عرض تأثيرات خاصة مختلفة بعد تحميل نموذج البيانات في العرض.
gameDM = new ht.DataModel(); // تهيئة نموذج البيانات g2d = new ht.graph.GraphView(gameDM); // تهيئة العرض ثنائي الأبعاد g2d.addToDOM();
البدء في إنشاء نماذج اللعبة
الخطوة الأولى هي إنشاء إطار للعبة وتحديد نطاق اللعبة. في المستند، يمكننا أن نعرف أن ht.Node هي الفئة الأساسية لـ graphView لعرض العناصر الأولية للعقدة، بالإضافة إلى عرض الصور، يمكنها أيضًا دعم مجموعة متنوعة من الرسومات المحددة مسبقًا. لذلك سأستخدم هذا الفصل لإنشاء 4 مستطيلات واستخدامها لتحديد نطاق اللعبة.
var lineNode = new ht.Node();lineNode.s({ Shape: rect, //شكل مستطيل.خلفية: #D8D8D8, //تعيين لون الخلفية Shape.border.width: 1, //عرض الحدود 1 شكل. border .color: #979797 // Border color}); lineNode.setPosition(x, y); // تعيين موضع عرض العنصر، الزاوية اليسرى العليا هي 0، 0 تشير إحداثيات العناصر الأولية إلى مواقعها المركزية lineNode.setSize(width, height); // تعيين سمات العرض والارتفاع للأوليات gameDM.add(lineNode); // أضف مجموعة المعلومات الأولية إلى نموذج البياناتبعد ضبط x:552، y:111، العرض:704، الارتفاع:22 يمكننا الحصول على الرسم الأول:
الجزء العلوي من الحد موجود بالفعل، الآن دعونا ننشئ ثلاثة جوانب أخرى لتشكيل الإطار:
س:211، ص:562، العرض:22، العرض:880x:893، ص:562، العرض:22، العرض:880x:552، ص:1013، العرض:704، العرض:22
والنتيجة هي كما يلي:
اكتملت الحدود بشكل أساسي أثناء عملية التصفح، وجدت أنه يمكن سحب 4 حدود. بعد ذلك، اضبط طريقة تهيئة الحدود:
lineNode.s({ الشكل: مستطيل، // شكل مستطيل. الخلفية: #D8D8D8، // تعيين لون الخلفية Shape.border.width: 1، // عرض الحدود 1 Shape.border.color: #979797، // الحدود color 2d.editable : false, // ما إذا كان يمكن تحريره 2d.movable : false, // ما إذا كان يمكن نقله 2d.selectable : false // ما إذا كان يمكن تحديده });لإنشاء مربعات، فكرتي هي إنشاء مربعات متعددة، ودمجها في الرسومات التي نحتاجها، ووضعها في المواضع المقابلة من خلال حساب الإحداثيات:
بعد إنشاء الكتلة، ابدأ عملية التدوير على الرسومات. هناك حلان: الأول هو تخزين الإحداثيات المعكوسة للرسومات في مصفوفة بالترتيب، وفي كل مرة يتم فيها تغيير الشكل، خذ المجموعة السابقة أو التالية من الإحداثيات في المصفوفة لإجراء التغييرات؛ يتم استخدام إحداثيات الرسومات المعكوسة للرسومات بالترتيب. يتم استخدام كائن ht.Block() لدمج البدائيات المقابلة في الكل، عند التشوه، ما عليك سوى تحديد 90 درجة في الاتجاه المقابل. وهنا اخترت الطريقة الثانية، الكود كالتالي:
دالة createUnit(x, y) { var العقدة = new ht.Node(); }); Node;}var block = new ht.Block();block.addChild(createUnit(552, 133));block.addChild(createUnit(552, 89));block.addChild(createUnit(508, 133));block .addChild(createUnit(596, 133));block.setAnchor(0.5, 0.75); // اضبط الموضع المركزي للمجموعة. سيتم تثبيت هذه النقطة عند التدوير block.setPosition(552, 144);يقوم Block بتعيين النقطة المركزية Anchor كما هو موضح أدناه:
عند ضبط التدوير، ما عليك سوى استخدام وظيفة setRotation لتدوير الكتلة:
نسخ الرمز