Fabian/game-of-life
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Fabian Märker
2022-02-22 02:27:57 +01:00
commit 46255d1ca5
14 changed files with 122585 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Docs/JS Functions.md
+1
View File
@@ -0,0 +1 @@
# Game Of Life - Dokumentation
Fonts/BurbankBigCondensed-Bold.eot
BIN
View File
Binary file not shown.
Fonts/BurbankBigCondensed-Bold.svg
+10791
View File
File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 595 KiB

Fonts/BurbankBigCondensed-Bold.ttf
BIN
View File
Binary file not shown.
Fonts/BurbankBigCondensed-Bold.woff
BIN
View File
Binary file not shown.
Fonts/BurbankBigCondensed-Bold.woff2
BIN
View File
Binary file not shown.
Fonts/demo.html
+192
View File
@@ -0,0 +1,192 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, noarchive">
<meta name="format-detection" content="telephone=no">
<title>Transfonter demo</title>
<link href="stylesheet.css" rel="stylesheet">
<style>
/*
http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* demo styles */
body {
background: #f0f0f0;
color: #000;
}
.page {
background: #fff;
width: 920px;
margin: 0 auto;
padding: 20px 20px 0 20px;
overflow: hidden;
}
.font-container {
overflow-x: auto;
overflow-y: hidden;
margin-bottom: 40px;
line-height: 1.3;
white-space: nowrap;
padding-bottom: 5px;
}
h1 {
position: relative;
background: #444;
font-size: 32px;
color: #fff;
padding: 10px 20px;
margin: 0 -20px 12px -20px;
}
.letters {
font-size: 25px;
margin-bottom: 20px;
}
.s10:before {
content: '10px';
}
.s11:before {
content: '11px';
}
.s12:before {
content: '12px';
}
.s14:before {
content: '14px';
}
.s18:before {
content: '18px';
}
.s24:before {
content: '24px';
}
.s30:before {
content: '30px';
}
.s36:before {
content: '36px';
}
.s48:before {
content: '48px';
}
.s60:before {
content: '60px';
}
.s72:before {
content: '72px';
}
.s10:before, .s11:before, .s12:before, .s14:before,
.s18:before, .s24:before, .s30:before, .s36:before,
.s48:before, .s60:before, .s72:before {
font-family: Arial, sans-serif;
font-size: 10px;
font-weight: normal;
font-style: normal;
color: #999;
padding-right: 6px;
}
pre {
display: block;
padding: 9px;
margin: 0 0 12px;
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
font-size: 13px;
line-height: 1.428571429;
color: #333;
font-weight: normal;
font-style: normal;
background-color: #f5f5f5;
border: 1px solid #ccc;
overflow-x: auto;
border-radius: 4px;
}
/* responsive */
@media (max-width: 959px) {
.page {
width: auto;
margin: 0;
}
}
</style>
</head>
<body>
<div class="page">
<div class="demo">
<h1 style="font-family: 'Burbank Big Cd Bd'; font-weight: bold; font-style: normal;">Burbank Big Condensed Bold</h1>
<pre title="Usage">.your-style {
font-family: 'Burbank Big Cd Bd';
font-weight: bold;
font-style: normal;
}</pre>
<pre title="Preload (optional)">
&lt;link rel=&quot;preload&quot; href=&quot;BurbankBigCondensed-Bold.woff2&quot; as=&quot;font&quot; type=&quot;font/woff2&quot; crossorigin&gt;</pre>
<div class="font-container" style="font-family: 'Burbank Big Cd Bd'; font-weight: bold; font-style: normal;">
<p class="letters">
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#&lt;&gt;$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
</div>
</body>
</html>
Fonts/stylesheet.css
+13
View File
@@ -0,0 +1,13 @@
@font-face {
font-family: 'Burbank Big Cd Bd';
src: url('BurbankBigCondensed-Bold.eot');
src: url('BurbankBigCondensed-Bold.eot?#iefix') format('embedded-opentype'),
url('BurbankBigCondensed-Bold.woff2') format('woff2'),
url('BurbankBigCondensed-Bold.woff') format('woff'),
url('BurbankBigCondensed-Bold.ttf') format('truetype'),
url('BurbankBigCondensed-Bold.svg#BurbankBigCondensed-Bold') format('svg');
font-weight: bold;
font-style: normal;
font-display: swap;
}
design.css
+82
View File
@@ -0,0 +1,82 @@
@font-face {
font-family: 'Burbank Big Cd Bk';
src: url('./Fonts/BurbankBigCondensed-Bold.eot');
src: url('./Fonts/BurbankBigCondensed-Bold.eot?#iefix') format('embedded-opentype'),
url('./Fonts/BurbankBigCondensed-Bold.woff2') format('woff2'),
url('./Fonts/BurbankBigCondensed-Bold.woff') format('woff'),
url('./Fonts/BurbankBigCondensed-Bold.ttf') format('truetype'),
url('./Fonts/BurbankBigCondensed-Bold.svg#BurbankBigCondensed-Bold') format('svg');
font-weight: bold;
font-style: normal;
font-display: swap;
}
* {
font-family: Arial, sans-serif;
}
html {
background-color: #2f2f2f;
height: 100%;
width: 100%;
}
.game {
align-items: center;
}
#canvas {
margin-top: 2%;
}
.text, .headline {
color: #fff;
}
.headline {
font-family: 'Burbank Big Cd Bk';
}
.game_button_active, .game_button_inactive {
font-family: 'Burbank Big Cd Bk';
color: #2c3067;
font-size: 15px;
border: 3px #fefc72 solid;
border-radius: 0px;
padding: 5px 15px;
text-shadow: 1px 1px 1px #528ecc;
box-shadow: 1px 1px 2px 0px #bbdaf7;
cursor: pointer;
display: inline-flex;
align-items: center;
transition: all 0.2s ease-in-out;
}
.game_button_active {
background-color: #eee602;
}
.game_button_inactive {
background-color: rgba(0, 0, 0, 0);
color: rgba(0, 0, 0, 0);
border: none;
text-shadow: none;
cursor: default;
box-shadow: none;
}
.game_button_active:hover {
transform: scale(1.1);
box-shadow: 0px 4px 15px 0px rgba(17, 17, 17, 0.8);
transition: all 0.2s ease-in-out;
}
.game_button_active:active {
position: relative;
top: 1px;
}
.grid_control, .control {
width: 50%;
overflow: hidden;
}
.left {
float: left;
}
.right {
float: right;
}
.left, .right {
border: 3px #7c7c74 solid;
border-radius: 0px;
}
game.js
+264
View File
@@ -0,0 +1,264 @@
var grid;
var easteregg = false;
var Play = false;
var gen = 0;
var genCount = document.getElementById('genCount');
var togglePlayBtn = document.getElementById('togglePlay');
var nextGenBtn = document.getElementById("nextGenBtn");
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function setup () {
generate();
}
function jsonLoad() {
var CustomJSON = JSON.parse(document.getElementById("json").value);
if(CustomJSON == '') {
console.log('Got no Input in CustomJSON Input with ID "json"');
} else {
canvas = createCanvas(CustomJSON['width'], CustomJSON['height']);
canvas.id('canvas');
grid = new Grid(CustomJSON['gridSize']);
if(CustomJSON['random'] == "true") {
grid.randomize();
} else {
var array = CustomJSON['grid'];
for(var i of array) {
var column = i['y'];
var row = i['x'];
var IsAlive = i['isAlive'];
if(IsAlive == 1) {
var Alive = true;
} else {
var Alive = "";
}
grid.cells[column][row].setIsAlive(Alive);
}
}
updateButtons();
grid.draw();
}
}
function generate() {
Play = false
gen = -1;
genCount.innerText = gen;
var width = document.getElementById('width').value;
var height = document.getElementById('height').value;
var grid_size = document.getElementById('grid_size').value;
easteregg = false;
if(width == 0) {
width = 600;
}
if(height == 0) {
height = 600;
}
if(grid_size == 0) {
grid_size = 10;
}
if(grid_size == 6.9 || grid_size == 4.20) {
easteregg = true;
}
canvas = createCanvas(width, height);
canvas.id('canvas');
grid = new Grid(grid_size);
nextGen();
updateButtons();
}
function togglePlay() {
if(togglePlayBtn.innerText =='Play') {
togglePlayBtn.innerText = 'Pause';
Play = true;
}
else {
togglePlayBtn.innerText = 'Play';
Play = false;
}
draw();
updateButtons();
}
function updateButtons() {
try {
if(Play == false) {
nextGenBtn.classList.remove("game_button_inactive");
nextGenBtn.classList.add("game_button_active");
togglePlayBtn.innerText = 'Play'
} else {
nextGenBtn.classList.add("game_button_inactive");
nextGenBtn.classList.remove("game_button_active");
togglePlayBtn.innerText = 'Pause'
}
} catch {
}
}
function nextGen() {
background(47, 47, 47);
gen += 1;
genCount.innerText = 'Generation: ' + gen;
grid.updateNeighborCounts();
grid.updatePopulation();
grid.draw();
}
function draw() {
if(Play == true) {
gen += 1;
genCount.innerText = 'Generation: ' + gen;
background(47, 47, 47);
grid.updateNeighborCounts();
grid.updatePopulation();
grid.draw();
}
}
class Grid {
constructor (cellSize) {
this.cellSize = cellSize;
this.numberOfColumns = floor(width / this.cellSize);
this.numberOfRows = floor(height / this.cellSize);
this.cells = new Array(this.numberOfColumns);
for (var column = 0; column < this.numberOfColumns; column ++) {
this.cells[column] = new Array(this.numberOfRows);
}
for (var column = 0; column < this.numberOfColumns; column ++) {
for (var row = 0; row < this.numberOfRows; row++) {
this.cells[column][row] = new Cell(column, row, cellSize)
}
}
print(this.cells);
}
draw () {
for (var column = 0; column < this.numberOfColumns; column ++) {
for (var row = 0; row < this.numberOfRows; row++) {
this.cells[column][row].draw();
}
}
}
randomize () {
for (var column = 0; column < this.numberOfColumns; column ++) {
for (var row = 0; row < this.numberOfRows; row++) {
var value = floor(random(2));
this.cells[column][row].setIsAlive(value);
}
}
nextGen();
gen = 0;
genCount.innerText = 'Generation: ' + gen;
Play = false;
updateButtons();
}
updateNeighborCounts () {
for (var column = 0; column < this.numberOfColumns; column ++) {
for (var row = 0; row < this.numberOfRows; row++) {
var currentCell = this.cells[column][row]
currentCell.liveNeighborCount = 0;
var neighborsArray = this.getNeighbors(currentCell);
for (var position in neighborsArray) {
if (neighborsArray[position].isAlive) {
currentCell.liveNeighborCount += 1;
}
}
}
}
}
getNeighbors(currentCell) {
var neighbors = [];
for (var columnOffset = -1; columnOffset <= 1; columnOffset++) {
for (var rowOffset = -1; rowOffset <= 1; rowOffset++) {
var neighborX = currentCell.column + columnOffset;
var neighborY = currentCell.row + rowOffset;
if (this.isValidPosition(neighborX, neighborY)) {
var neighborCell = this.cells[neighborX][neighborY];
if (neighborCell != currentCell) {
neighbors.push(neighborCell);
}
}
}
}
return neighbors;
}
isValidPosition (column, row) {
var validColumn = column >= 0 && column < this.numberOfColumns;
var validRow = row >= 0 && row < this.numberOfRows
return validColumn && validRow;
}
updatePopulation () {
for (var column = 0; column < this.numberOfColumns; column ++) {
for (var row = 0; row < this.numberOfRows; row++) {
this.cells[column][row].liveOrDie();
}
}
}
}
class Cell {
constructor (column, row, size) {
this.column = column;
this.row = row;
this.size = size;
this.isAlive = false;
this.liveNeighborCount = 0;
}
draw () {
if (this.isAlive) {
if(easteregg == true) {
fill(color(getRandomColor()));
} else {
fill(color(240, 0, 240))
}
} else {
fill(color(187));
}
noStroke();
rect(this.column * this.size + 1, this.row * this.size + 1, this.size - 1, this.size - 1);
}
setIsAlive (value) {
if (value) {
this.isAlive = true;
} else {
this.isAlive = false;
}
}
liveOrDie () {
if (this.isAlive && this.liveNeighborCount < 2) this.isAlive = false; // Loneliness
else if (this.isAlive && this.liveNeighborCount > 3) this.isAlive = false; // Overpopulation
else if (!this.isAlive && this.liveNeighborCount === 3) this.isAlive = true; // Reproduction
// otherwise stay the same
}
}
index.html
+48
View File
@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
<title>Game Of Life</title>
<link rel="stylesheet" type="text/css" href="design.css">
</head>
<body>
<div class="game">
<h1 class="headline">Game of Life</h1>
<div class="grid_control">
<div class="control left">
<input id="height" type="number" title="Height"><a class="text">-> Höhe</a><br>
<input id="width" type="number" title="Width"><a class="text">-> Breite</a><br>
<input id="grid_size" type="number" title="Grid Size"><a class="text">-> Zellen Größe</a><br>
</div>
<div class="left">
<a class="text">
Lere Felder werden automatisch auf die Standart Größen gesetzt.
<br>Standart Größen Sind:
<br>Höhe & Breite: 600
<br>Zellen Größe: 10
<br>Die Zellen Anzahl basiert auf die Größe des Feldes und der Zellen Größe.
<br>Höhe / Zellen Größe = Anzahl Zellen pro Zeile
<br>Breite / Zellen Größe = Anzahl Zellen pro Spalte
</a><br>
</div>
</div>
<div class="game_control">
<br>
<button class="game_button_active" onclick="generate()">Generieren / Leeren</button>
<button class="game_button_active" onclick="grid.randomize()">Zufällig</button>
<button class="game_button_active" id="togglePlay" onclick="togglePlay()">Play</button>
<button class="game_button_active" onclick="nextGen()" id="nextGenBtn">Nächste Generation</button><br><br>
<a class="docsURL text">Custom JSON: </a>
<a class="text url" href="https://servermf.de/GameOfLife/docs/CustomJSON.html">What is this?</a><br>
<input id="json" type="text" title="Custom Json">
<button class="game_button_active" onclick="jsonLoad()">Load</button><br>
<a class="text" id="genCount">Generation: 0</a>
</div>
</div>
<script src="p5.js"></script>
<script src="jquery.min.js"></script>
<script src="game.js"></script>
</body>
</html>
jquery.min.js
Vendored
+4
View File
File diff suppressed because one or more lines are too long
p5.js
+111165
View File
File diff suppressed because one or more lines are too long
sample.json
+25
View File
@@ -0,0 +1,25 @@
{
"height":"250",
"width":"250",
"gridSize":"25",
"random":"false",
"grid":[
{"x":2, "y":2, "isAlive":1},
{"x":3, "y":2, "isAlive":1},
{"x":4, "y":2, "isAlive":1},
{"x":5, "y":2, "isAlive":1},
{"x":6, "y":2, "isAlive":1},
{"x":4, "y":3, "isAlive":1},
{"x":4, "y":4, "isAlive":1},
{"x":2, "y":5, "isAlive":1},
{"x":3, "y":5, "isAlive":1},
{"x":4, "y":5, "isAlive":1},
{"x":5, "y":5, "isAlive":1},
{"x":6, "y":5, "isAlive":1},
{"x":2, "y":7, "isAlive":1},
{"x":3, "y":7, "isAlive":1},
{"x":4, "y":7, "isAlive":1},
{"x":5, "y":7, "isAlive":1},
{"x":6, "y":7, "isAlive":1}
]
}