في الآونة الأخيرة ، أرادت لعبة Rubik's Cube كتابة نموذج Miku مع HMTL5.
فيما يلي شاشة معاينة. عملية الإنتاجتحتاج أولاً إلى تنزيل HTML5 Open Source Library Lufylegend -.4.0
ينقسم مكعب Rubik إلى 6 طائرات ، يتكون كل منها من 9 مستطيلات صغيرة.
لأنه الآن هو مكعب Rubik ثلاثي الأبعاد ، لرسم كل مستطيل صغير ، تحتاج إلى معرفة 4 نقاط ثابتة من المستطيل الصغير ، وسيتم تحويل هذه النقاط الثابتة الأربع وفقًا لزاوية الدوران في المساحة. زاوية مكعب روبيك حول محور X و Z.
لذلك ، فإن إنشاء الطبقة المستطيلة على النحو التالي
وظيفة Rect (pointa ، pointb ، pointc ، pointd ، Anglex ، Anglez ، color) {base (this ، lsprite ، []) ؛ )/4 ، (pointa [1]+pointb [1]+pointc [1]+pointd [1]/4 ، (pointa [2]+pointb [2]+pointc [2]+pointd [2 2]/4 ] ؛ color = color ؛} rect.protype.Pointa ، Pointc ، Pointd هي الرؤوس الأربعة للمستطيلات الصغيرة.
ينقسم مكعب Rubik إلى 6 طائرات ، انظر أولاً إلى الجانب الأمامي. أقل.
لذلك ، يمكن إنشاء المستطيلات الصغيرة التسعة على الجانب السابق من خلال الكود التالي
لـ (var x = 0 ؛ x <3 ؛ x ++) {for (var y y = 0 ؛ y <3 ؛ y ++) {z = 3 ؛ 2*الخطوة ، -3*الخطوة + y*2*الخطوة ، -3*الخطوة + z*2*الخطوة] ، [-step + x*2*الخطوة ، -3*الخطوة + y*2*الخطوة ، -3 *الخطوة + z*2*الخطوة] ، [-step + x*2*الخطوة ، -step + y*2*الخطوة ، -3*الخطوة + z*2*الخطوة] ، [-3*الخطوة + x*2 *الخطوة ، الخطوة + y*2*الخطوة - الخطوة + z*2*الخطوة] ، 0،0 ،#ff0000) ؛من بينها ، Backloyer هي فئة LSPRITE.
تم إنشاء ستة شعيرية.
وفقًا للشكل أعلاه ، يمكنك الحصول على إحداثيات نقطة ثابتة بعد تحويل الصيغة التالية
rect.prototype.getPoint = function (p) {var u2 ، v2 ، w2 ، u = p [0] ، v = p [1] ، w = p [2] ؛ ) - V * Math.sin (this.anglex) ؛ = W2 ؛ this.anglez) ؛أخيرًا ، ارسم هذا المستطيل وفقًا للإحداثيات الأربعة الثابتة للمستطيل الصغير ،
rect.prototype.draw = function (layer) {this.graphics.clear () ؛ ، this.color) ؛} ؛} ؛} ؛من بينها ، تعتبر DrawVertices طريقة لفئة Lgraphics في مكتبة Lufylegend.js.
أخيرًا ، يتم إعطاء الرمز الكامل ، والرمز صغير جدًا.
أولا ، index.html<! اكتب = text/javaScript src = ../lufylegend -.4.0.min.js> </script> <script type = text/javaScript src =./main.js> </script> xt/javaScript src =./rect .js> </script> </body> </html>ثانياً ، فئة المستقيم
وظيفة Rect (pointa ، pointb ، pointc ، pointd ، Anglex ، Anglez ، color) {base (this ، lsprite ، []) ؛ )/4 ، (pointa [1]+pointb [1]+pointc [1]+pointd [1]/4 ، (pointa [2]+pointb [2]+pointc [2]+pointd [2 2]/4 ] ؛ .Color = color ؛} rect.protype.draw = function (layer) {this.graphics.clear () ؛ GetPoint (this.pointc) ، this.getPoint (this.pointd) ، True ، this.color) ؛} ؛ this.getPoint (this.pointz) [2] ؛ = u * math.cos (this.anglex) -v * math.sin (this.anglex) ؛ ؛ .anglez) ثالثا ، main.js init (50 ، 400،400 .y = 120 ؛ -3*الخطوة + x*2*الخطوة ، -3*الخطوة + y*2*الخطوة ، -3*الخطوة + z*2*الخطوة] ، [-step + x*2*الخطوة ، -3*الخطوة + y *2*الخطوة ، -3*الخطوة + z*2*الخطوة] ، [-step + x*2*الخطوة ، -step + y*2*الخطوة ، -3*الخطوة + z*2*الخطوة] ، [ - 3 الخطوة + x*2*الخطوة + y*2*الخطوة ، الخطوة + z*2*الخطوة] ، 0،0 ،#ff4500) ؛ لـ (var x = 0 ؛ x <3 ؛ x ++) {for (var y y = 0 ؛ y <3 ؛ y ++) {z = 3 ؛ 2*2*2*2*الخطوة ، -3*الخطوة + y*2*الخطوة ، -3*الخطوة + z*2*الخطوة] ، [-step + x*2*الخطوة ، -3*الخطوة + y* 2*الخطوة ، -3*الخطوة + z*2*الخطوة] ، [-step + x*2*الخطوة ، -step + y*2*الخطوة ، -3*الخطوة + z*2* *الخطوة + x*2*الخطوة + y*2*الخطوة ، الخطوة + z*2*الخطوة] ، 0،0 ،#ff0000) ؛ (var x = 0 ؛ x <3 ؛ x ++) {for (var z = 0 ؛ z <3 ؛ z ++) {y = 0 ؛ *الخطوة ، -3*الخطوة + y*2*الخطوة ، -3*الخطوة + z*2*الخطوة] ، [-step + x*2*الخطوة ، -3*الخطوة + y*2*الخطوة ، -3* الخطوة + z*2*الخطوة] ، [ -الخطوة + x*2*الخطوة ، -3*الخطوة + y*2*الخطوة ، -step + z*2*الخطوة] ، [-3*الخطوة + x*2* الخطوة ، -3*الخطوة + y*2*2*الخطوة + z*2*الخطوة] ، 0،0 ،#ffffff) ؛ x <3 ؛ 3*الخطوة + y*2*الخطوة ، -3*الخطوة + z*2*الخطوة] ، [-step + x*2*الخطوة ، -3*الخطوة + y*2*الخطوة ، -3*الخطوة + z* 2*الخطوة] ، [-step + x*2*الخطوة ، -3*الخطوة + y*2*الخطوة ، -step + z*2*الخطوة] ، [-3*الخطوة + x*2*الخطوة ، -3 *الخطوة + y*2*الخطوة + z*2*الخطوة] ، 0،0 ،#ffff00) ؛ y ++) {for (var z = 0 ؛ z <3 ؛ z ++) {x = 0 ؛ 2*الخطوة ، -3*الخطوة + z*2*الخطوة] ، [-3*الخطوة + x*2*الخطوة ، -3*الخطوة + y*2*الخطوة ، -step + z*2*الخطوة] ، [ -3*Step + X*2*Step ، -step + y*2*Step ، -الخطوة + z*2*الخطوة] ، [-3*الخطوة + x*2*الخطوة ، -step + y*2*الخطوة ، -3*الخطوة +z*2*الخطوة] ، 0،0 ،#008000) ؛ (var z = 0 ؛ z <3 ؛ z ++) {x = 3 ؛ *الخطوة + z*2*الخطوة] ، [-3*الخطوة + x*2*الخطوة ، -3*الخطوة + y*2*الخطوة ، -step + z*2*الخطوة] ، [-3*الخطوة + x *2*الخطوة ، -step + y*2*الخطوة ، -step + z*2*الخطوة] ، [-3*الخطوة + x*2*الخطوة ، -step + y*2*الخطوة ، -3*الخطوة + z*2*الخطوة] ، 0،0 ،#0000FF) ؛ ؛ childlist [key] .draw (backlayer) ؛}}هذا مجرد نموذج ثلاثي الأبعاد بسيط للغاية.