Idea dan kaedah untuk melaksanakan permainan Tetris dalam javascript

Tonton "The Beauty of Programming": "Walaupun program sukar untuk ditulis, ia cantik. Untuk menulis program dengan baik, anda perlu mempunyai pengetahuan asas tertentu, termasuk bahasa pengaturcaraan, struktur data dan algoritma. Jika anda menulis program dengan baik , Ia memerlukan kemahiran pemikiran logik yang ketat dan asas yang baik dalam pengaturcaraan, serta kebiasaan dengan persekitaran pengaturcaraan dan alatan pengaturcaraan.”

Pernahkah anda jatuh cinta dengan pengaturcaraan selepas belajar komputer selama beberapa tahun? Dalam erti kata lain, jika anda belum cuba menulis permainan sendiri, anda tidak begitu menyukai pengaturcaraan.

Sensasi dan nilai ekonomi yang ditimbulkan oleh Tetris boleh dikatakan sebagai peristiwa besar dalam sejarah permainan Ia kelihatan mudah tetapi tidak berkesudahan dan ketagihan. Saya percaya bahawa kebanyakan rakan sekelas saya pernah terlalu taksub dengannya sehingga mereka berhenti memikirkan makanan dan teh.

Peraturan Permainan

1. Tempat maya rata untuk meletakkan petak kecil Saiz standardnya: lebar baris ialah 10, ketinggian lajur ialah 20, dengan setiap petak kecil sebagai unit.

2. Satu set grafik biasa yang terdiri daripada 4 petak kecil dipanggil Tetromino dalam bahasa Cina dan biasa dikenali sebagai petak Terdapat 7 jenis petak iaitu S, Z, L, J, I , O dan T. Dinamakan dengan bentuk huruf.

I: Hapuskan sehingga empat lapisan pada satu masa

J (kiri dan kanan): Hapuskan sehingga tiga lapisan, atau hilangkan dua lapisan

L: Hapuskan sehingga tiga lapisan, atau hilangkan dua lapisan

O: Hilangkan satu hingga dua lapisan

S (kiri dan kanan): Sehingga dua lapisan, mudah menyebabkan lubang

Z ( kiri dan kanan): Sehingga dua lapisan, mudah menyebabkan lubang

T: Sehingga dua tahap

Blok akan mula jatuh perlahan-lahan dari bahagian atas kawasan. Pemain boleh memutarkan blok dalam unit 90 darjah dan menggerakkan blok ke kiri dan kanan dalam unit grid untuk mempercepatkan blok itu jatuh. Apabila blok bergerak ke bahagian bawah kawasan atau mendarat di blok lain dan tidak boleh bergerak, ia akan diperbaiki di sana, dan blok baharu akan muncul di atas kawasan itu dan mula jatuh. Apabila lajur grid mendatar di kawasan itu diisi sepenuhnya dengan petak, lajur itu akan hilang dan menjadi markah pemain. Lebih banyak lajur dipadamkan pada masa yang sama, indeks skor meningkat.

Analisis dan penyelesaian

Apabila setiap blok jatuh, kita boleh lakukan:

1) Putar ke arah yang sesuai

2 ) Bergerak secara mendatar ke lajur tertentu

3) Jatuhkan menegak ke bawah

Mula-mula, anda perlu menggunakan tatasusunan dua dimensi, kawasan[18][10] mewakili 18*10 kawasan permainan. Antaranya, nilai 0 dalam tatasusunan bermakna kosong, dan nilai 1 bermakna terdapat blok.

Terdapat 7 jenis blok secara keseluruhan, setiap satu dengan 4 arah. Tentukan activeBlock[4]. Nilai tatasusunan ini dikira sebelum penyusunan dan digunakan secara langsung dalam atur cara.

Kesukaran

1) Semakan sempadan.

//检查左边界,尝试着朝左边移动一个,看是否合法。
function checkLeftBorder(){ 
  for(var i=0; i<activeBlock.length; i++){ 
    if(activeBlock[i].y==0){ 
      return false; 
    } 
    if(!isCellValid(activeBlock[i].x, activeBlock[i].y-1)){ 
      return false; 
    } 
  } 
  return true; 
} //同理，需要检测右边界和底边界

