refactor: Spread game code into modular files for better maintainability

This commit reorganizes the game's source code into multiple files within a `js/` directory, creating a more modular and maintainable structure. The changes include:

- Created separate files for different game components:
  - `constants.js`: Game constants and element types
  - `world.js`: World management functions
  - `terrain.js`: Terrain generation logic
  - `physics.js`: Physics simulation
  - `render.js`: Rendering functions
  - `input.js`: Input handling
  - `main.js`: Main game initialization and loop
  - Element-specific files in `js/elements/`:
    - `basic.js`: Sand, water, dirt behaviors
    - `plants.js`: Grass, seeds, flowers
    - `trees.js`: Tree growth and leaf generation
    - `fire.js`: Fire and lava behaviors

- Updated `index.html` to load modules in the correct order
- Removed the monolithic `script.js`

The modular approach improves code readability, makes future extensions easier, and separates concerns more effectively.

index.html

@@ -37,6 +37,17 @@
         </div>
         <canvas id="simulation-canvas"></canvas>
     </div>
-    <script src="script.js"></script>
+    <!-- Load modules in the correct order -->
+    <script src="js/constants.js"></script>
+    <script src="js/world.js"></script>
+    <script src="js/elements/basic.js"></script>
+    <script src="js/elements/plants.js"></script>
+    <script src="js/elements/trees.js"></script>
+    <script src="js/elements/fire.js"></script>
+    <script src="js/render.js"></script>
+    <script src="js/input.js"></script>
+    <script src="js/physics.js"></script>
+    <script src="js/terrain.js"></script>
+    <script src="js/main.js"></script>
 </body>
 </html>

js/constants.js

@@ -0,0 +1,39 @@
+// Game constants
+const CHUNK_SIZE = 200;
+const PIXEL_SIZE = 4;
+const GRAVITY = 0.5;
+const WATER_SPREAD = 3;
+
+// Colors
+const SAND_COLOR = '#e6c588';
+const WATER_COLOR = '#4a80f5';
+const WALL_COLOR = '#888888';
+const DIRT_COLOR = '#8B4513';
+const STONE_COLOR = '#A9A9A9';
+const GRASS_COLOR = '#7CFC00';
+const WOOD_COLOR = '#8B5A2B';
+const SEED_COLOR = '#654321';
+const FLOWER_COLORS = ['#FF0000', '#FFFF00', '#FF00FF', '#FFA500', '#FFFFFF', '#00FFFF'];
+const LEAF_COLOR = '#228B22';
+const FIRE_COLORS = ['#FF0000', '#FF3300', '#FF6600', '#FF9900', '#FFCC00', '#FFFF00'];
+const LAVA_COLORS = ['#FF0000', '#FF3300', '#FF4500', '#FF6600', '#FF8C00'];
+
+// Element types
+const EMPTY = 0;
+const SAND = 1;
+const WATER = 2;
+const WALL = 3;
+const DIRT = 4;
+const STONE = 5;
+const GRASS = 6;
+const WOOD = 7;
+const SEED = 8;
+const GRASS_BLADE = 9;
+const FLOWER = 10;
+const TREE_SEED = 11;
+const LEAF = 12;
+const FIRE = 13;
+const LAVA = 14;
+
+// Flammable materials
+const FLAMMABLE_MATERIALS = [GRASS, WOOD, SEED, GRASS_BLADE, FLOWER, TREE_SEED, LEAF];

js/elements/basic.js

@@ -0,0 +1,130 @@
+// Basic element behaviors (sand, water, dirt)
+function updateSand(x, y) {
+    // Try to move down
+    if (getPixel(x, y + 1) === EMPTY) {
+        setPixel(x, y, EMPTY);
+        setPixel(x, y + 1, SAND);
+    } 
+    // Try to move down-left or down-right
+    else if (getPixel(x - 1, y + 1) === EMPTY) {
+        setPixel(x, y, EMPTY);
+        setPixel(x - 1, y + 1, SAND);
+    } 
+    else if (getPixel(x + 1, y + 1) === EMPTY) {
+        setPixel(x, y, EMPTY);
+        setPixel(x + 1, y + 1, SAND);
+    }
+    // Sand can displace water
+    else if (getPixel(x, y + 1) === WATER) {
+        setPixel(x, y, WATER);
+        setPixel(x, y + 1, SAND);
+    }
+}
+
+function updateWater(x, y) {
+    // Try to move down
+    if (getPixel(x, y + 1) === EMPTY) {
+        setPixel(x, y, EMPTY);
+        setPixel(x, y + 1, WATER);
+    } 
+    // Try to move down-left or down-right
+    else if (getPixel(x - 1, y + 1) === EMPTY) {
+        setPixel(x, y, EMPTY);
+        setPixel(x - 1, y + 1, WATER);
+    } 
+    else if (getPixel(x + 1, y + 1) === EMPTY) {
+        setPixel(x, y, EMPTY);
+        setPixel(x + 1, y + 1, WATER);
+    } 
+    // Try to spread horizontally
+    else {
+        let moved = false;
+        
+        // Randomly choose direction first
+        const goLeft = Math.random() > 0.5;
+        
+        if (goLeft && getPixel(x - 1, y) === EMPTY) {
+            setPixel(x, y, EMPTY);
+            setPixel(x - 1, y, WATER);
+            moved = true;
+        } else if (!goLeft && getPixel(x + 1, y) === EMPTY) {
+            setPixel(x, y, EMPTY);
+            setPixel(x + 1, y, WATER);
+            moved = true;
+        } 
+        // Try the other direction if first failed
+        else if (!goLeft && getPixel(x - 1, y) === EMPTY) {
+            setPixel(x, y, EMPTY);
+            setPixel(x - 1, y, WATER);
+            moved = true;
+        } else if (goLeft && getPixel(x + 1, y) === EMPTY) {
+            setPixel(x, y, EMPTY);
+            setPixel(x + 1, y, WATER);
+            moved = true;
+        }
+    }
+    
+    // Water extinguishes fire and turns lava into stone
+    const directions = [
+        {dx: -1, dy: 0}, {dx: 1, dy: 0}, 
+        {dx: 0, dy: -1}, {dx: 0, dy: 1},
+        {dx: -1, dy: -1}, {dx: 1, dy: -1},
+        {dx: -1, dy: 1}, {dx: 1, dy: 1}
+    ];
+    
+    for (const dir of directions) {
+        if (getPixel(x + dir.dx, y + dir.dy) === FIRE) {
+            setPixel(x + dir.dx, y + dir.dy, EMPTY);
+            removeMetadata(x + dir.dx, y + dir.dy);
+        } else if (getPixel(x + dir.dx, y + dir.dy) === LAVA) {
+            // Water turns lava into stone
+            setPixel(x + dir.dx, y + dir.dy, STONE);
+            removeMetadata(x + dir.dx, y + dir.dy);
+            // Water is consumed in the process
+            setPixel(x, y, EMPTY);
+            return;
+        }
+    }
+}
+
+function updateDirt(x, y) {
+    // Try to move down
+    if (getPixel(x, y + 1) === EMPTY) {
+        setPixel(x, y, EMPTY);
+        setPixel(x, y + 1, DIRT);
+    } 
+    // Try to move down-left or down-right
+    else if (getPixel(x - 1, y + 1) === EMPTY) {
+        setPixel(x, y, EMPTY);
+        setPixel(x - 1, y + 1, DIRT);
+    } 
+    else if (getPixel(x + 1, y + 1) === EMPTY) {
+        setPixel(x, y, EMPTY);
+        setPixel(x + 1, y + 1, DIRT);
+    }
+    // Dirt can displace water
+    else if (getPixel(x, y + 1) === WATER) {
+        setPixel(x, y, WATER);
+        setPixel(x, y + 1, DIRT);
+    }
+    
+    // Dirt can turn into grass if exposed to air above
+    if (getPixel(x, y - 1) === EMPTY && Math.random() < 0.001) {
+        setPixel(x, y, GRASS);
+    }
+    
+    // Dirt can randomly spawn seeds if exposed to air above
+    if (getPixel(x, y - 1) === EMPTY) {
+        // Spawn different types of seeds with different probabilities
+        const seedRoll = Math.random();
+        if (seedRoll < 0.0002) { // Grass blade seed (most common)
+            setPixel(x, y - 1, SEED);
+        } else if (seedRoll < 0.00025) { // Flower seed (less common)
+            setPixel(x, y - 1, SEED);
+            // Mark this seed as a flower seed (will be handled in updateSeed)
+            setMetadata(x, y - 1, { type: 'flower' });
+        } else if (seedRoll < 0.00026) { // Tree seed (rare)
+            setPixel(x, y - 1, TREE_SEED);
+        }
+    }
+}

