Игра "Жизнь" — различия между версиями

Материал из Department of Theoretical and Applied Mechanics
Перейти к: навигация, поиск
(Новая страница: «Виртуальная лаборатория > Игра "Жизнь" <HR> Здесь расположена программа, представляюща...»)
 
 
(не показано 8 промежуточных версий 2 участников)
Строка 1: Строка 1:
 +
[[en:Conway's Game of Life]]
 
[[Виртуальная лаборатория]] > [[Игра "Жизнь"]] <HR>
 
[[Виртуальная лаборатория]] > [[Игра "Жизнь"]] <HR>
  
Здесь расположена программа, представляющая из себя классическую игру [http://ru.wikipedia.org/wiki/Жизнь_(игра) "Жизнь"] Джона Конвея.
+
Здесь расположена программа, представляющая из себя классическую игру [http://ru.wikipedia.org/wiki/Жизнь_(игра) "Жизнь"] Джона Конвея с возможностью рисовать курсором клетки на поле.
<addscript src=CelAut_v2_release/>
+
 
<htmlet nocache="yes">CelAut_v2_TM</htmlet>
+
{{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/Tcvetkov/CelAut/CelAut_v2_release/CelAut_v2_release.html |width=630 |height=650 |border=0 }}
  
 
Скачать программу: [[Медиа:CelAut_v2_release.zip|CelAut_v2_release.zip]]
 
Скачать программу: [[Медиа:CelAut_v2_release.zip|CelAut_v2_release.zip]]
Текст программы на языке JavaScript (разработчик [[Цветков Денис]]): <toggledisplay status=hide showtext="Показать↓" hidetext="Скрыть↑" linkstyle="font-size:default">  
+
<div class="mw-collapsible mw-collapsed" style="width:100%" >
 +
'''Текст программы на языке JavaScript (разработчик [[Цветков Денис]]):''' <div class="mw-collapsible-content">  
 
Файл '''"CelAut_v2_release.js"'''
 
Файл '''"CelAut_v2_release.js"'''
<source lang="javascript" first-line="1">
+
<syntaxhighlight lang="javascript" line start="1" enclose="div">
 
function MainChain(canvas) {
 
function MainChain(canvas) {
  
Строка 18: Строка 20:
 
     // *** Задание вычислительных параметров ***
 
     // *** Задание вычислительных параметров ***
  
     const fps = 5;                // frames per second - число кадров в секунду
+
     var fps = 5;                // frames per second - число кадров в секунду
  
 
     // Выполнение программы
 
     // Выполнение программы
  
     const w = canvas.width;     // ширина окна
+
     var w = canvas.width;     // ширина окна
     const h = canvas.height; // высота окна
+
     var h = canvas.height; // высота окна
     const n = 50;                  // количество клеток по горизонтали (желательно, делитель ширины окна)
+
     var n = 50;                  // количество клеток по горизонтали (желательно, делитель ширины окна)
     const m = 50;                  // количество клеток по горизонтали (желательно, делитель высоты окна)
+
     var m = 50;                  // количество клеток по горизонтали (желательно, делитель высоты окна)
     const cellW = w/n;              // ширина клетки
+
     var cellW = w/n;              // ширина клетки
     const cellH = h/m;              // высота клетки
+
     var cellH = h/m;              // высота клетки
  
 
     var pause = true;
 
     var pause = true;
Строка 33: Строка 35:
  
 
     // "Жизнь" Конвея: [B = 000100000, L = 001100000]
 
     // "Жизнь" Конвея: [B = 000100000, L = 001100000]
     const B = "000100000";            // геном рождения
+
     var B = "000100000";            // геном рождения
     const L = "001100000";            // геном выживания
+
     var L = "001100000";            // геном выживания
  
 
     // Работа с мышью
 
     // Работа с мышью
Строка 179: Строка 181:
  
 
}
 
}
</source>
+
</syntaxhighlight>
 
Файл '''"CelAut_v2_release.html"'''
 
Файл '''"CelAut_v2_release.html"'''
<source lang="html" first-line="1">
+
<syntaxhighlight lang="html5" line start="1" enclose="div">
 
<!DOCTYPE html>
 
<!DOCTYPE html>
 
<html>
 
<html>
Строка 196: Строка 198:
 
</body>
 
</body>
 
</html>
 
</html>
</source>
+
</syntaxhighlight>
</toggledisplay>
+
</div>
 +
</div>
  
 
[[JavaScript - Клеточный автомат|Здесь]] вы можете найти предыдущие версии программы.
 
[[JavaScript - Клеточный автомат|Здесь]] вы можете найти предыдущие версии программы.
Строка 203: Строка 206:
 
[[Category: Виртуальная лаборатория]]
 
[[Category: Виртуальная лаборатория]]
 
[[Category: Программирование]]
 
[[Category: Программирование]]
[[Category: JavaScript]]
 

Текущая версия на 18:37, 18 января 2017

Виртуальная лаборатория > Игра "Жизнь"

Здесь расположена программа, представляющая из себя классическую игру "Жизнь" Джона Конвея с возможностью рисовать курсором клетки на поле.

Скачать программу: CelAut_v2_release.zip

Текст программы на языке JavaScript (разработчик Цветков Денис):

Файл "CelAut_v2_release.js"

  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 = "Остановить";
107     }
108 
109     function stopSystem() {
110         pause = true;
111         clearInterval(intervalID);
112         document.getElementById('pause').value = "Запустить";
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 }

Файл "CelAut_v2_release.html"

 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="" style="width: 100px" onclick="app.changePauseState();return false;"/>
10     <input type="button" name="" onclick="app.nextStep();return false;" value="Следующий шаг"/>
11     <input type="button" name="" onclick="app.clear();return false;" value="Очистить поле"/>
12     <script type="text/javascript">var app = new MainChain(document.getElementById('canvasCelAut'));</script>
13 </body>
14 </html>

Здесь вы можете найти предыдущие версии программы.