2) Putaran memerlukan logik matematik, masalah berputar satu titik 90 darjah berbanding titik lain.
3) Mekanisme pemantauan acara pemasaan dan papan kekunci membolehkan permainan berjalan secara automatik.

//开始 
function begin(e){ 
  e.disabled = true; 
  status = 1; 
  tbl = document.getElementById("area"); 
  if(!generateBlock()){ 
    alert("Game over!"); 
    status = 2; 
    return; 
  } 
  paint(); 
  timer = setInterval(moveDown,1000); 
} 
document.onkeydown=keyControl;

Proses Program

1) Pengguna mengklik Mula-> Bina grafik aktif dan tetapkan pemasa.

//当前活动的方块, 它可以左右下移动, 变型。当它触底后, 将会更新area; 
var activeBlock; 
//生产方块形状, 有7种基本形状。 
function generateBlock(){ 
  activeBlock = null; 
  activeBlock = new Array(4); 
  //随机产生0-6数组，代表7种形态。
  var t = (Math.floor(Math.random()*20)+1)%7; 
  switch(t){ 
    case 0:{ 
      activeBlock[0] = {x:0, y:4}; 
      activeBlock[1] = {x:1, y:4}; 
      activeBlock[2] = {x:0, y:5}; 
      activeBlock[3] = {x:1, y:5}; 

      break; 
    } 
    //省略部分代码..............................
    case 6:{ 
      activeBlock[0] = {x:0, y:5}; 
      activeBlock[1] = {x:1, y:4}; 
      activeBlock[2] = {x:1, y:5}; 
      activeBlock[3] = {x:1, y:6}; 
      break; 
    } 
  } 
  //检查刚生产的四个小方格是否可以放在初始化的位置. 
  for(var i=0; i<4; i++){ 
    if(!isCellValid(activeBlock[i].x, activeBlock[i].y)){ 
        return false; 
      } 
    } 
  return true; 
}

2) Selepas setiap pergerakan ke bawah, periksa sama ada ia telah mencecah bahagian bawah, cuba hilangkan barisan.

//消行 
function deleteLine(){ 
  var lines = 0; 
  for(var i=0; i<18; i++){ 
    var j=0; 
    for(; j=0; k--){ 
        area[k+1] = area[k]; 
      } 
    } 
    area[0] = generateBlankLine(); 
    } 
  } 
  return lines; 
}

3) Selepas selesai, bina grafik aktif dan tetapkan pemasa.

Untuk dioptimumkan

1) Tetapkan warna blok pelbagai bentuk.

Idea: Dalam fungsi cipta blok, tetapkan warna activeBlockColor Tujuh bentuk blok yang berbeza mempunyai warna yang berbeza (selain mengubah suai kaedah generateBlock, anda juga perlu mengubah suai kaedah paintarea. Kerana ia tidak. difikirkan dengan baik pada mulanya, menghapuskan baris Akhir sekali, lukis semula petak sambil menyatukan warna, supaya anda boleh mempertimbangkan untuk mengalih keluar n baris jadual, dan kemudian menambah n baris di bahagian atas untuk memastikan integriti petak).

2) Apabila blok semasa jatuh, anda boleh menyemak blok seterusnya terlebih dahulu.

Idea: Pisahkan kaedah generateBlock kepada dua bahagian, satu bahagian digunakan untuk mencuba blok seterusnya secara rawak, dan bahagian lain digunakan untuk cache blok semasa untuk dilukis. Apabila blok semasa mencecah bahagian bawah dan diperbaiki, blok seterusnya mula dilukis, dan blok baharu dijana semula secara rawak. Berulang kali.

Di atas adalah semua kandungan yang dikongsi dengan anda dalam artikel ini.

【Tutorial berkaitan yang disyorkan】

1 Tutorial video JavaScript
2 Manual dalam talian JavaScript
3 tutorial bootstrap