js/elements/fire.js

@@ -0,0 +1,166 @@
+// Fire and lava element behaviors
+let fireUpdateCounter = 0;
+
+function updateFire(x, y) {
+    const metadata = getMetadata(x, y);
+    
+    if (!metadata) {
+        // Initialize metadata if it doesn't exist
+        setMetadata(x, y, { 
+            lifetime: 100 + Math.floor(Math.random() * 100),
+            colorIndex: Math.floor(Math.random() * FIRE_COLORS.length)
+        });
+        return;
+    }
+    
+    // Decrease lifetime
+    metadata.lifetime--;
+    
+    // Randomly change color for flickering effect
+    if (Math.random() < 0.2) {
+        metadata.colorIndex = Math.floor(Math.random() * FIRE_COLORS.length);
+    }
+    
+    // Update metadata
+    setMetadata(x, y, metadata);
+    
+    // Fire rises upward occasionally
+    if (Math.random() < 0.3 && getPixel(x, y - 1) === EMPTY) {
+        setPixel(x, y, EMPTY);
+        setPixel(x, y - 1, FIRE);
+        moveMetadata(x, y, x, y - 1);
+        return;
+    }
+    
+    // Fire can also move slightly to the sides
+    if (Math.random() < 0.1) {
+        const direction = Math.random() > 0.5 ? 1 : -1;
+        if (getPixel(x + direction, y - 1) === EMPTY) {
+            setPixel(x, y, EMPTY);
+            setPixel(x + direction, y - 1, FIRE);
+            moveMetadata(x, y, x + direction, y - 1);
+            return;
+        }
+    }
+    
+    // Fire spreads to nearby flammable materials (less frequently to reduce performance impact)
+    if (fireUpdateCounter % 3 === 0 && Math.random() < 0.3) {
+        const directions = [
+            {dx: -1, dy: 0}, {dx: 1, dy: 0}, 
+            {dx: 0, dy: -1}, {dx: 0, dy: 1},
+            {dx: -1, dy: -1}, {dx: 1, dy: -1},
+            {dx: -1, dy: 1}, {dx: 1, dy: 1}
+        ];
+        
+        const dir = directions[Math.floor(Math.random() * directions.length)];
+        const nearbyType = getPixel(x + dir.dx, y + dir.dy);
+        
+        if (FLAMMABLE_MATERIALS.includes(nearbyType)) {
+            setPixel(x + dir.dx, y + dir.dy, FIRE);
+            setMetadata(x + dir.dx, y + dir.dy, { 
+                lifetime: 100 + Math.floor(Math.random() * 100),
+                colorIndex: Math.floor(Math.random() * FIRE_COLORS.length)
+            });
+        }
+    }
+    
+    // Fire burns out after its lifetime
+    if (metadata.lifetime <= 0) {
+        setPixel(x, y, EMPTY);
+        removeMetadata(x, y);
+    }
+}
+
+function updateLava(x, y) {
+    const metadata = getMetadata(x, y);
+    
+    if (!metadata) {
+        // Initialize metadata if it doesn't exist
+        setMetadata(x, y, { 
+            colorIndex: Math.floor(Math.random() * LAVA_COLORS.length)
+        });
+    } else {
+        // Randomly change color for flowing effect
+        if (Math.random() < 0.1) {
+            metadata.colorIndex = Math.floor(Math.random() * LAVA_COLORS.length);
+            setMetadata(x, y, metadata);
+        }
+    }
+    
+    // Lava moves slower than water
+    if (Math.random() < 0.7) {
+        // Try to move down
+        if (getPixel(x, y + 1) === EMPTY) {
+            setPixel(x, y, EMPTY);
+            setPixel(x, y + 1, LAVA);
+            moveMetadata(x, y, x, y + 1);
+        } 
+        // Try to move down-left or down-right
+        else if (getPixel(x - 1, y + 1) === EMPTY) {
+            setPixel(x, y, EMPTY);
+            setPixel(x - 1, y + 1, LAVA);
+            moveMetadata(x, y, x - 1, y + 1);
+        } 
+        else if (getPixel(x + 1, y + 1) === EMPTY) {
+            setPixel(x, y, EMPTY);
+            setPixel(x + 1, y + 1, LAVA);
+            moveMetadata(x, y, x + 1, y + 1);
+        } 
+        // Try to spread horizontally (slower than water)
+        else if (Math.random() < 0.3) {
+            // Randomly choose direction first
+            const goLeft = Math.random() > 0.5;
+            
+            if (goLeft && getPixel(x - 1, y) === EMPTY) {
+                setPixel(x, y, EMPTY);
+                setPixel(x - 1, y, LAVA);
+                moveMetadata(x, y, x - 1, y);
+            } else if (!goLeft && getPixel(x + 1, y) === EMPTY) {
+                setPixel(x, y, EMPTY);
+                setPixel(x + 1, y, LAVA);
+                moveMetadata(x, y, x + 1, y);
+            } 
+            // Try the other direction if first failed
+            else if (!goLeft && getPixel(x - 1, y) === EMPTY) {
+                setPixel(x, y, EMPTY);
+                setPixel(x - 1, y, LAVA);
+                moveMetadata(x, y, x - 1, y);
+            } else if (goLeft && getPixel(x + 1, y) === EMPTY) {
+                setPixel(x, y, EMPTY);
+                setPixel(x + 1, y, LAVA);
+                moveMetadata(x, y, x + 1, y);
+            }
+        }
+    }
+    
+    // Lava sets nearby flammable materials on fire
+    const directions = [
+        {dx: -1, dy: 0}, {dx: 1, dy: 0}, 
+        {dx: 0, dy: -1}, {dx: 0, dy: 1},
+        {dx: -1, dy: -1}, {dx: 1, dy: -1},
+        {dx: -1, dy: 1}, {dx: 1, dy: 1}
+    ];
+    
+    for (const dir of directions) {
+        const nearbyType = getPixel(x + dir.dx, y + dir.dy);
+        
+        // Set flammable materials on fire
+        if (FLAMMABLE_MATERIALS.includes(nearbyType)) {
+            setPixel(x + dir.dx, y + dir.dy, FIRE);
+            setMetadata(x + dir.dx, y + dir.dy, { 
+                lifetime: 100 + Math.floor(Math.random() * 100),
+                colorIndex: Math.floor(Math.random() * FIRE_COLORS.length)
+            });
+        }
+        
+        // Lava can melt sand into glass (stone)
+        else if (nearbyType === SAND && Math.random() < 0.05) {
+            setPixel(x + dir.dx, y + dir.dy, STONE);
+        }
+        
+        // Lava can burn dirt
+        else if (nearbyType === DIRT && Math.random() < 0.02) {
+            setPixel(x + dir.dx, y + dir.dy, EMPTY);
+        }
+    }
+}

