sand and water interact now

rhaeguard · Feb 5, 2024 · 0523f94 · 0523f94
1 parent e2e1d33
commit 0523f94
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 9 deletions.
diff --git a/falling_sand/index.html b/falling_sand/index.html
@@ -4,10 +4,32 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Falling Sand</title>
+
+    <style>
+        #main-container {
+            display: flex;
+            flex-direction: row;
+        }
+
+        #controls {
+            margin-left: 2%;
+        }
+    </style>
 </head>
 <body>
     <!-- <h1>Click and hold the left mouse button to throw some sand!</h1> -->
-    <canvas id="canvas" style="border: 1px solid black; box-sizing: border-box;"></canvas>
+    <div id="main-container">
+        <canvas id="canvas" style="border: 1px solid black; box-sizing: border-box;"></canvas>
+        <div id="controls">
+            <h3>Controls</h3>
+            <label for="water-material">
+                <input type="radio" name="material" value="water" id="water-material" onchange="handleMaterialChange(this)"> water
+            </label>
+            <label for="sand-material">
+                <input type="radio" name="material" value="sand" id="sand-material" checked onchange="handleMaterialChange(this)"> sand
+            </label>
+        </div>
+    </div>
 
     <script src="consts.js"></script>
     <script src="utils.js"></script>

diff --git a/falling_sand/main.js b/falling_sand/main.js
@@ -11,6 +11,7 @@ const ctx = canvas.getContext("2d");
 let matrix = createMatrix()
 
 let isMousePressed = false
+let generatedObject = 'sand'
 
 canvas.addEventListener('mousedown', (ev) => { isMousePressed = true })
 canvas.addEventListener('mouseup', (ev) => { isMousePressed = false })
@@ -36,7 +37,13 @@ canvas.addEventListener('mousemove', (ev) => {
             const yy = ay + offsetY
 
             if (matrix[yy][xx].value === 0) {
-                matrix[yy][xx] = generateWater()
+                let generatedValue = null
+                if (generatedObject === "sand") {
+                    generatedValue = generateSand()
+                } else {
+                    generatedValue = generateWater()
+                }
+                matrix[yy][xx] = generatedValue
             }
         }
     }

diff --git a/falling_sand/sand.js b/falling_sand/sand.js
@@ -19,13 +19,41 @@ function generateSand() {
 
 function updateSand(currentMatrix, newMatrix, r, c) {
     const me = newMatrix[r][c]
-    if (newMatrix[r+1][c].value === 0 || Math.random > 0.2) {
+
+    const canMoveDown = (r, c) => {
+        if (newMatrix[r][c].value === 0) {
+            return true
+        } else {
+            if (newMatrix[r][c].type === 'water') {
+                return true
+            }
+        }
+        return false
+    }
+
+    if (r+1 < rowCount && canMoveDown(r+1, c)) {
+        const t = newMatrix[r+1][c]
+        const isWater = t.type === "water"
         newMatrix[r+1][c] = cell(me)
-        newMatrix[r][c] = cell()
+        newMatrix[r][c] = isWater ? t : cell()
     } else {
-        let right = c+1 < colCount ? newMatrix[r+1][c+1].value : 1
-        let left = c-1 >= 0 ? newMatrix[r+1][c-1].value : 1
-
+        let left = 1
+        let right = 1
+        if (r+1 < rowCount) {
+            if (c+1 < colCount) {
+                right = newMatrix[r+1][c+1].value
+                if (canMoveDown(r+1, c+1)) {
+                    right = 0
+                }
+            }
+
+            if (c-1 >= 0) {
+                left = newMatrix[r+1][c-1].value
+                if (canMoveDown(r+1, c-1)) {
+                    left = 0
+                }
+            }
+        }
 
         if (right === 0 && left === 0) {
             if (Math.random() > 0.5) {
@@ -36,11 +64,15 @@ function updateSand(currentMatrix, newMatrix, r, c) {
         }
 
         if (right === 0) {
+            const t = newMatrix[r+1][c+1]
+            const isWater = t.type === "water"
             newMatrix[r+1][c+1] = cell(me)
-            newMatrix[r][c] = cell()
+            newMatrix[r][c] = isWater ? t : cell()
         } else if (left === 0) {
+            const t = newMatrix[r+1][c-1]
+            const isWater = t.type === "water"
             newMatrix[r+1][c-1] = cell(me)
-            newMatrix[r][c] = cell()
+            newMatrix[r][c] = isWater ? t : cell()
         }
     }
 }
diff --git a/falling_sand/utils.js b/falling_sand/utils.js
@@ -17,4 +17,8 @@ function getColor(cell) {
         return getWaterColor()
     }
     return ""
+}
+
+function handleMaterialChange(ev) {
+    generatedObject = ev.value
 }