diff options
Diffstat (limited to 'js/sand/sand.js')
-rw-r--r-- | js/sand/sand.js | 131 |
1 files changed, 84 insertions, 47 deletions
diff --git a/js/sand/sand.js b/js/sand/sand.js index 65e87bd..dfe6d80 100644 --- a/js/sand/sand.js +++ b/js/sand/sand.js @@ -8,55 +8,85 @@ 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; +(function(){ -canvas.addEventListener('mousedown', (e) => { - mouseDown = true; - addSand(e); -}); + let mouseDown = false; -canvas.addEventListener('mouseup', () => { - mouseDown = false; -}); - -canvas.addEventListener('mousemove', (e) => { - if (mouseDown) { + canvas.addEventListener('mousedown', (e) => { + mouseDown = true; addSand(e); + }); + + canvas.addEventListener('mouseup', () => { + mouseDown = false; + }); + + canvas.addEventListener('mousemove', (e) => { + if (mouseDown) { + addSand(e); + } + }); + + canvas.addEventListener('touchstart', (e) => { + mouseDown = true; + e.preventDefault(); // Prevent scrolling when touching the canvas + addSand(e.touches[0]); // Use the first touch point + }); + + canvas.addEventListener('touchend', () => { + mouseDown = false; + }); + + canvas.addEventListener('touchmove', (e) => { + if (mouseDown) { + e.preventDefault(); // Prevent scrolling when touching the canvas + addSand(e.touches[0]); // Use the first touch point + } + }); + + 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; + } } -}); - -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 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); -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); + } + } + } + }; // Draw the sand ctx.fillStyle = 'black'; @@ -67,12 +97,19 @@ const drawGrid = () => { } } } -}; -const animate = () => { - updateGrid(); - drawGrid(); - requestAnimationFrame(animate); -}; + const framerate = 60; + let lastFrameTime = 0; + const loop = (currentTime) => { + const deltaTime = (currentTime - lastFrameTime) / 1000; + if (deltaTime > 1 / framerate) { + lastFrameTime = currentTime; + updateGrid(); + drawGrid(); + } + requestAnimationFrame(loop); + }; + + requestAnimationFrame(loop); -animate(); \ No newline at end of file +} )(); \ No newline at end of file |