js/elements/plants.js

@@ -0,0 +1,159 @@
+// Plant element behaviors (grass, seeds, trees)
+function updateGrass(x, y) {
+    // Grass behaves like dirt for physics
+    if (getPixel(x, y + 1) === EMPTY) {
+        setPixel(x, y, EMPTY);
+        setPixel(x, y + 1, GRASS);
+    } 
+    else if (getPixel(x - 1, y + 1) === EMPTY) {
+        setPixel(x, y, EMPTY);
+        setPixel(x - 1, y + 1, GRASS);
+    } 
+    else if (getPixel(x + 1, y + 1) === EMPTY) {
+        setPixel(x, y, EMPTY);
+        setPixel(x + 1, y + 1, GRASS);
+    }
+    else if (getPixel(x, y + 1) === WATER) {
+        setPixel(x, y, WATER);
+        setPixel(x, y + 1, GRASS);
+    }
+    
+    // Grass can spread to nearby dirt
+    if (Math.random() < 0.0005) {
+        const directions = [
+            {dx: -1, dy: 0}, {dx: 1, dy: 0}, 
+            {dx: 0, dy: -1}, {dx: 0, dy: 1}
+        ];
+        
+        const dir = directions[Math.floor(Math.random() * directions.length)];
+        if (getPixel(x + dir.dx, y + dir.dy) === DIRT) {
+            setPixel(x + dir.dx, y + dir.dy, GRASS);
+        }
+    }
+    
+    // Grass dies if covered (no air above)
+    if (getPixel(x, y - 1) !== EMPTY && Math.random() < 0.05) {
+        setPixel(x, y, DIRT);
+    }
+}
+
+function updateSeed(x, y) {
+    // Seeds fall like sand
+    if (getPixel(x, y + 1) === EMPTY) {
+        setPixel(x, y, EMPTY);
+        setPixel(x, y + 1, SEED);
+        moveMetadata(x, y, x, y + 1);
+    } 
+    else if (getPixel(x - 1, y + 1) === EMPTY) {
+        setPixel(x, y, EMPTY);
+        setPixel(x - 1, y + 1, SEED);
+        moveMetadata(x, y, x - 1, y + 1);
+    } 
+    else if (getPixel(x + 1, y + 1) === EMPTY) {
+        setPixel(x, y, EMPTY);
+        setPixel(x + 1, y + 1, SEED);
+        moveMetadata(x, y, x + 1, y + 1);
+    }
+    // Seeds can float on water
+    else if (getPixel(x, y + 1) === WATER) {
+        // Just float, don't do anything
+    }
+    // If seed is on dirt or grass, it can germinate
+    else if (getPixel(x, y + 1) === DIRT || getPixel(x, y + 1) === GRASS) {
+        const metadata = getMetadata(x, y);
+        
+        // Check if this is a flower seed
+        if (metadata && metadata.type === 'flower') {
+            setPixel(x, y, FLOWER);
+            // Set a random flower color
+            setMetadata(x, y, { 
+                type: 'flower',
+                color: FLOWER_COLORS[Math.floor(Math.random() * FLOWER_COLORS.length)],
+                age: 0,
+                height: 1
+            });
+        } else {
+            // Regular seed becomes a grass blade
+            setPixel(x, y, GRASS_BLADE);
+            setMetadata(x, y, { age: 0, height: 1 });
+        }
+    }
+}
+
+function updateGrassBlade(x, y) {
+    // Grass blades are static once grown
+    const metadata = getMetadata(x, y);
+    
+    if (!metadata) {
+        setMetadata(x, y, { age: 0, height: 1 });
+        return;
+    }
+    
+    // Increment age
+    metadata.age++;
+    setMetadata(x, y, metadata);
+    
+    // Grass blades can grow taller up to a limit
+    if (metadata.age % 200 === 0 && metadata.height < 3 && getPixel(x, y - 1) === EMPTY) {
+        setPixel(x, y - 1, GRASS_BLADE);
+        setMetadata(x, y - 1, { age: 0, height: metadata.height + 1 });
+        metadata.isTop = false;
+        setMetadata(x, y, metadata);
+    }
+    
+    // Grass blades die if covered by something other than another grass blade
+    if (getPixel(x, y - 1) !== EMPTY && getPixel(x, y - 1) !== GRASS_BLADE && Math.random() < 0.01) {
+        setPixel(x, y, EMPTY);
+        removeMetadata(x, y);
+    }
+}
+
+function updateFlower(x, y) {
+    // Flowers are similar to grass blades but with a colored top
+    const metadata = getMetadata(x, y);
+    
+    if (!metadata) {
+        setMetadata(x, y, { 
+            type: 'flower',
+            color: FLOWER_COLORS[Math.floor(Math.random() * FLOWER_COLORS.length)],
+            age: 0,
+            height: 1
+        });
+        return;
+    }
+    
+    // Increment age
+    metadata.age++;
+    setMetadata(x, y, metadata);
+    
+    // Flowers can grow taller up to a limit (2x bigger)
+    if (metadata.age % 300 === 0 && metadata.height < 8 && getPixel(x, y - 1) === EMPTY) {
+        // If this is the top of the flower, make it a stem and put a new flower on top
+        setPixel(x, y - 1, FLOWER);
+        setMetadata(x, y - 1, { 
+            type: 'flower',
+            color: metadata.color,
+            age: 0,
+            height: metadata.height + 1,
+            isTop: true
+        });
+        metadata.isTop = false;
+        setMetadata(x, y, metadata);
+    }
+    
+    // Flowers die if covered
+    if (getPixel(x, y - 1) !== EMPTY && getPixel(x, y - 1) !== FLOWER && Math.random() < 0.01) {
+        setPixel(x, y, EMPTY);
+        removeMetadata(x, y);
+    }
+    
+    // Flowers can drop seeds occasionally
+    if (metadata.isTop && Math.random() < 0.0001) {
+        const directions = [-1, 1];
+        const dir = directions[Math.floor(Math.random() * directions.length)];
+        if (getPixel(x + dir, y) === EMPTY) {
+            setPixel(x + dir, y, SEED);
+            setMetadata(x + dir, y, { type: 'flower' });
+        }
+    }
+}

