Conway's Game of Life — различия между версиями

  1 function MainChain(canvas) {
  2 
  3     // Предварительные установки
  4 
  5     var context = canvas.getContext("2d");                  // на context происходит рисование
  6     document.oncontextmenu=function(e){return false};       // блокировка контекстного меню
  7 
  8     // *** Задание вычислительных параметров ***
  9 
 10     var fps = 5;             	    // frames per second - число кадров в секунду
 11 
 12     // Выполнение программы
 13 
 14     var w = canvas.width;		    // ширина окна
 15     var h = canvas.height;		// высота окна
 16     var n = 50;                   // количество клеток по горизонтали (желательно, делитель ширины окна)
 17     var m = 50;                   // количество клеток по горизонтали (желательно, делитель высоты окна)
 18     var cellW = w/n;              // ширина клетки
 19     var cellH = h/m;              // высота клетки
 20 
 21     var pause = true;
 22     var intervalID;                 // для управления работой автомата
 23 
 24     // "Жизнь" Конвея: [B = 000100000, L = 001100000]
 25     var B = "000100000";            // геном рождения
 26     var L = "001100000";            // геном выживания
 27 
 28     // Работа с мышью
 29 
 30     var mouseX;     var mouseY;                 // координаты курсора мыши
 31 
 32     canvas.onmousedown = function(e){           // функция при нажатии клавиши мыши
 33         var life;
 34         if (e.which == 1) life = true;          // при нажатии левой клавиши мыши клетка рождается
 35         else if (e.which == 3) life = false;    // при нажатии правой клавиши мыши клетка умирает
 36         else return;
 37 
 38         setCell(e, life);
 39         canvas.onmousemove = function(e) {setCell(e, life);};   // функция, выполняющаяся при перемещении курсора мыши
 40     };
 41 
 42     document.onmouseup = function(e){           // функция при отпускании клавиши мыши
 43         canvas.onmousemove = null;              // когда клавиша отпущена - функции перемещения нету
 44     };
 45 
 46     function refreshMouseCoords(e){             // процедура обновляет координаты в переменных mouseX и mouseY
 47         var rect = canvas.getBoundingClientRect();
 48         mouseX = e.clientX - rect.left;
 49         mouseY = e.clientY - rect.top;
 50     }
 51 
 52     // Работа с массивом
 53 
 54     var cells;                      // массив клеток
 55     var cellsBuf = [];              // буфер для расчета следующего шага
 56     for (var i = 0; i < n; i++) cellsBuf[i] = [];
 57     function generateRandomField(n, m) {        // каждая клетка заполняется случайным значением жива/мертва
 58         cells = [];
 59         for (var i = 0; i < n; i++) {
 60             cells[i] = [];
 61             for (var j = 0; j < m; j++) {
 62                 cells[i][j] = (Math.random() >= 0.5);
 63             }
 64         }
 65     }
 66 
 67     function setCell(e, life){                  // придать клетке определенное состояние с нажатия клавиши мыши
 68         refreshMouseCoords(e);                  // обновить координаты в переменных mouseX, mouseY
 69         if (mouseX < 0 || mouseX >= w || mouseY < 0 || mouseY >= h) return;         // проверка на ошибочные координаты
 70         var i = Math.floor(mouseX/cellW);       // получаем ячейку по горизонтали
 71         var j = Math.floor(mouseY/cellH);       // получаем ячейку по вертикали
 72         if (cells[i][j] != life) {
 73             cells[i][j] = life;
 74             draw();
 75         }
 76     }
 77 
 78     MainChain.prototype.clear = function(){
 79         for (var i = 0; i < n; i++)
 80             for (var j = 0; j < m; j++)
 81                 cells[i][j] = false;
 82         draw();
 83         stopSystem();
 84     };
 85 
 86     // Управление работой автомата
 87 
 88     function step() {
 89         tick();
 90         draw();
 91     }
 92 
 93     MainChain.prototype.changePauseState = function() {          // кнопка паузы
 94         if (!pause) stopSystem();
 95         else startSystem()
 96     };
 97 
 98     MainChain.prototype.nextStep = function(){                   // кнопка "Следующий шаг"
 99         stopSystem();
100         step();
101     };
102 
103     function startSystem() {
104         pause = false;
105         intervalID = setInterval(step, 1000/fps);
106         document.getElementById('pause').value = "Stop";
107     }
108 
109     function stopSystem() {
110         pause = true;
111         clearInterval(intervalID);
112         document.getElementById('pause').value = "Next step";
113     }
114 
115     // Расчетная часть программы
116 
117     // функции, обеспечивающие периодичность системы
118     function next(i, n) {if (i == (n-1)) return 0; else return i+1;}
119     function prev(i, n) {if (i == 0) return n-1; else return i-1;}
120 
121     function tick(){                             // то, что происходит каждый шаг времени
122         // копирование массива cells в cellsBuf
123         for (var i0 = 0; i0 < n; i0++)
124             for (var j0 = 0; j0 < m; j0++)
125                 cellsBuf[i0][j0] = cells[i0][j0];
126 
127         for (var i = 0; i < n; i++) {
128             for (var j = 0; j < m; j++) {
129 
130                 // подсчет количества живых клеток вокруг рассматриваемой клетки
131                 var near = 0;
132                 if (cellsBuf[prev(i, n)] [prev(j, m)])   near++;
133                 if (cellsBuf[prev(i, n)] [j])            near++;
134                 if (cellsBuf[prev(i, n)] [next(j, m)])   near++;
135                 if (cellsBuf[i]          [prev(j, m)])   near++;
136                 if (cellsBuf[i]          [next(j, m)])   near++;
137                 if (cellsBuf[next(i, n)] [prev(j, m)])   near++;
138                 if (cellsBuf[next(i, n)] [j])            near++;
139                 if (cellsBuf[next(i, n)] [next(j, m)])   near++;
140 
141                 if (cellsBuf[i][j])                     // рассматриваемая клетка жива
142                     cells[i][j] = (L[near] == '1');     // проверка условия выживания по биному L
143                 else                                    // рассматриваемая клетка мертва
144                     cells[i][j] = (B[near] == '1');     // проверка условия рождения по биному B
145 
146             }
147         }
148     }
149 
150     // Рисование
151 
152     function draw(){
153         context.clearRect(0, 0, w, h);          // очистить экран
154         for (var i = 0; i < n; i++){
155             for (var j = 0; j < m; j++){
156                 if (cells[i][j]){
157                     context.beginPath();
158                     context.rect(i*cellW, j*cellH, cellW, cellH);
159                     context.closePath();
160                     context.fill();
161                 }
162             }
163         }
164     }
165 
166     // Запуск системы
167     generateRandomField(n, m);                  // сгенероровать поле
168     startSystem();
169 
170 }

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>Cellular automaton</title>
 5     <script src="CelAut_v2_release.js"></script>
 6 </head>
 7 <body>
 8     <canvas id="canvasCelAut" width="600" height="600" style="border:1px solid #000000;"></canvas><br>
 9     <input id="pause" type="button" name="Stop" style="width: 100px" onclick="app.changePauseState();return false;"/>
10     <input type="button" name="" onclick="app.nextStep();return false;" value="Next step"/>
11     <input type="button" name="" onclick="app.clear();return false;" value="Clear the field"/>
12     <script type="text/javascript">var app = new MainChain(document.getElementById('canvasCelAut'));</script>
13 </body>
14 </html>