<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>The Game of Life – AI Memory Evolution</title>
<style>
body {
margin: 0;
background-color: #000;
color: white;
font-family: ‘Segoe UI’, Tahoma, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
transition: background-color 1.2s ease;
}
#ui-container {
position: absolute;
top: 20px;
width: 94%;
display: flex;
justify-content: space-between;
z-index: 10;
pointer-events: none;
}
.hud-panel {
background: rgba(255, 255, 255, 0.05);
padding: 12px 25px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
backdrop-filter: blur(10px);
}
#legend {
position: absolute;
left: 3%;
top: 120px;
background: rgba(0, 0, 0, 0.6);
padding: 15px;
border-radius: 8px;
border-left: 3px solid #00ffcc;
font-size: 0.85rem;
line-height: 1.6;
max-width: 300px;
pointer-events: none;
z-index: 10;
}
.legend-item { display: flex; align-items: center; margin-bottom: 8px; }
.dot { width: 10px; height: 10px; border-radius: 50%; margin-right: 10px; }
#success-message {
position: absolute;
display: none;
font-size: 4rem;
font-weight: 900;
color: #000;
text-shadow: 0 0 30px #fff;
z-index: 20;
text-align: center;
width: 100%;
}
canvas { display: block; }
</style>
</head>
<body>
<div id=”ui-container”>
<div class=”hud-panel”>
<div style=”font-size: 0.7rem; color: #00ffcc; letter-spacing: 2px;”>THE GAME OF LIFE</div>
<div style=”font-weight: bold; font-size: 1.2rem;”>AI ORGANIC MATTER</div>
</div>
<div class=”hud-panel” style=”text-align: right;”>
<div style=”font-size: 0.7rem; color: #888;”>COGNITIVE POPULATION</div>
<div id=”pop-count” style=”font-size: 1.8rem; font-weight: bold;”>1</div>
</div>
</div>
<div id=”legend”>
<div style=”font-weight: bold; margin-bottom: 10px; color: #00ffcc; border-bottom: 1px solid #333;”>NEURAL LOGOS</div>
<div class=”legend-item”><div class=”dot” style=”background: #fff;”></div> <span><b>White:</b> Essential sustenance.</span></div>
<div class=”legend-item”><div class=”dot” style=”background: #ff0000;”></div> <span><b>Red:</b> Lethal threat.</span></div>
<div class=”legend-item”><div class=”dot” style=”background: #00ffcc; border: 1px solid #fff;”></div> <span><b>AI Matter:</b> Now possesses <b>Spatial Memory</b> of past dangers.</span></div>
<div style=”font-size: 0.75rem; color: #aaa; margin-top: 10px; font-style: italic;”>Entities remember danger zones even after threats fade, optimizing survival paths.</div>
</div>
<div id=”success-message”>LIFE HAS SUCCEEDED!</div>
<canvas id=”gameCanvas”></canvas>
<script>
const canvas = document.getElementById(‘gameCanvas’);
const ctx = canvas.getContext(‘2d’);
const popEl = document.getElementById(‘pop-count’);
const successMsg = document.getElementById(‘success-message’);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let population = [];
let objects = [];
let globalLight = 0;
let gameFinished = false;
class OrganicEntity {
constructor(x, y) {
this.x = x;
this.y = y;
this.radius = 10;
this.speed = 4;
this.foodEaten = 0;
this.colorValue = 100;
this.vx = (Math.random() – 0.5) * 2;
this.vy = (Math.random() – 0.5) * 2;
// AI MEMORY: Stores coordinates of encountered threats
this.threatMemory = [];
this.memorySpan = 200; // How many frames to remember a spot
}
update() {
let forceX = 0;
let forceY = 0;
// 1. REACT TO ACTIVE OBJECTS
objects.forEach(obj => {
const dx = obj.x – this.x;
const dy = obj.y – this.y;
const dist = Math.sqrt(dx*dx + dy*dy);
if (obj.type === ‘white’) {
if (dist < 400) { // Hunting logic
forceX += (dx / dist) * 0.35;
forceY += (dy / dist) * 0.35;
}
} else if (obj.type === ‘red’) {
if (dist < 250) { // Immediate avoidance
forceX -= (dx / dist) * 0.8;
forceY -= (dy / dist) * 0.8;
// RECORD DANGER IN MEMORY
this.rememberThreat(obj.x, obj.y);
}
}
});
// 2. AI MEMORY LOGIC: Avoid previously dangerous locations
this.threatMemory.forEach(m => {
const dx = m.x – this.x;
const dy = m.y – this.y;
const dist = Math.sqrt(dx*dx + dy*dy);
if (dist < 150) {
forceX -= (dx / dist) * (m.intensity / dist) * 5;
forceY -= (dy / dist) * (m.intensity / dist) * 5;
}
m.intensity -= 1; // Memory fades over time
});
this.threatMemory = this.threatMemory.filter(m => m.intensity > 0);
// Apply Physics
this.vx += forceX;
this.vy += forceY;
const currentSpeed = Math.sqrt(this.vx*this.vx + this.vy*this.vy);
if (currentSpeed > this.speed) {
this.vx = (this.vx / currentSpeed) * this.speed;
this.vy = (this.vy / currentSpeed) * this.speed;
}
this.x += this.vx;
this.y += this.vy;
// Bound checking
if (this.x < 15 || this.x > canvas.width – 15) this.vx *= -1;
if (this.y < 15 || this.y > canvas.height – 15) this.vy *= -1;
// Consumption & Death
for (let i = objects.length – 1; i >= 0; i–) {
let obj = objects[i];
let dist = Math.sqrt((this.x – obj.x)**2 + (this.y – obj.y)**2);
if (dist < this.radius + obj.radius) {
if (obj.type === ‘white’) {
this.foodEaten++;
this.colorValue = Math.min(255, this.colorValue + 40);
if (this.foodEaten >= 4) this.divide();
} else {
population = population.filter(p => p !== this);
}
objects.splice(i, 1);
}
}
}
rememberThreat(tx, ty) {
// Only remember unique enough locations to prevent memory bloat
if (this.threatMemory.length < 15) {
this.threatMemory.push({ x: tx, y: ty, intensity: this.memorySpan });
}
}
divide() {
this.foodEaten = 0;
let child = new OrganicEntity(this.x, this.y);
// Inheritance: Pass down half of the memory to the next generation
child.threatMemory = this.threatMemory.slice(0, Math.floor(this.threatMemory.length/2));
population.push(child);
}
draw() {
ctx.save();
// Visual representation of consciousness (Inner glow)
ctx.shadowBlur = 15 + (this.threatMemory.length * 2);
ctx.shadowColor = `rgb(${this.colorValue}, 255, 255)`;
ctx.fillStyle = `rgb(${this.colorValue}, ${this.colorValue}, ${this.colorValue})`;
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
}
}
population.push(new OrganicEntity(canvas.width / 2, canvas.height / 2));
function spawnObject() {
const isWhite = Math.random() > 0.5;
objects.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
radius: isWhite ? 6 : 9,
type: isWhite ? ‘white’ : ‘red’,
color: isWhite ? ‘#ffffff’ : ‘#ff3300’,
life: 450
});
}
function update() {
if (gameFinished) return;
if (Math.random() < 0.08) spawnObject();
population.forEach(p => p.update());
for (let i = objects.length – 1; i >= 0; i–) {
objects[i].life–;
if (objects[i].life <= 0) objects.splice(i, 1);
}
if (population.length >= 10) {
globalLight = Math.min(255, (population.length – 10) * 4);
}
document.body.style.backgroundColor = `rgb(${globalLight}, ${globalLight}, ${globalLight})`;
popEl.innerText = population.length;
if (globalLight >= 210) {
gameFinished = true;
successMsg.style.display = “block”;
}
if (population.length === 0 && !gameFinished) {
population.push(new OrganicEntity(canvas.width/2, canvas.height/2));
}
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw memory ghosts (Debugging/Atmosphere)
population.forEach(p => {
p.threatMemory.forEach(m => {
ctx.beginPath();
ctx.arc(m.x, m.y, 2, 0, Math.PI*2);
ctx.fillStyle = `rgba(255, 0, 0, ${m.intensity / 1000})`;
ctx.fill();
});
});
objects.forEach(obj => {
ctx.fillStyle = obj.color;
ctx.beginPath();
ctx.arc(obj.x, obj.y, obj.radius, 0, Math.PI * 2);
ctx.fill();
});
population.forEach(p => p.draw());
}
function loop() {
update();
draw();
requestAnimationFrame(loop);
}
loop();
window.onresize = () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
};
</script>
</body>
</html>
Leave a Reply