js/elements/trees.js

@@ -0,0 +1,108 @@
+// Tree element behaviors
+function updateTreeSeed(x, y) {
+    // Tree seeds fall like other seeds
+    if (getPixel(x, y + 1) === EMPTY) {
+        setPixel(x, y, EMPTY);
+        setPixel(x, y + 1, TREE_SEED);
+        moveMetadata(x, y, x, y + 1);
+    } 
+    else if (getPixel(x - 1, y + 1) === EMPTY) {
+        setPixel(x, y, EMPTY);
+        setPixel(x - 1, y + 1, TREE_SEED);
+        moveMetadata(x, y, x - 1, y + 1);
+    } 
+    else if (getPixel(x + 1, y + 1) === EMPTY) {
+        setPixel(x, y, EMPTY);
+        setPixel(x + 1, y + 1, TREE_SEED);
+        moveMetadata(x, y, x + 1, y + 1);
+    }
+    // Seeds can float on water
+    else if (getPixel(x, y + 1) === WATER) {
+        // Just float, don't do anything
+    }
+    // If seed is on dirt or grass, it can grow into a tree
+    else if (getPixel(x, y + 1) === DIRT || getPixel(x, y + 1) === GRASS) {
+        // Start growing a tree
+        growTree(x, y);
+    }
+}
+
+function growTree(x, y) {
+    // Replace the seed with the trunk
+    setPixel(x, y, WOOD);
+    
+    // Determine tree height (50-80 blocks, 10x bigger)
+    const treeHeight = 50 + Math.floor(Math.random() * 31);
+    
+    // Grow the trunk upward
+    for (let i = 1; i < treeHeight; i++) {
+        if (getPixel(x, y - i) === EMPTY) {
+            setPixel(x, y - i, WOOD);
+        } else {
+            break; // Stop if we hit something
+        }
+    }
+    
+    // Add leaves at the top (10x bigger radius)
+    addLeaves(x, y - treeHeight + 1, 20 + Math.floor(Math.random() * 10));
+    
+    // Add some branches
+    addBranches(x, y, treeHeight);
+}
+
+function addBranches(x, y, treeHeight) {
+    // Add 2-4 branches at different heights
+    const numBranches = 2 + Math.floor(Math.random() * 3);
+    
+    for (let i = 0; i < numBranches; i++) {
+        // Position branch at different heights along the trunk
+        const branchY = y - Math.floor(treeHeight * (0.3 + 0.4 * i / numBranches));
+        
+        // Choose left or right direction
+        const direction = Math.random() > 0.5 ? 1 : -1;
+        
+        // Branch length (10-15 blocks)
+        const branchLength = 10 + Math.floor(Math.random() * 6);
+        
+        // Create the branch
+        for (let j = 1; j <= branchLength; j++) {
+            // Branch goes out horizontally with some upward angle
+            const branchX = x + (j * direction);
+            const upwardAngle = Math.floor(j * 0.3);
+            
+            if (getPixel(branchX, branchY - upwardAngle) === EMPTY) {
+                setPixel(branchX, branchY - upwardAngle, WOOD);
+            } else {
+                break; // Stop if we hit something
+            }
+            
+            // Add small leaf clusters at the end of branches
+            if (j === branchLength) {
+                addLeaves(branchX, branchY - upwardAngle, 8 + Math.floor(Math.random() * 4));
+            }
+        }
+    }
+}
+
+function addLeaves(x, y, radius) {
+    // Add a cluster of leaves around the point
+    for (let dy = -radius; dy <= radius; dy++) {
+        for (let dx = -radius; dx <= radius; dx++) {
+            // Skip the exact center (trunk position)
+            if (dx === 0 && dy === 0) continue;
+            
+            // Make it more circular by checking distance
+            const distance = Math.sqrt(dx*dx + dy*dy);
+            if (distance <= radius) {
+                // Random chance to place a leaf based on distance from center
+                // More dense leaves for larger trees
+                const density = radius > 10 ? 0.8 : 0.6;
+                if (Math.random() < (1 - distance/radius/density)) {
+                    if (getPixel(x + dx, y + dy) === EMPTY) {
+                        setPixel(x + dx, y + dy, LEAF);
+                    }
+                }
+            }
+        }
+    }
+}

js/input.js

