ตัวอย่างวิธีที่ Canvas นำ Tetris ไปใช้

ฉันไม่ได้ใช้ Canvas มานานแล้ว ดังนั้นฉันจึงคุ้นเคยกับ Canvas อีกครั้งโดยการเขียนเกมเล็กๆ Tetris หากคุณมีพื้นฐาน Canvas อยู่แล้ว การนำไปใช้ก็ไม่ยาก

เมื่อดูที่อินเทอร์เฟซสุดท้ายของเกม เราจะเห็นว่าจำเป็นต้องใช้งานฟังก์ชันหลักต่อไปนี้:

• บอร์ดเกมซึ่งเป็นสี่เหลี่ยมขนาด 12 * 20 และกรอกข้อมูลในช่องสี่เหลี่ยมหรือไม่
• การเคลื่อนย้ายบล็อก บล็อกจำเป็นต้องตระหนักถึงหน้าที่ของการเคลื่อนไหวและการเสียรูป

แผงทั้งหมดเป็นระบบพิกัดโดยมีมุมซ้ายบน (0,0) เป็นจุดกำเนิด มุมขวาบน (12,0) มุมซ้ายล่าง (0,20) และมุมขวาล่าง (12,20) ) สามารถกำหนดตำแหน่งพิกัดของแต่ละจุดได้ ไม่ว่าสี่เหลี่ยมจัตุรัสจะถูกเติมเต็มหรือไม่ เราก็สามารถคิดได้ว่าแต่ละสี่เหลี่ยมจัตุรัสนั้นเป็นองค์ประกอบอาร์เรย์ 0 หมายถึงไม่เติม 1 หมายความว่าถูกเติมเต็มแล้ว แผง 12 * 20 ใช้อาร์เรย์สองชั้นนั่นคือมีการใช้อาร์เรย์ 20 อาร์เรย์ที่มีความยาว 12 อาร์เรย์

 แผนที่ var = [[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 API ขั้นพื้นฐานที่สุด

 //Grid 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); if(this.maps[j][i]==1){// ช่องสี่เหลี่ยมเต็มไปด้วยเนื้อหา ctx.save(); 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(0,20*40); ctx.lineTo(12*40,20*40); ctx.lineTo(12*40,0);

กราฟิก 7 รายการต่อไปนี้ถูกใช้ในเกม

เมื่อรวมกับระบบพิกัดที่แนะนำข้างต้น อาร์เรย์ [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]];

หากต้องการย้ายบล็อก เพียงหมุนอาร์เรย์ทั้งหมดและเพิ่มเวกเตอร์การกระจัด ซึ่งทำได้ง่ายมาก

 รูปร่างของคลาส { ตัวสร้าง (m) { this.m = Object.assign ([], m); } ย้าย (x, y) { // การกระจัด var m = this.m, l = m.length; |0; for (var i=0;i<l;i=i+2){ m[i]+=x; m[i+1]+=y; } กลับสิ่งนี้;

การหมุนของบล็อก นอกจากการเลื่อนไปทางซ้ายและขวาและขึ้นลงแล้ว บล็อกใน Tetris ยังหมุนด้วยใช่ไหม? หลังจากคิดสักนิด คุณจะรู้ว่านี่เป็นเพียงการแปลงเมทริกซ์ กล่าวคือ แต่ละครั้งที่รูปร่างถูกหมุน 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); สำหรับ (var i=0;i<l;i=i+2) { ถ้า(i == c) ดำเนินการต่อ; 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; } ส่งคืนสิ่งนี้;

ส่วนใหญ่ประกอบด้วยสามด้านต่อไปนี้

• ตำแหน่งของบล็อกต้องไม่เกินการตัดสินใจของอินเทอร์เฟซ
• การตัดสินเมื่อบล็อกถึงจุดต่ำสุดหรือตำแหน่งเสร็จสมบูรณ์
• เกมโอเวอร์การตัดสิน

สำรวจอาร์เรย์ (1) เมื่อพิกัด y ของจุดใดๆ เป็น 19 แสดงว่าถึงจุดต่ำสุดแล้ว (2) รับข้อมูลเกี่ยวกับตำแหน่ง y+1 ของพิกัดในแผนที่ ถ้าเป็น 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){ // ที่ด้านล่างคือEnd = 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); that.score+=10; // เพิ่มคะแนน that.maps.unshift([0,0,0,0,0,0,0,0,0,0,0,0]); ส่งคืนสิ่งนี้;}

สิ่งสำคัญคือการผูกเหตุการณ์การกดคีย์ ควรสังเกตว่าเหตุการณ์การเลื่อนไปทางซ้ายและการเปลี่ยนแปลงทางขวานั้นรวมถึงการตัดสินขอบเขตด้วย

 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; กรณีที่ 40: //down that.d = 0.5; //ซ้าย var over = false, map = that.maps, shape = that.shape, m = shape.m; for(var i=0,l=m.length;i<l;i=i+2){ if(m[i]<=0 || แผนที่[m[i+1]][m[i]-1] == 1){ over = true;break; } } if(!over) shape.move( -1,0); กรณี; 39: //right var over = false, shape = that.shape, map = that.maps, m = shape.m; for(var i=0,l=m.length;i<l;i=i+2 ){ if(m[i]>=11 || map[m[i+1]][m[i]+1] == 1){ over = true;break; } } รูปร่าง if(!over) ย้าย(1,0); กรณีที่ 32: //space that.shape.transform(); break; } },false);}

ฟังก์ชันพื้นฐานที่สุดของ Tetris ถูกนำมาใช้ที่นี่ และจุดการทำงานต่างๆ เช่น ระดับต่างๆ จะไม่ถูกนำมาใช้ ขณะเดียวกัน การสาธิตยังคงมีข้อบกพร่องที่ต้องแก้ไข

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network