-
Notifications
You must be signed in to change notification settings - Fork 0
/
game.js
203 lines (170 loc) · 6.67 KB
/
game.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
var xn = 70; //#columns
var yn = 47 //#rows
var currentGeneration;
var nextGeneration;
var allNeighbors;
var counter = 0;
var amount = 0;
// get element table from index.html
var table = document.getElementById("table");
// returns new world where everyone is dead
function createDeadGeneration() {
var tabelle = new Array([]); //create new array
for (var i = 0; i < xn; i++) {
tabelle[i] = [];
for (j = 0; j < yn; j++)
tabelle[i][j] = false; //fills array with false = dead
}
return tabelle;
tabelle[i][j] = false;
}
// define var currentGeneration and create Generation
function initModel() {
currentGeneration = createDeadGeneration();
}
// define var nextGeneration and create Generation
function initModelNew() {
nextGeneration = createDeadGeneration();
}
// initiates table
function initView() {
for (var i = 1; i < yn - 1; i++) { //Starten mit [1][1] und enden mit (xn/yn -1), da so Rahmen stehen bleibt. (Array-table = Rahmen=> relevant für Auswahl Nachbarn) //Merke: array darf nicht negativ sein!
var neueZeile = table.insertRow(table.length);
for (var j = 1; j < xn - 1; j++) {
var neueZelle = neueZeile.insertCell(j - 1);
neueZelle.zeilenIndex = i; //new properties
neueZelle.spaltenIndex = j;
neueZelle.id = i + '-' + j;
}
}
updateView();
}
// initiates & updates table on html, every cell by id
function updateView() {
for (var i = 1; i < yn - 1; i++) {
for (var j = 1; j < xn - 1; j++) {
var zelle = document.getElementById(i + '-' + j);
//zelle.innerHTML = currentGeneration[i][j] ? 't' : 'f';
zelle.wert = currentGeneration[i][j];
zelle.style = currentGeneration[i][j] ? "background:orange" : "background:white"; //bei click verändere Hintergrund (Browser)
}
}
}
// initiates currentGeneration (Model & View)
function init() {
console.log('initiates..');
initModel();
initView();
}
init();
// get neighbor cells, apply rules and create a new generation
function createNextGeneration() {
for (var i = 1; i < yn - 1; i++) {
for (var j = 1; j < xn - 1; j++) {
// startCell is the cell from where the neigbors are defined
startCell = document.getElementById(i + '-' + j);
// gets true or false for startCell and neighbors
selectedCell = currentGeneration[startCell.zeilenIndex][startCell.spaltenIndex]; //selectedCell = startCell value (true or false)
// neighbor cells
var zer = currentGeneration[startCell.zeilenIndex - 1][startCell.spaltenIndex - 1]; // 0 1 2
var one = currentGeneration[startCell.zeilenIndex - 1][startCell.spaltenIndex]; // 3 5
var two = currentGeneration[startCell.zeilenIndex - 1][startCell.spaltenIndex + 1]; // 6 7 8
var thr = currentGeneration[startCell.zeilenIndex][startCell.spaltenIndex - 1];
var fiv = currentGeneration[startCell.zeilenIndex][startCell.spaltenIndex + 1];
var six = currentGeneration[startCell.zeilenIndex + 1][startCell.spaltenIndex - 1];
var sev = currentGeneration[startCell.zeilenIndex + 1][startCell.spaltenIndex];
var eig = currentGeneration[startCell.zeilenIndex + 1][startCell.spaltenIndex + 1];
// sum od all neighbors around selected cell
allNeighbors = new Array(zer, one, two, thr, fiv, six, sev, eig);
console.log(selectedCell + " in currentGeneration");
// console.log(allNeighbors);
// gives the # of true/false in allNeighbors
var livingNeighbours = 0;
for (var z = 0; z < allNeighbors.length; z++) {
if (allNeighbors[z])
livingNeighbours++;
}
console.log(livingNeighbours + (8 - livingNeighbours));
// apply rules
if (selectedCell)
nextGeneration[i][j] = livingNeighbours === 3 || livingNeighbours === 2;
else
nextGeneration[i][j] = livingNeighbours === 3;
}
}
// move from currentGeneration to nextGeneration
currentGeneration = nextGeneration;
}
// step from one generation to the other
function nextStep() {
initModelNew();
createNextGeneration();
updateView();
counter++;
replace();
}
//----------------------------------------------------------------------------------------------CONTROLS
// function step
document.getElementById("step").onclick = function () {
nextStep();
};
// function stop
document.getElementById("stop").onclick = function () {
window.clearInterval(timer)
};
// function run
document.getElementById("run").onclick = function () {
timer = window.setInterval(nextStep, 20)
};
// function clear
document.getElementById("clear").onclick = function () {
initModel(); //inits new array, current Generation
updateView();//refill existing table
setToZero();
};
// generation info
function replace() {
document.getElementById("gen").innerHTML = counter;
}
// generation info
function info() {
document.getElementById("cells").innerHTML = amount;
}
// set the counter of generations back to zero
function setToZero() {
counter = 0;
document.getElementById("gen").innerHTML = counter;
amount = 0;
document.getElementById("cells").innerText = amount;
}
// on click activates/deactivates cells
table.onmouseover = function clickCell(x) {
if (x.srcElement.wert !== true) { //when not alive, resurrect
x.srcElement.style = "background:orange"; //set color
x.srcElement.wert = true; //set table value
//x.srcElement.innerHTML = 't'; //writes t into cell
currentGeneration[x.srcElement.zeilenIndex][x.srcElement.spaltenIndex] = true; //set array value
}
else { //when alive, kill
x.srcElement.style = "background:white";
x.srcElement.wert = false;
currentGeneration[x.srcElement.zeilenIndex][x.srcElement.spaltenIndex] = false;
}
console.log("Cell " + x.srcElement.zeilenIndex + "|" + x.srcElement.spaltenIndex + " is " + currentGeneration[x.srcElement.zeilenIndex][x.srcElement.spaltenIndex]); //aray:
amount++;
info();
};
/*
// ToDo: Evtl. zusätzliche Funktion einbauen
// when generation x is equal generation y the automatically stop
// change colors
/change size
// change speed
//function createPattern
document.getElementById("pattern").onclick = function(x) {
var patterns = table[Math.floor(Math.random() * table.length)]; //müsste ein td x y rausgeben
currentGeneration[patterns.zeilenIndex][patterns.spaltenIndex] = true;
patterns.style = "background:orange";
patterns.wert = true;
};
*/