@@ -0,0 +1,188 @@
+// Input handling functions
+let isDrawing = false;
+let isDragging = false;
+let lastMouseX, lastMouseY;
+let currentMouseX, currentMouseY;
+
+function setTool(tool) {
+    currentTool = tool;
+    document.querySelectorAll('.tools button').forEach(btn => btn.classList.remove('active'));
+    
+    if (tool === SAND) {
+        document.getElementById('sand-btn').classList.add('active');
+    } else if (tool === WATER) {
+        document.getElementById('water-btn').classList.add('active');
+    } else if (tool === DIRT) {
+        document.getElementById('dirt-btn').classList.add('active');
+    } else if (tool === STONE) {
+        document.getElementById('stone-btn').classList.add('active');
+    } else if (tool === GRASS) {
+        document.getElementById('grass-btn').classList.add('active');
+    } else if (tool === WOOD) {
+        document.getElementById('wood-btn').classList.add('active');
+    } else if (tool === SEED) {
+        document.getElementById('seed-btn').classList.add('active');
+    } else if (tool === TREE_SEED) {
+        document.getElementById('tree-seed-btn').classList.add('active');
+    } else if (tool === FIRE) {
+        document.getElementById('fire-btn').classList.add('active');
+    } else if (tool === LAVA) {
+        document.getElementById('lava-btn').classList.add('active');
+    } else if (tool === EMPTY) {
+        document.getElementById('eraser-btn').classList.add('active');
+    }
+}
+
+function handleMouseDown(e) {
+    const rect = canvas.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    
+    // Right mouse button for dragging the world
+    if (e.button === 2 || e.ctrlKey || e.shiftKey) {
+        isDragging = true;
+        lastMouseX = x;
+        lastMouseY = y;
+        worldOffsetXBeforeDrag = worldOffsetX;
+        worldOffsetYBeforeDrag = worldOffsetY;
+    } else {
+        // Left mouse button for drawing
+        isDrawing = true;
+        draw(x, y);
+    }
+}
+
+function handleMouseMove(e) {
+    const rect = canvas.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    
+    // Always update current mouse position
+    currentMouseX = x;
+    currentMouseY = y;
+    
+    if (isDragging) {
+        // Calculate how much the mouse has moved
+        const dx = x - lastMouseX;
+        const dy = y - lastMouseY;
+        
+        // Move the world in the opposite direction (divide by pixel size to convert to world coordinates)
+        moveWorld(-dx / PIXEL_SIZE, -dy / PIXEL_SIZE);
+        
+        // Update the last mouse position
+        lastMouseX = x;
+        lastMouseY = y;
+    } else if (isDrawing) {
+        draw(x, y);
+    }
+}
+
+function handleMouseUp(e) {
+    isDrawing = false;
+    if (isDragging) {
+        // Calculate the total movement during this drag
+        const totalDragX = worldOffsetX - worldOffsetXBeforeDrag;
+        const totalDragY = worldOffsetY - worldOffsetYBeforeDrag;
+        
+        if (debugMode) {
+            console.log(`Drag completed: ${totalDragX}, ${totalDragY}`);
+        }
+    }
+    isDragging = false;
+}
+
+function draw(x, y) {
+    if (!isDrawing) return;
+    
+    // Convert screen coordinates to world coordinates
+    const worldX = Math.floor(x / PIXEL_SIZE) + worldOffsetX;
+    const worldY = Math.floor(y / PIXEL_SIZE) + worldOffsetY;
+    
+    // Draw a small brush (3x3)
+    for (let dy = -1; dy <= 1; dy++) {
+        for (let dx = -1; dx <= 1; dx++) {
+            const pixelX = worldX + dx;
+            const pixelY = worldY + dy;
+            
+            // Special handling for fire - only set fire to flammable materials
+            if (currentTool === FIRE) {
+                const currentPixel = getPixel(pixelX, pixelY);
+                if (FLAMMABLE_MATERIALS.includes(currentPixel)) {
+                    setPixel(pixelX, pixelY, FIRE);
+                    setMetadata(pixelX, pixelY, { 
+                        lifetime: 100 + Math.floor(Math.random() * 100),
+                        colorIndex: Math.floor(Math.random() * FIRE_COLORS.length)
+                    });
+                }
+            } else {
+                setPixel(pixelX, pixelY, currentTool);
+                
+                // Add metadata for special types
+                if (currentTool === SEED) {
+                    setMetadata(pixelX, pixelY, { type: 'regular' });
+                } else if (currentTool === FLOWER) {
+                    setMetadata(pixelX, pixelY, { 
+                        type: 'flower',
+                        color: FLOWER_COLORS[Math.floor(Math.random() * FLOWER_COLORS.length)],
+                        age: 0,
+                        height: 1
+                    });
+                }
+            }
+        }
+    }
+}
+
+function handleTouchStart(e) {
+    e.preventDefault();
+    
+    // Check if we have multiple touch points (for dragging)
+    if (e.touches.length > 1) {
+        isDragging = true;
+        lastMouseX = e.touches[0].clientX;
+        lastMouseY = e.touches[0].clientY;
+        worldOffsetXBeforeDrag = worldOffsetX;
+        worldOffsetYBeforeDrag = worldOffsetY;
+    } else {
+        // Single touch for drawing
+        isDrawing = true;
+        const rect = canvas.getBoundingClientRect();
+        const x = e.touches[0].clientX - rect.left;
+        const y = e.touches[0].clientY - rect.top;
+        currentMouseX = x;
+        currentMouseY = y;
+        draw(x, y);
+    }
+}
+
+function handleTouchMove(e) {
+    e.preventDefault();
+    
+    const rect = canvas.getBoundingClientRect();
+    
+    if (isDragging && e.touches.length > 1) {
+        // Calculate how much the touch has moved
+        const x = e.touches[0].clientX;
+        const y = e.touches[0].clientY;
+        const dx = x - lastMouseX;
+        const dy = y - lastMouseY;
+        
+        // Move the world in the opposite direction
+        moveWorld(-dx / PIXEL_SIZE, -dy / PIXEL_SIZE);
+        
+        // Update the last touch position
+        lastMouseX = x;
+        lastMouseY = y;
+    } else if (isDrawing) {
+        const x = e.touches[0].clientX - rect.left;
+        const y = e.touches[0].clientY - rect.top;
+        currentMouseX = x;
+        currentMouseY = y;
+        draw(x, y);
+    }
+}
+
+function toggleDebug() {
+    debugMode = !debugMode;
+    document.getElementById('debug-btn').classList.toggle('active');
+}

js/main.js

@@ -0,0 +1,76 @@
+// Main game variables and initialization
+let canvas, ctx;
+let currentTool = SAND;
+let lastFrameTime = 0;
+let fps = 0;
+let debugMode = false;
+
+// Initialize the simulation
+window.onload = function() {
+    canvas = document.getElementById('simulation-canvas');
+    ctx = canvas.getContext('2d');
+    
+    // Set canvas size to fill the screen
+    resizeCanvas();
+    window.addEventListener('resize', resizeCanvas);
+    
+    // Tool selection
+    document.getElementById('sand-btn').addEventListener('click', () => setTool(SAND));
+    document.getElementById('water-btn').addEventListener('click', () => setTool(WATER));
+    document.getElementById('dirt-btn').addEventListener('click', () => setTool(DIRT));
+    document.getElementById('stone-btn').addEventListener('click', () => setTool(STONE));
+    document.getElementById('grass-btn').addEventListener('click', () => setTool(GRASS));
+    document.getElementById('wood-btn').addEventListener('click', () => setTool(WOOD));
+    document.getElementById('seed-btn').addEventListener('click', () => setTool(SEED));
+    document.getElementById('tree-seed-btn').addEventListener('click', () => setTool(TREE_SEED));
+    document.getElementById('fire-btn').addEventListener('click', () => setTool(FIRE));
+    document.getElementById('lava-btn').addEventListener('click', () => setTool(LAVA));
+    document.getElementById('eraser-btn').addEventListener('click', () => setTool(EMPTY));
+    
+    // Navigation controls
+    document.getElementById('move-left').addEventListener('click', () => moveWorld(-CHUNK_SIZE/2, 0));
+    document.getElementById('move-right').addEventListener('click', () => moveWorld(CHUNK_SIZE/2, 0));
+    document.getElementById('move-up').addEventListener('click', () => moveWorld(0, -CHUNK_SIZE/2));
+    document.getElementById('move-down').addEventListener('click', () => moveWorld(0, CHUNK_SIZE/2));
+    document.getElementById('debug-btn').addEventListener('click', toggleDebug);
+    
+    // Drawing events
+    canvas.addEventListener('mousedown', handleMouseDown);
+    canvas.addEventListener('mousemove', handleMouseMove);
+    canvas.addEventListener('mouseup', handleMouseUp);
+    canvas.addEventListener('mouseleave', handleMouseUp);
+    
+    // Touch events for mobile
+    canvas.addEventListener('touchstart', handleTouchStart);
+    canvas.addEventListener('touchmove', handleTouchMove);
+    canvas.addEventListener('touchend', handleMouseUp);
+    
+    // Initialize the first chunk and generate terrain around it
+    getOrCreateChunk(0, 0);
+    generateChunksAroundPlayer();
+    
+    // Start the simulation loop
+    requestAnimationFrame(simulationLoop);
+};
+
+function resizeCanvas() {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight - document.querySelector('.controls').offsetHeight;
+}
+
+function simulationLoop(timestamp) {
+    // Calculate FPS
+    const deltaTime = timestamp - lastFrameTime;
+    lastFrameTime = timestamp;
+    fps = Math.round(1000 / deltaTime);
+    document.getElementById('fps').textContent = `FPS: ${fps}`;
+    
+    // Update physics
+    updatePhysics();
+    
+    // Render
+    render();
+    
+    // Continue the loop
+    requestAnimationFrame(simulationLoop);
+}

