เรื่องย่อ: ผู้คนเล่น 2D Tetris ได้แย่มาก ดังนั้นฉันจึงสร้างเกมคอนโซล 3D สำหรับเล่นเกม Tetris ขึ้นมา - - แนวคิดพื้นฐานของการนำไปใช้คือการใช้มินิเกม Tetris ในรูปแบบ 2D ก่อน จากนั้นใช้ฟังก์ชันการสร้างแบบจำลอง 3 มิติเพื่อสร้างโมเดลอาร์เคด 3 มิติ และสุดท้ายวางมินิเกม 2D ลงในโมเดล 3 มิติ
(ปล.: ส่วนขยายสุดท้ายเป็นการผสมผสานระหว่างวิดีโอและโมเดล 3 มิติ)
http://www.hightopo.com/demo/tetris/
การใช้รหัสขั้นแรก จบมินิเกม 2D
ในกระบวนการตรวจสอบเอกสารอย่างเป็นทางการ ฉันได้เรียนรู้ว่าพารามิเตอร์ส่วนประกอบของ HT ถูกจัดเก็บไว้ในออบเจ็กต์ ht.DataModel() และเอฟเฟกต์พิเศษต่างๆ จะถูกนำเสนอหลังจากโหลดโมเดลข้อมูลในมุมมอง
gameDM = new ht.DataModel(); // เริ่มต้นโมเดลข้อมูล g2d = new ht.graph.GraphView(gameDM); // เริ่มต้นมุมมอง 2d g2d.addToDOM(); // สร้างมุมมองบนเพจ
เริ่มสร้างโมเดลเกม
ขั้นตอนแรกคือการสร้างเฟรมสำหรับเกมและกำหนดขอบเขตของเกม ในเอกสาร เราสามารถรู้ได้ว่า ht.Node เป็นคลาสพื้นฐานสำหรับ graphView เพื่อเรนเดอร์โหนดดั้งเดิม นอกเหนือจากการแสดงรูปภาพแล้ว ยังสามารถรองรับกราฟิกที่กำหนดไว้ล่วงหน้าที่หลากหลายอีกด้วย ดังนั้นฉันจะใช้คลาสนี้เพื่อสร้างสี่เหลี่ยม 4 อันและใช้เพื่อกำหนดขอบเขตของเกม
var lineNode = new ht.Node();lineNode.s({ รูปร่าง: rect, //Rectangle shape.พื้นหลัง: #D8D8D8, //ตั้งค่าสีพื้นหลัง shape.border.width: 1, //ความกว้างของเส้นขอบ 1 รูปร่าง border .color: #979797 // Border color}); lineNode.setPosition(x, y); // ตั้งค่าตำแหน่งการแสดงองค์ประกอบ, มุมซ้ายบนคือ 0, 0 พิกัดของดั้งเดิมชี้ไปที่ตำแหน่งกึ่งกลาง lineNode.setSize(width, height); // ตั้งค่าแอตทริบิวต์ความกว้างและความสูงของ primitives gameDM.add(lineNode); // เพิ่มข้อมูลดั้งเดิมที่ตั้งไว้ให้กับโมเดลข้อมูลหลังจากตั้งค่า x:552, y:111, width:704, height:22 เราจะได้กราฟิกแรก:
ด้านบนของเส้นขอบอยู่ตรงนั้นแล้ว ตอนนี้ให้เราสร้างอีกสามด้านเพื่อสร้างกรอบ:
x:211, y:562, กว้าง:22, กว้าง:880x:893, y:562, กว้าง:22, กว้าง:880x:552, y:1013, กว้าง:704, กว้าง:22
ผลลัพธ์จะเป็นดังนี้:
โดยพื้นฐานแล้วเส้นขอบนั้นเสร็จสมบูรณ์แล้ว ในระหว่างกระบวนการเรียกดู ฉันพบว่าสามารถลากเส้นขอบได้ 4 อัน ถัดไป ปรับวิธีการเริ่มต้นเส้นขอบ:
lineNode.s({ รูปร่าง: สี่เหลี่ยมผืนผ้า //รูปร่างสี่เหลี่ยมผืนผ้า พื้นหลัง: #D8D8D8, //ตั้งค่าสีพื้นหลัง รูปร่างเส้นขอบ.ความกว้าง: 1, //ความกว้างของเส้นขอบ 1 รูปร่างเส้นขอบ.สี: #979797, //เส้นขอบ สี 2d.editable : false, // ไม่ว่าจะสามารถแก้ไขได้ 2d.movable : false, // ไม่ว่าจะสามารถย้ายได้หรือไม่ 2d.selectable : false // ไม่ว่าจะสามารถเลือกได้หรือไม่ });ในการสร้างสี่เหลี่ยม ความคิดของฉันคือการสร้างสี่เหลี่ยมหลายๆ อัน รวมเข้าด้วยกันเป็นกราฟิกที่เราต้องการ และวางไว้ในตำแหน่งที่สอดคล้องกันผ่านการคำนวณพิกัด:
หลังจากสร้างบล็อกแล้ว ให้เริ่มการหมุนบนกราฟิก มีสองวิธี วิธีแรกคือการจัดเก็บพิกัดที่พลิกของกราฟิกในอาร์เรย์และทุกครั้งที่รูปร่างมีการเปลี่ยนแปลง ให้ใช้ชุดพิกัดก่อนหน้าหรือถัดไปในอาร์เรย์เพื่อทำการเปลี่ยนแปลง พิกัดกราฟิกที่กลับด้านของกราฟิกตามลำดับ วัตถุ ht.Block() ใช้เพื่อรวมวัตถุพื้นฐานที่สอดคล้องกันเป็นทั้งหมด เมื่อเปลี่ยนรูป คุณจะต้องเลือก 90° ในทิศทางที่สอดคล้องกัน ที่นี่ฉันเลือกวิธีที่สอง รหัสมีดังนี้:
ฟังก์ชั่น createUnit(x, y) { var node = new ht.Node(); node.s({ รูปร่าง: ตรง, รูปร่างพื้นหลัง: #D8D8D8, รูปร่าง.border.width: 1, รูปร่าง.border.color: #979797 }); node.setPosition(x, y); node.setSize(44, 44); gameDM.add(โหนด); node;}var block = new ht.Block();block.addChild(createUnit(552, 133));block.addChild(createUnit(552, 89));block.addChild(createUnit(508, 133));บล็อก .addChild(createUnit(596, 133));block.setAnchor(0.5, 0.75); //ตั้งค่าตำแหน่งกึ่งกลางของการรวมกัน จุดนี้จะถูกติดตั้งเมื่อหมุน block.setPosition(552, 144);Block ตั้งค่าจุดศูนย์กลาง Anchor ดังแสดงด้านล่าง:
เมื่อตั้งค่าการหมุน เพียงใช้ฟังก์ชัน setRotation เพื่อหมุนบล็อก:
คัดลอกรหัส