<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Game of life</title>
</head>
<body>
<button id="go">On / Off</button>
<button id="go2">Random</button>
<div id="container">
</div>
<script src="script.js"></script>
</body>
</html>
* {
margin: 0;
padding: 0;
}
#container {
display: grid;
grid-template-columns: repeat(60, 1fr);
grid-gap: 1px;
width: 800px;
height: 800px;
}
#container div {
background-color: darksalmon;
cursor: pointer;
}
#container .alive {
background-color: brown;
}
button {
background-color: #4caf50;
border: none;
color: white;
padding: 10px 27px;
margin: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
}
.off {
background-color: #f44336;
}
// wymiary grida
let columns = 60;
let rows = 60;
// tablica która trzyma komórki
const grid = new Array(columns);
for(let i = 0; i < grid.length; i++) {
grid[i] = new Array(rows);
}
// wirtualna tablica która przechowuje stan gry
const grid2 = new Array(columns);
for(let i = 0; i < grid2.length; i++) {
grid2[i] = new Array(rows);
}
// domyślnie wszystkie komórki martwe
for (let i = 0; i < rows; i++) {
for (let j = 0; j < columns; j++) {
grid2[i][j] = false;
}
}
// rysowanie grida
function drawGrid(){
let container = document.getElementById("container");
container.innerHTML = ""
for (let i = 0; i < rows; i++) {
for (let j = 0; j < columns; j++) {
let cell = document.createElement("div");
if(grid2[i][j]) {
cell.classList.add("alive");
}
cell.addEventListener("click", () => {
cell.classList.toggle("alive");
});
grid[i][j] = cell;
container.append(cell);
}
}
}
// liczenie zywych sąsiadów
function countLiveNeighbors(row, col) {
let count = 0;
for(let i = row - 1; i <= row + 1; i++) {
if (i >= 0 && i < rows){
for(let j = col - 1; j <= col + 1; j++) {
if (j >= 0 && j < columns){
if (i != row || j != col) {
count += grid[i][j].classList.contains("alive") ? 1 : 0;
}
}
}
}
}
return count;
}
let go = document.getElementById("go");
let go2 = document.getElementById("go2");
// inicjalizacja pustego grida
drawGrid();
// zyćko
function life(){
for (let i = 0; i < rows; i++) {
for (let j = 0; j < columns; j++) {
if(grid[i][j].classList.contains("alive")) {
grid2[i][j] = true;
}
if(countLiveNeighbors(i, j) == 3) {
grid2[i][j] = true;
}
if(countLiveNeighbors(i, j) != 2 && countLiveNeighbors(i, j) != 3) {
grid2[i][j] = false;
}
}
}
drawGrid();
}
go.addEventListener("click", ()=>{
change();
go.classList.toggle('off');
});
let alive;
function change() {
if (!alive) {
alive = window.setInterval(life,100);
} else {
window.clearInterval(alive);
alive = null;
}
}
go2.addEventListener("click", ()=>{
for (let i = 0; i < rows; i++) {
for (let j = 0; j < columns; j++) {
grid2[i][j] = Math.random() > 0.5 ? true : false;
}
}
drawGrid();
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.