Rumah >hujung hadapan web >tutorial js >Conway ' s 'Game of Life'
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:
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.
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:
<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!