js/physics.js

@@ -0,0 +1,53 @@
+// Physics simulation functions
+function updatePhysics() {
+    // Get visible chunks
+    const visibleChunks = getVisibleChunks();
+    
+    // Increment fire update counter
+    fireUpdateCounter++;
+    
+    // Process each visible chunk
+    for (const { chunkX, chunkY } of visibleChunks) {
+        const chunk = getOrCreateChunk(chunkX, chunkY);
+        
+        // Process from bottom to top, right to left for correct gravity simulation
+        for (let y = CHUNK_SIZE - 1; y >= 0; y--) {
+            // Alternate direction each row for more natural flow
+            const startX = y % 2 === 0 ? 0 : CHUNK_SIZE - 1;
+            const endX = y % 2 === 0 ? CHUNK_SIZE : -1;
+            const step = y % 2 === 0 ? 1 : -1;
+            
+            for (let x = startX; x !== endX; x += step) {
+                const index = y * CHUNK_SIZE + x;
+                const type = chunk[index];
+                
+                if (type === EMPTY || type === STONE || type === WOOD || type === LEAF) continue;
+                
+                const worldX = chunkX * CHUNK_SIZE + x;
+                const worldY = chunkY * CHUNK_SIZE + y;
+                
+                if (type === SAND) {
+                    updateSand(worldX, worldY);
+                } else if (type === WATER) {
+                    updateWater(worldX, worldY);
+                } else if (type === DIRT) {
+                    updateDirt(worldX, worldY);
+                } else if (type === GRASS) {
+                    updateGrass(worldX, worldY);
+                } else if (type === SEED) {
+                    updateSeed(worldX, worldY);
+                } else if (type === GRASS_BLADE) {
+                    updateGrassBlade(worldX, worldY);
+                } else if (type === FLOWER) {
+                    updateFlower(worldX, worldY);
+                } else if (type === TREE_SEED) {
+                    updateTreeSeed(worldX, worldY);
+                } else if (type === FIRE) {
+                    updateFire(worldX, worldY);
+                } else if (type === LAVA) {
+                    updateLava(worldX, worldY);
+                }
+            }
+        }
+    }
+}

js/render.js

@@ -0,0 +1,127 @@
+// Rendering functions
+function render() {
+    // Clear the canvas
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    
+    // Get visible chunks
+    const visibleChunks = getVisibleChunks();
+    
+    // Render each visible chunk
+    for (const { chunkX, chunkY } of visibleChunks) {
+        const key = getChunkKey(chunkX, chunkY);
+        
+        if (!chunks.has(key)) continue;
+        
+        const chunk = chunks.get(key);
+        
+        // Calculate screen position of chunk
+        const screenX = (chunkX * CHUNK_SIZE - worldOffsetX) * PIXEL_SIZE;
+        const screenY = (chunkY * CHUNK_SIZE - worldOffsetY) * PIXEL_SIZE;
+        
+        // Draw chunk border in debug mode
+        if (debugMode) {
+            ctx.strokeStyle = '#ff0000';
+            ctx.lineWidth = 1;
+            ctx.strokeRect(
+                screenX, 
+                screenY, 
+                CHUNK_SIZE * PIXEL_SIZE, 
+                CHUNK_SIZE * PIXEL_SIZE
+            );
+            
+            // Draw chunk coordinates
+            ctx.fillStyle = '#ffffff';
+            ctx.font = '12px Arial';
+            ctx.fillText(`${chunkX},${chunkY}`, screenX + 5, screenY + 15);
+        }
+        
+        // Render each pixel in the chunk
+        for (let y = 0; y < CHUNK_SIZE; y++) {
+            for (let x = 0; x < CHUNK_SIZE; x++) {
+                const index = y * CHUNK_SIZE + x;
+                const type = chunk[index];
+                
+                if (type === EMPTY) continue;
+                
+                // Set color based on type
+                if (type === SAND) {
+                    ctx.fillStyle = SAND_COLOR;
+                } else if (type === WATER) {
+                    ctx.fillStyle = WATER_COLOR;
+                } else if (type === WALL) {
+                    ctx.fillStyle = WALL_COLOR;
+                } else if (type === DIRT) {
+                    ctx.fillStyle = DIRT_COLOR;
+                } else if (type === STONE) {
+                    ctx.fillStyle = STONE_COLOR;
+                } else if (type === GRASS) {
+                    ctx.fillStyle = GRASS_COLOR;
+                } else if (type === WOOD) {
+                    ctx.fillStyle = WOOD_COLOR;
+                } else if (type === SEED) {
+                    ctx.fillStyle = SEED_COLOR;
+                } else if (type === GRASS_BLADE) {
+                    ctx.fillStyle = GRASS_COLOR;
+                } else if (type === FLOWER) {
+                    // Get flower color from metadata or use a default
+                    const metadata = getMetadata(chunkX * CHUNK_SIZE + x, chunkY * CHUNK_SIZE + y);
+                    ctx.fillStyle = metadata && metadata.color ? metadata.color : FLOWER_COLORS[0];
+                } else if (type === TREE_SEED) {
+                    ctx.fillStyle = SEED_COLOR;
+                } else if (type === LEAF) {
+                    ctx.fillStyle = LEAF_COLOR;
+                } else if (type === FIRE) {
+                    // Get fire color from metadata
+                    const metadata = getMetadata(chunkX * CHUNK_SIZE + x, chunkY * CHUNK_SIZE + y);
+                    const colorIndex = metadata ? metadata.colorIndex : 0;
+                    ctx.fillStyle = FIRE_COLORS[colorIndex];
+                } else if (type === LAVA) {
+                    // Get lava color from metadata
+                    const metadata = getMetadata(chunkX * CHUNK_SIZE + x, chunkY * CHUNK_SIZE + y);
+                    const colorIndex = metadata ? metadata.colorIndex : 0;
+                    ctx.fillStyle = LAVA_COLORS[colorIndex];
+                }
+                
+                // Draw the pixel
+                ctx.fillRect(
+                    screenX + x * PIXEL_SIZE,
+                    screenY + y * PIXEL_SIZE,
+                    PIXEL_SIZE,
+                    PIXEL_SIZE
+                );
+            }
+        }
+    }
+    
+    // Draw cursor position and update debug info
+    if (currentMouseX !== undefined && currentMouseY !== undefined) {
+        const worldX = Math.floor(currentMouseX / PIXEL_SIZE) + worldOffsetX;
+        const worldY = Math.floor(currentMouseY / PIXEL_SIZE) + worldOffsetY;
+        
+        // Update coordinates display in debug mode
+        if (debugMode) {
+            document.getElementById('coords').textContent = 
+                `Chunk: ${Math.floor(worldOffsetX / CHUNK_SIZE)},${Math.floor(worldOffsetY / CHUNK_SIZE)} | ` +
+                `Mouse: ${worldX},${worldY} | Offset: ${Math.floor(worldOffsetX)},${Math.floor(worldOffsetY)}`;
+            
+            // Draw cursor outline
+            const cursorScreenX = (worldX - worldOffsetX) * PIXEL_SIZE;
+            const cursorScreenY = (worldY - worldOffsetY) * PIXEL_SIZE;
+            
+            ctx.strokeStyle = '#00ff00';
+            ctx.lineWidth = 2;
+            ctx.strokeRect(
+                cursorScreenX - PIXEL_SIZE, 
+                cursorScreenY - PIXEL_SIZE, 
+                PIXEL_SIZE * 3, 
+                PIXEL_SIZE * 3
+            );
+            
+            // Draw a dot at the exact mouse position
+            ctx.fillStyle = '#ff0000';
+            ctx.beginPath();
+            ctx.arc(currentMouseX, currentMouseY, 3, 0, Math.PI * 2);
+            ctx.fill();
+        }
+    }
+}

