Skip to content

Commit 6962de6

Browse files
PryceAPryceA
authored
Add files via upload
1 parent 3b4bd61 commit 6962de6

4 files changed

Lines changed: 594 additions & 0 deletions

File tree

‎gameLoop.js‎

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

‎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)