diff options
| author | elioat <elioat@tilde.institute> | 2024-04-12 21:51:42 -0400 |
|---|---|---|
| committer | elioat <elioat@tilde.institute> | 2024-04-12 21:51:42 -0400 |
| commit | 3941ce2957e93995822d054050f0fbf166704389 (patch) | |
| tree | 0de42f3c3bcb612eda47acdbe5bbb1bf938d0d63 | |
| parent | e57315dac71d59ece5cf6ac3582dfbde73b17266 (diff) | |
| download | tour-3941ce2957e93995822d054050f0fbf166704389.tar.gz | |
*'
| -rw-r--r-- | js/sand/index.html | 29 | ||||
| -rw-r--r-- | js/sand/sand.js | 78 |
2 files changed, 107 insertions, 0 deletions
diff --git a/js/sand/index.html b/js/sand/index.html new file mode 100644 index 0000000..76beee4 --- /dev/null +++ b/js/sand/index.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>sand</title> + <style> + body, html { + margin: 0; + padding: 0; + height: 100%; + width: 100%; + overflow: hidden; + } + + #sand { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + </style> +</head> +<body> + <canvas id="sand"></canvas> + <script src="sand.js"></script> +</body> +</html> \ No newline at end of file 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 |