js/terrain.js

@@ -0,0 +1,176 @@
+// Terrain generation functions
+function generateChunksAroundPlayer() {
+    const centerChunkX = Math.floor(worldOffsetX / CHUNK_SIZE);
+    const centerChunkY = Math.floor(worldOffsetY / CHUNK_SIZE);
+    const radius = 3; // Generate chunks within 3 chunks of the player
+    
+    // Generate chunks in a square around the player
+    for (let dy = -radius; dy <= radius; dy++) {
+        for (let dx = -radius; dx <= radius; dx++) {
+            const chunkX = centerChunkX + dx;
+            const chunkY = centerChunkY + dy;
+            
+            // Only generate terrain for chunks at or above y=0
+            if (chunkY >= 0) {
+                getOrCreateChunk(chunkX, chunkY);
+            }
+        }
+    }
+}
+
+function generateTerrain(chunkX, chunkY, chunkData) {
+    // Use a seeded random number generator based on chunk coordinates
+    const seed = chunkX * 10000 + chunkY;
+    const random = createSeededRandom(seed);
+    
+    // Generate base terrain (hills)
+    generateHills(chunkX, chunkY, chunkData, random);
+    
+    // Add lakes
+    if (random() < 0.3) { // 30% chance for a lake in a chunk
+        generateLake(chunkX, chunkY, chunkData, random);
+    }
+    
+    // Add stone formations
+    if (random() < 0.4) { // 40% chance for stone formations
+        generateStoneFormation(chunkX, chunkY, chunkData, random);
+    }
+    
+    // Add vegetation (seeds and trees)
+    addVegetation(chunkX, chunkY, chunkData, random);
+}
+
+function createSeededRandom(seed) {
+    // Simple seeded random function
+    return function() {
+        seed = (seed * 9301 + 49297) % 233280;
+        return seed / 233280;
+    };
+}
+
+function generateHills(chunkX, chunkY, chunkData, random) {
+    // Generate a height map for this chunk using simplex-like noise
+    const heightMap = new Array(CHUNK_SIZE).fill(0);
+    
+    // Base height (higher for chunks further from origin)
+    const baseHeight = Math.max(0, 50 - Math.sqrt(chunkX*chunkX + chunkY*chunkY) * 5);
+    
+    // Generate a smooth height map
+    for (let x = 0; x < CHUNK_SIZE; x++) {
+        // Use multiple frequencies for more natural looking terrain
+        const noise1 = Math.sin(x * 0.02 + chunkX * CHUNK_SIZE * 0.02 + random() * 10) * 15;
+        const noise2 = Math.sin(x * 0.05 + chunkX * CHUNK_SIZE * 0.05 + random() * 10) * 7;
+        const noise3 = Math.sin(x * 0.1 + chunkX * CHUNK_SIZE * 0.1 + random() * 10) * 3;
+        
+        // Combine noise at different frequencies
+        heightMap[x] = Math.floor(baseHeight + noise1 + noise2 + noise3);
+        
+        // Ensure height is positive
+        heightMap[x] = Math.max(0, heightMap[x]);
+    }
+    
+    // Fill the terrain based on the height map
+    for (let x = 0; x < CHUNK_SIZE; x++) {
+        const height = heightMap[x];
+        
+        for (let y = CHUNK_SIZE - 1; y >= 0; y--) {
+            const worldY = chunkY * CHUNK_SIZE + y;
+            const depth = CHUNK_SIZE - 1 - y;
+            
+            if (depth < height) {
+                const index = y * CHUNK_SIZE + x;
+                
+                // Top layer is grass
+                if (depth === 0) {
+                    chunkData[index] = GRASS;
+                }
+                // Next few layers are dirt
+                else if (depth < 5) {
+                    chunkData[index] = DIRT;
+                }
+                // Deeper layers are stone
+                else {
+                    chunkData[index] = STONE;
+                }
+            }
+        }
+    }
+}
+
+function generateLake(chunkX, chunkY, chunkData, random) {
+    // Lake parameters
+    const lakeX = Math.floor(random() * (CHUNK_SIZE - 60)) + 30;
+    const lakeY = Math.floor(random() * (CHUNK_SIZE - 60)) + 30;
+    const lakeWidth = Math.floor(random() * 40) + 20;
+    const lakeHeight = Math.floor(random() * 20) + 10;
+    
+    // Create an elliptical lake
+    for (let y = 0; y < CHUNK_SIZE; y++) {
+        for (let x = 0; x < CHUNK_SIZE; x++) {
+            // Calculate distance from lake center (normalized to create an ellipse)
+            const dx = (x - lakeX) / lakeWidth;
+            const dy = (y - lakeY) / lakeHeight;
+            const distance = Math.sqrt(dx*dx + dy*dy);
+            
+            if (distance < 1) {
+                const index = y * CHUNK_SIZE + x;
+                
+                // Water in the center
+                if (distance < 0.8) {
+                    chunkData[index] = WATER;
+                }
+                // Sand around the edges
+                else {
+                    chunkData[index] = SAND;
+                }
+            }
+        }
+    }
+}
+
+function generateStoneFormation(chunkX, chunkY, chunkData, random) {
+    // Stone formation parameters
+    const formationX = Math.floor(random() * (CHUNK_SIZE - 40)) + 20;
+    const formationWidth = Math.floor(random() * 30) + 10;
+    const formationHeight = Math.floor(random() * 40) + 20;
+    
+    // Create a stone hill/mountain
+    for (let x = formationX - formationWidth; x < formationX + formationWidth; x++) {
+        if (x < 0 || x >= CHUNK_SIZE) continue;
+        
+        // Calculate height at this x position (higher in the middle)
+        const dx = (x - formationX) / formationWidth;
+        const height = Math.floor(formationHeight * (1 - dx*dx));
+        
+        for (let y = CHUNK_SIZE - 1; y >= CHUNK_SIZE - height; y--) {
+            if (y < 0 || y >= CHUNK_SIZE) continue;
+            
+            const index = y * CHUNK_SIZE + x;
+            chunkData[index] = STONE;
+        }
+    }
+}
+
+function addVegetation(chunkX, chunkY, chunkData, random) {
+    // Add vegetation on grass
+    for (let y = 0; y < CHUNK_SIZE; y++) {
+        for (let x = 0; x < CHUNK_SIZE; x++) {
+            const index = y * CHUNK_SIZE + x;
+            
+            // Only add vegetation on grass
+            if (chunkData[index] === GRASS) {
+                // Check if there's empty space above
+                if (y > 0 && chunkData[(y-1) * CHUNK_SIZE + x] === EMPTY) {
+                    // Random chance to add different types of vegetation
+                    const roll = random();
+                    
+                    if (roll < 0.01) { // 1% chance for a tree seed
+                        chunkData[(y-1) * CHUNK_SIZE + x] = TREE_SEED;
+                    } else if (roll < 0.05) { // 4% chance for a regular seed
+                        chunkData[(y-1) * CHUNK_SIZE + x] = SEED;
+                    }
+                }
+            }
+        }
+    }
+}

