From 3941ce2957e93995822d054050f0fbf166704389 Mon Sep 17 00:00:00 2001 From: elioat Date: Fri, 12 Apr 2024 21:51:42 -0400 Subject: *' --- js/sand/index.html | 29 ++++++++++++++++++++ js/sand/sand.js | 78 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 107 insertions(+) create mode 100644 js/sand/index.html create mode 100644 js/sand/sand.js (limited to 'js') 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 @@ + + + + + + sand + + + + + + + \ 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 -- cgit 1.4.1-2-gfad0