1 files changed, 78 insertions, 0 deletions
diff --git a/js/sand/sand.js b/js/sand/sand.js
new file mode 100644
index 0000000..65e87bd
--- /dev/null
+++ b/js/sand/sand.js
@@ -0,0 +1,78 @@
+const canvas = document.getElementById('sand');
+const ctx = canvas.getContext('2d');
+canvas.width = window.innerWidth - 12;
+canvas.height = window.innerHeight - 12;
+
+const gridSize = 10;
+const gridWidth = Math.floor(canvas.width / gridSize);
+const gridHeight = Math.floor(canvas.height / gridSize);
+const grid = Array(gridHeight).fill().map(() => Array(gridWidth).fill(0));
+
+let mouseDown = false;
+
+canvas.addEventListener('mousedown', (e) => {
+    mouseDown = true;
+    addSand(e);
+});
+
+canvas.addEventListener('mouseup', () => {
+    mouseDown = false;
+});
+
+canvas.addEventListener('mousemove', (e) => {
+    if (mouseDown) {
+        addSand(e);
+    }
+});
+
+function addSand(e) {
+    const rect = canvas.getBoundingClientRect();
+    const x = Math.floor((e.clientX - rect.left) / gridSize);
+    const y = Math.floor((e.clientY - rect.top) / gridSize);
+    if (x >= 0 && x < gridWidth && y >= 0 && y < gridHeight) {
+        grid[y][x] = 1;
+    }
+}
+
+const updateGrid = () => {
+    for (let y = gridHeight - 2; y >= 0; y--) {
+        for (let x = 0; x < gridWidth; x++) {
+            if (grid[y][x] === 1) {
+                if (grid[y + 1][x] === 0) {
+                    grid[y][x] = 0;
+                    grid[y + 1][x] = 1;
+                } else if (x > 0 && grid[y + 1][x - 1] === 0) {
+                    grid[y][x] = 0;
+                    grid[y + 1][x - 1] = 1;
+                } else if (x < gridWidth - 1 && grid[y + 1][x + 1] === 0) {
+                    grid[y][x] = 0;
+                    grid[y + 1][x + 1] = 1;
+                }
+            }
+        }
+    }
+};
+
+const drawGrid = () => {
+    // Clear the canvas
+    ctx.fillStyle = 'beige';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    // Draw the sand
+    ctx.fillStyle = 'black';
+    for (let y = 0; y < gridHeight; y++) {
+        for (let x = 0; x < gridWidth; x++) {
+            if (grid[y][x] === 1) {
+                ctx.fillRect(x * gridSize, y * gridSize, gridSize, gridSize);
+            }
+        }
+    }
+};
+
+const animate = () => {
+    updateGrid();
+    drawGrid();
+    requestAnimationFrame(animate);
+};
+
+animate();
\ No newline at end of file