js/world.js

@@ -0,0 +1,128 @@
+// World management functions
+let worldOffsetX = 0;
+let worldOffsetY = 0;
+let worldOffsetXBeforeDrag = 0;
+let worldOffsetYBeforeDrag = 0;
+let chunks = new Map(); // Map to store chunks with key "x,y"
+let metadata = new Map(); // Map to store metadata for pixels
+let generatedChunks = new Set(); // Set to track which chunks have been generated
+
+function moveWorld(dx, dy) {
+    worldOffsetX += dx;
+    worldOffsetY += dy;
+    updateCoordinatesDisplay();
+    
+    // Generate terrain for chunks around the current view
+    generateChunksAroundPlayer();
+}
+
+function updateCoordinatesDisplay() {
+    const chunkX = Math.floor(worldOffsetX / CHUNK_SIZE);
+    const chunkY = Math.floor(worldOffsetY / CHUNK_SIZE);
+    document.getElementById('coords').textContent = `Chunk: ${chunkX},${chunkY} | Offset: ${Math.floor(worldOffsetX)},${Math.floor(worldOffsetY)}`;
+}
+
+function getChunkKey(chunkX, chunkY) {
+    return `${chunkX},${chunkY}`;
+}
+
+function getOrCreateChunk(chunkX, chunkY) {
+    const key = getChunkKey(chunkX, chunkY);
+    
+    if (!chunks.has(key)) {
+        // Create a new chunk with empty pixels
+        const chunkData = new Array(CHUNK_SIZE * CHUNK_SIZE).fill(EMPTY);
+        
+        // Add floor at the bottom of the world (y = 0 and y = 1)
+        if (chunkY === 0 || chunkY === 1) {
+            // Fill the bottom row with walls
+            for (let x = 0; x < CHUNK_SIZE; x++) {
+                chunkData[(CHUNK_SIZE - 1) * CHUNK_SIZE + x] = WALL;
+            }
+        }
+        
+        chunks.set(key, chunkData);
+    }
+    
+    return chunks.get(key);
+}
+
+function getChunkCoordinates(worldX, worldY) {
+    const chunkX = Math.floor(worldX / CHUNK_SIZE);
+    const chunkY = Math.floor(worldY / CHUNK_SIZE);
+    const localX = ((worldX % CHUNK_SIZE) + CHUNK_SIZE) % CHUNK_SIZE;
+    const localY = ((worldY % CHUNK_SIZE) + CHUNK_SIZE) % CHUNK_SIZE;
+    
+    return { chunkX, chunkY, localX, localY };
+}
+
+function setPixel(worldX, worldY, type) {
+    const { chunkX, chunkY, localX, localY } = getChunkCoordinates(worldX, worldY);
+    const chunk = getOrCreateChunk(chunkX, chunkY);
+    const index = localY * CHUNK_SIZE + localX;
+    
+    chunk[index] = type;
+}
+
+function getPixel(worldX, worldY) {
+    // Special case: floor at the bottom of the world (first two chunks)
+    const floorChunkY = Math.floor(worldY / CHUNK_SIZE);
+    if (worldY % CHUNK_SIZE === CHUNK_SIZE - 1 && (floorChunkY === 0 || floorChunkY === 1)) {
+        return WALL;
+    }
+    
+    const { chunkX, chunkY, localX, localY } = getChunkCoordinates(worldX, worldY);
+    const key = getChunkKey(chunkX, chunkY);
+    
+    if (!chunks.has(key)) {
+        return EMPTY;
+    }
+    
+    const chunk = chunks.get(key);
+    const index = localY * CHUNK_SIZE + localX;
+    
+    return chunk[index];
+}
+
+// Metadata functions to store additional information about pixels
+function setMetadata(worldX, worldY, data) {
+    const key = `${worldX},${worldY}`;
+    metadata.set(key, data);
+}
+
+function getMetadata(worldX, worldY) {
+    const key = `${worldX},${worldY}`;
+    return metadata.get(key);
+}
+
+function removeMetadata(worldX, worldY) {
+    const key = `${worldX},${worldY}`;
+    metadata.delete(key);
+}
+
+// Move metadata when a pixel moves
+function moveMetadata(fromX, fromY, toX, toY) {
+    const data = getMetadata(fromX, fromY);
+    if (data) {
+        setMetadata(toX, toY, data);
+        removeMetadata(fromX, fromY);
+    }
+}
+
+function getVisibleChunks() {
+    const visibleChunks = [];
+    
+    // Calculate visible chunk range
+    const startChunkX = Math.floor(worldOffsetX / CHUNK_SIZE) - 1;
+    const endChunkX = Math.ceil((worldOffsetX + canvas.width / PIXEL_SIZE) / CHUNK_SIZE) + 1;
+    const startChunkY = Math.floor(worldOffsetY / CHUNK_SIZE) - 1;
+    const endChunkY = Math.ceil((worldOffsetY + canvas.height / PIXEL_SIZE) / CHUNK_SIZE) + 1;
+    
+    for (let chunkY = startChunkY; chunkY < endChunkY; chunkY++) {
+        for (let chunkX = startChunkX; chunkX < endChunkX; chunkX++) {
+            visibleChunks.push({ chunkX, chunkY });
+        }
+    }
+    
+    return visibleChunks;
+}