Create static/tribalStage.js

static/tribalStage.js

@@ -0,0 +1,77 @@
+class TribalStage extends GameStage {
+    constructor(canvas) {
+        super(canvas);
+        this.creatures = [];
+        this.huts = [];
+        this.grassImg = this.loadAsset("/static/assets/grass.png");
+        this.creatureImg = this.loadAsset("/static/assets/creature.png");
+        this.hutImg = this.loadAsset("/static/assets/hut.png");
+    }
+
+    init() {
+        this.spawnCreature(400, 300); // Start with one creature
+        this.render();
+    }
+
+    spawnCreature(x, y) {
+        this.creatures.push({ x, y, speed: 2 });
+        this.population = this.creatures.length;
+        this.updateUI();
+    }
+
+    gatherFood() {
+        if (this.creatures.length > 0) {
+            this.resources.food += 5 * this.creatures.length;
+            this.updateUI();
+        }
+    }
+
+    buildHut() {
+        if (this.resources.food >= 20 && this.huts.length < 5) {
+            this.resources.food -= 20;
+            this.huts.push({ x: 350 + this.huts.length * 50, y: 250 });
+            this.maxPopulation += 2;
+            this.spawnCreature(400, 300); // New creature per hut
+        }
+        this.updateUI();
+    }
+
+    update() {
+        this.creatures.forEach(creature => {
+            creature.x += (Math.random() - 0.5) * creature.speed;
+            creature.y += (Math.random() - 0.5) * creature.speed;
+            creature.x = Math.max(0, Math.min(800, creature.x));
+            creature.y = Math.max(0, Math.min(600, creature.y));
+        });
+    }
+
+    render() {
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+
+        // Draw grass background
+        for (let x = 0; x < this.canvas.width; x += 32) {
+            for (let y = 0; y < this.canvas.height; y += 32) {
+                this.ctx.drawImage(this.grassImg, x, y, 32, 32);
+            }
+        }
+
+        // Draw huts
+        this.huts.forEach(hut => {
+            this.ctx.drawImage(this.hutImg, hut.x, hut.y, 48, 48);
+        });
+
+        // Draw creatures
+        this.creatures.forEach(creature => {
+            this.ctx.drawImage(this.creatureImg, creature.x, creature.y, 32, 32);
+        });
+
+        this.update();
+        requestAnimationFrame(() => this.render());
+    }
+}
+
+let game; // Global reference for UI functions
+document.addEventListener("DOMContentLoaded", () => {
+    game = new TribalStage(document.getElementById("gameCanvas"));
+    game.init();
+});