Rumah >hujung hadapan web >tutorial js >Conway ' s 'Game of Life'

Conway ' s 'Game of Life'

尊渡假赌尊渡假赌尊渡假赌
尊渡假赌尊渡假赌尊渡假赌asal
2025-02-22 08:49:09386semak imbas

Artikel ini meneroka "Game of Life" John Conway, sebuah automaton selular klasik, dan menunjukkan cara melaksanakan versi minimalis menggunakan HTML, CSS, dan JavaScript dalam pelayar web. Secara tradisinya latihan pengaturcaraan, pendekatan ini memanfaatkan keupayaan pelayar moden untuk pengalaman yang diperkemas.

Konsep teras:

Game of Life mensimulasikan bentuk kehidupan pada grid. Setiap sel sama ada "hidup" (penduduk) atau "mati" (kosong). Negeri Generasi Seterusnya ditentukan oleh peraturan mudah berdasarkan jiran setiap sel:

  • kelahiran: sel mati dengan tepat tiga jiran hidup menjadi hidup.
  • survival: sel hidup dengan dua atau tiga jiran hidup bertahan.
  • kematian: sel hidup dengan kurang daripada dua atau lebih daripada tiga jiran hidup mati.

Ini membawa kepada pelbagai hasil: kepupusan, populasi stabil, corak berayun, atau evolusi yang tidak dapat diramalkan.

pelaksanaan:

Pelaksanaan berasaskan web asas menggunakan kanvas HTML untuk memaparkan grid. Butang mencetuskan pengiraan dan paparan generasi akan datang. Logik teras melibatkan meleleh melalui grid, mengira jiran, dan menggunakan peraturan untuk menentukan keadaan seterusnya setiap sel. Kod ini menggunakan tatasusunan JavaScript untuk menguruskan keadaan sel.

Conway's “Game of Life”

Contoh Coretan Kod (JavaScript):

<code class="language-javascript">adjacent = countAdjacent(i, j);
switch (generationThis[i][j]) {
  case 0: // Dead cell
       if (adjacent == 3) {
         generationNext[i][j] = 1; // Birth
       }
       break;
  case 1: // Live cell
       if (adjacent == 2 || adjacent == 3) {
         generationNext[i][j] = 1; // Survival
       }
       break;
}</code>

Antara muka pengguna:

UI mudah terdiri daripada:

    a untuk menjadikan grid. <canvas></canvas> butang ("menjana seterusnya") untuk maju ke generasi akan datang.

HTML Contoh:

<code class="language-html"><button type="button" value="generate next" id="btnNext">Generate Next</button>
<canvas id="gameboard"></canvas></code>
Kod JavaScript mengendalikan logik permainan, termasuk memulakan grid (generasi benih), mengira generasi berikutnya, dan mengemas kini paparan kanvas. Mengesan keadaan stabil (kepupusan, keadaan mantap, ayunan) boleh dilaksanakan dengan membandingkan generasi berturut -turut.

Eksplorasi lanjut:

Walaupun artikel ini membentangkan versi minimalis, pelaksanaan yang lebih kompleks dapat menggabungkan ciri -ciri seperti input pengguna untuk konfigurasi grid awal, pelbagai bentuk hayat, dan peraturan yang lebih canggih. Kesederhanaan Game of Life memungkiri kerumitan yang mengejutkan dan terus mempesona pengaturcara dan ahli matematik.

Atas ialah kandungan terperinci Conway ' s 'Game of Life'. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn