feat: Add floor and wall element to prevent infinite particle fall

script.js

@@ -5,11 +5,13 @@ const GRAVITY = 0.5;
 const WATER_SPREAD = 3;
 const SAND_COLOR = '#e6c588';
 const WATER_COLOR = '#4a80f5';
+const WALL_COLOR = '#888888';
 
 // Element types
 const EMPTY = 0;
 const SAND = 1;
 const WATER = 2;
+const WALL = 3;
 
 // Global variables
 let canvas, ctx;
@@ -144,6 +146,15 @@ function getOrCreateChunk(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)
+        if (chunkY === 0) {
+            // Fill the bottom row with walls
+            for (let x = 0; x < CHUNK_SIZE; x++) {
+                chunkData[0 * CHUNK_SIZE + x] = WALL;
+            }
+        }
+        
         chunks.set(key, chunkData);
     }
     
@@ -168,6 +179,11 @@ function setPixel(worldX, worldY, type) {
 }
 
 function getPixel(worldX, worldY) {
+    // Special case: floor at the bottom of the world
+    if (worldY === 0) {
+        return WALL;
+    }
+    
     const { chunkX, chunkY, localX, localY } = getChunkCoordinates(worldX, worldY);
     const key = getChunkKey(chunkX, chunkY);
     
@@ -348,6 +364,8 @@ function render() {
                     ctx.fillStyle = SAND_COLOR;
                 } else if (type === WATER) {
                     ctx.fillStyle = WATER_COLOR;
+                } else if (type === WALL) {
+                    ctx.fillStyle = WALL_COLOR;
                 }
                 
                 // Draw the pixel