Skip to content

Commit 456b0c2

Browse files
PryceAPryceA
authored
upload save off after initial upload
1 parent d8d6062 commit 456b0c2

4 files changed

Lines changed: 552 additions & 0 deletions

File tree

‎game-of-life-after-4-hrs/gameLoop.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
2+
let frameCounter = 0;
3+
4+
function gameLoop() {
5+
ctx.clearRect(0, 0, canvas.width, canvas.height);
6+
7+
for (const organism of organisms) {
8+
organism.move();
9+
organism.consumeFood();
10+
if (Math.random() < organism.color.a) {
11+
organism.reproduce();
12+
}
13+
organism.draw();
14+
}
15+
16+
for (const foodSource of foodSources) {
17+
foodSource.draw();
18+
}
19+
20+
if (Math.random() < newOrganismFrequency) {
21+
addRandomOrganism();
22+
}
23+
24+
if (Math.random() < newFoodSourceFrequency) {
25+
addRandomFoodSource();
26+
}
27+
28+
const { redCount, greenCount, blueCount } = countByDominantColor(organisms, organism => organism.color);
29+
organismsDataRed.push(redCount);
30+
organismsDataGreen.push(greenCount);
31+
organismsDataBlue.push(blueCount);
32+
33+
// Remove the oldest entry when the array length exceeds 100
34+
[organismsDataRed, organismsDataGreen, organismsDataBlue].forEach(data => {
35+
if (data.length > 100) {
36+
data.shift();
37+
}
38+
});
39+
40+
const { redCount: foodRedCount, greenCount: foodGreenCount, blueCount: foodBlueCount } = countByDominantColor(foodSources, foodSource => foodSource.colorPreference);
41+
foodSourcesDataRed.push(foodRedCount);
42+
foodSourcesDataGreen.push(foodGreenCount);
43+
foodSourcesDataBlue.push(foodBlueCount);
44+
45+
// Remove the oldest entry when the array length exceeds 100
46+
[foodSourcesDataRed, foodSourcesDataGreen, foodSourcesDataBlue].forEach(data => {
47+
if (data.length > 100) {
48+
data.shift();
49+
}
50+
});
51+
52+
frameCounter++;
53+
document.getElementById('frameCounter').innerText = frameCounter;
54+
55+
requestAnimationFrame(gameLoop);
56+
}
57+
58+
gameLoop();

‎game-of-life-after-4-hrs/index.html‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Colorful Game of Life</title>
7+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
8+
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
9+
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
10+
<style>
11+
body {
12+
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
13+
background-color: #f5f5f5;
14+
}
15+
canvas {
16+
border: 1px solid black;
17+
}
18+
.header {
19+
display: flex;
20+
justify-content: space-between;
21+
align-items: center;
22+
background-color: #3f51b5;
23+
color: white;
24+
padding: 10px;
25+
}
26+
.stats {
27+
display: flex;
28+
justify-content: space-between;
29+
align-items: center;
30+
}
31+
.mdl-button {
32+
background-color: #ff4081;
33+
color: white;
34+
}
35+
</style>
36+
</head>
37+
<body>
38+
<div class="header">
39+
<p>Frame: <span id="frameCounter">0</span></p>
40+
<div>
41+
<label for="foodSourceColor">Food Source Color:</label>
42+
<input type="color" id="foodSourceColor" name="foodSourceColor" value="#00ff00">
43+
<button id="addFoodSourceBtn" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">Add Food Source</button>
44+
</div>
45+
<div>
46+
<button id="addOrganismBtn" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">Add Organism</button>
47+
<span id="currentAction">Adding: Organism</span>
48+
</div>
49+
</div>
50+
<div class="stats">
51+
<div>
52+
<h4>Organism Stats</h4>
53+
<canvas id="organisms-stats" width="300" height="200"></canvas>
54+
</div>
55+
<div>
56+
<h4>Food Stats</h4>
57+
<canvas id="food-stats" width="300" height="200"></canvas>
58+
</div>
59+
</div>
60+
<canvas id="gameCanvas" width="1600" height="800"></canvas>
61+
<script src="organismAndFoodSource.js"></script>
62+
<script src="stats.js"></script>
63+
<script src="gameLoop.js"></script>
64+
</body>
65+
</html>

0 commit comments

Comments
 (0)