لم أستخدم القماش لفترة طويلة، لذلك تعرفت على القماش مرة أخرى من خلال كتابة لعبة صغيرة تتريس. إذا كان لديك أساس معين من القماش، فليس من الصعب تنفيذه.
شرح مفصل للمبدأبالنظر إلى الواجهة النهائية للعبة، يمكننا أن نرى أنه يجب تنفيذ الوظائف الرئيسية التالية:
اللوحة بأكملها عبارة عن نظام إحداثي حيث الزاوية اليسرى العليا (0,0) هي الأصل، والزاوية اليمنى العليا (12,0)، والزاوية اليسرى السفلية (0,20)، والزاوية اليمنى السفلية (12,20) ) يمكن تحديد الموقع الإحداثي لكل نقطة. سواء تم ملء المربع، يمكننا التفكير في كل مربع كعنصر مصفوفة، 0 يعني لا، 1 يعني أنه قد تم ملؤه. تستخدم اللوحة 12 * 20 طبقتين من المصفوفات، أي أنه يتم تنفيذ 20 مصفوفة بطول 12.
خرائط فار = [[0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,1,0 ,1,0], ...];
يمكن تنفيذ كود رسم اللوحة باستخدام واجهة برمجة تطبيقات Canvas الأساسية.
// الشبكة for(var i=0;i<12;i++){ for(var j=0;j<20;j++){ ctx.fillRect(i*40,j*40,40,40); StrokeRect(i*40,j*40,40,40); ctx.lineWidth=4; ctx.fillStyle='hsla(200,100%,50%,.5)'; ctx.strokeStyle='hsla(200,100%,50%,.9)'; ي*40,40,40); ctx.strokeRect(i*40+2,j*40+2,38,38); ctx.restore(); } } } // الحدود ctx.lineWidth=4; ctx.strokeStyle='hsla(0,100%,0 %,.3)'; ctx.moveTo(0,0); ctx.lineTo(12*40,20*40); ctx.lineTo(12*40,0); تنفيذ الكتليتم استخدام الرسومات السبعة التالية في اللعبة
بالاشتراك مع نظام الإحداثيات المقدم أعلاه، فإن المصفوفة [x1، y1، x2، y2، x3، y3، x4، y4] هي تمثيل بيانات إحداثيات النقاط الأربع في الرسومات أعلاه على النحو التالي:
فار آر = [[4،0،4،1،5،1،6،1]،[4،1،5،1،6،1،6،0]،[4،0،5،0،5،1، 6,1],[4,1,5,0, 5,1,6,0],[5,0,4,1,5,1,6,1],[4,0,5,0,6,0,7,0],[5,0, 6,0,5,1,6,1]];
لتحريك الكتلة، ما عليك سوى اجتياز المصفوفة بأكملها وإضافة متجه الإزاحة، وهو أمر بسيط للغاية.
class Shape { buildor(m){ this.m = Object.assi([],m } move(x,y){ // الإزاحة var m = this.m, l = m.length; |0; for (var i=0;i<l;i=i+2){ m[i]+=x;دوران الكتل بالإضافة إلى التحرك يسارًا ويمينًا ولأعلى ولأسفل، فإن الكتل في تتريس تدور أيضًا، أليس كذلك؟ بعد قليل من التفكير، ستعرف أن هذا مجرد تحويل للمصفوفة، أي في كل مرة يتم فيها تدوير الشكل بمقدار 90 درجة حول نقطة المركز. أستخدم النقطة الثالثة في المصفوفة كنقطة مركزية لتحويل الرسومات. بالطبع، هذه المعالجة ليست مثالية.
فئة الشكل { تحويل () {// تحويل المصفوفة ثنائية الأبعاد var m =this.m, l = m.length, c = Math.ceil(l/2), x = m[c], y = m[c+ 1]، cos = Math.cos(Math.PI/180 * 90)، sin = Math.sin(Math.PI/180 * 90); for (var i=0;i<l;i=i+2) { if(i == c) continue; var mx = m[i]- x, my = m[i+1] - y, nx = mx*cos - my*sin, ny = my*cos + mx*sin; m[i]=x+nx; m[i+1]=y+ny } return this }; شروط الحدودويشمل بشكل رئيسي الجوانب الثلاثة التالية
اجتياز المصفوفة (1) عندما يكون الإحداثي y لأي نقطة هو 19، فهذا يعني أنها وصلت إلى القاع؛ (2) احصل على معلومات حول موضع الإحداثي y+1 في الخرائط لقد تم ملؤه. في كلتا الحالتين، عندما تنتهي فترة الكتلة المتحركة، ما عليك سوى ملء إحداثيات الكتلة في المصفوفة المقابلة للخرائط.
إذا تم ملء y+1 للإحداثي وكان الإحداثي الحالي أقل من 1، أي أنه موجود بالفعل في الجزء العلوي من الواجهة، فستنتهي اللعبة.
var isEnd = false,isOver=false,x,y;for(var i=0,sl=that.shape.m.length;i<sl;i=i+2){ x=that.shape.m[i ]; y=that.shape.m[i+1]; if(y >= 19){ // في الأسفل isEnd = true;break } if(that.maps[y+1][x]== 1) { // تم ملء موضع y+1 isEnd = true; if(y <= 1){isOver=true;} // انتهت اللعبة }}في نهاية دورة حركة الكتلة، يتم التحقق مما إذا كانت كل طبقة ممتلئة، والمعالجة بعد امتلاء المربع. إذا كانت جميع عناصر مصفوفة معينة هي 1، فهذا يعني أن الشبكة ممتلئة، ثم احذف المصفوفة، وفي نفس الوقت ادفع المصفوفة التي تحتوي على كل عنصر من 0 إلى رأس القائمة.
checkPoint(){ var that = this,maps = that.maps; for(var i=0,l=maps.length;i<l;i++){ if(Math.min.apply(null,maps[i]) == 1){// يشير إلى أن الطبقة ممتلئة that.maps.splice(i,1); زيادة النتيجة التي.maps.unshift([0,0,0,0,0,0,0,0,0,0,0,0]); أحداث ملزمةالشيء الرئيسي هو ربط حدث keydown. وتجدر الإشارة إلى أن أحداث التحول إلى اليسار والتحول إلى اليمين تتضمن حكمًا حدوديًا.
bindEvent(){ var that = this; document.addEventListener('keydown',function(e){ Switch(e.keyCode){ الحالة 13: //أدخل CancelAnimationFrame(that.timer); that.init().update( ); استراحة; الحالة 80: //p that.pause = !that.pause; // اليسار var over = false, Maps = that.maps, Shape = that.shape, m = Shape.m; for(var i=0,l=m.length;i<l;i=i+2){ if(m[i]<=0 ||maps[m[i+1]][m[i]-1] == 1){ over = true;break; -1،0)؛ استراحة 39: //يمين var over = false, Shape = that.shape, Maps = that.maps, m = Shape.m; for(var i=0,l=m.length;i<l;i=i+2 ){ if(m[i]>=11 || Maps[m[i+1]][m[i]+1] == 1){ over = true;break; } } if(!over). نقل (1،0)؛ استراحة؛ الحالة 32: //مساحة that.shape.transform(); تلخيصيتم تنفيذ الوظائف الأساسية لـ Tetris هنا، ولا يتم تنفيذ النقاط الوظيفية مثل المستويات، وفي الوقت نفسه، لا يزال العرض التوضيحي به عيوب تحتاج إلى تصحيح.
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.