diff options
| -rw-r--r-- | js/sand/sand.js | 184 |
1 files changed, 89 insertions, 95 deletions
diff --git a/js/sand/sand.js b/js/sand/sand.js index 6310eb5..e977d01 100644 --- a/js/sand/sand.js +++ b/js/sand/sand.js @@ -8,52 +8,49 @@ const gridWidth = Math.floor(canvas.width / gridSize); const gridHeight = Math.floor(canvas.height / gridSize); const grid = Array(gridHeight).fill().map(() => Array(gridWidth).fill(0)); -(function(){ +let mouseDown = false; +let playerAdded = false; +let keys = new Set(); - let mouseDown = false; +canvas.addEventListener('mousedown', (e) => { + mouseDown = true; + addSand(e); +}); - canvas.addEventListener('mousedown', (e) => { - mouseDown = true; +canvas.addEventListener('mouseup', () => { + mouseDown = false; +}); + +canvas.addEventListener('mousemove', (e) => { + if (mouseDown) { addSand(e); - }); + } +}); - canvas.addEventListener('mouseup', () => { - mouseDown = false; - }); +canvas.addEventListener('touchstart', (e) => { + mouseDown = true; + e.preventDefault(); + addSand(e.touches[0]); +}); - canvas.addEventListener('mousemove', (e) => { - if (mouseDown) { - addSand(e); - } - }); +canvas.addEventListener('touchend', () => { + mouseDown = false; +}); - canvas.addEventListener('touchstart', (e) => { - mouseDown = true; - e.preventDefault(); +canvas.addEventListener('touchmove', (e) => { + if (mouseDown) { + e.preventDefault(); addSand(e.touches[0]); - }); - - canvas.addEventListener('touchend', () => { - mouseDown = false; - }); - - canvas.addEventListener('touchmove', (e) => { - if (mouseDown) { - e.preventDefault(); - addSand(e.touches[0]); - } - }); - - 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; - } } +}); - let playerAdded = false; +window.addEventListener('keydown', (e) => { + keys.add(e.key); +}); + +window.addEventListener('keyup', (e) => { + keys.delete(e.key); +}); window.addEventListener('keydown', (e) => { if (e.key === ' ' && !playerAdded) { @@ -62,23 +59,7 @@ window.addEventListener('keydown', (e) => { } }); -function addPlayer() { - for (let y = 0; y < gridHeight; y++) { - for (let x = 0; x < gridWidth; x++) { - if (grid[y][x] === 1) { - grid[Math.max(0, y - 10)][x] = 3; - return; - } - } - } -} - -let keys = new Set(); - -const jumpHeight = 10; - window.addEventListener('keydown', (e) => { - // reset the canvas if (e.key === 'r') { playerAdded = false; @@ -89,7 +70,7 @@ window.addEventListener('keydown', (e) => { } return; } - + // move the character around for (let y = 0; y < gridHeight; y++) { for (let x = 0; x < gridWidth; x++) { @@ -102,9 +83,8 @@ window.addEventListener('keydown', (e) => { grid[y][x] = 0; grid[y][x + 1] = 3; return; - } else if ((e.key === ' ' || e.key === 'ArrowUp' || e.key === 'w') && y < gridHeight - 1 && grid[y + 1][x] !== 0) { - grid[y][x] = 0; - grid[Math.max(y - jumpHeight, 0)][x] = 3; + } else if (isJumpKey(e.key) && y < gridHeight - 1 && grid[y + 1][x] !== 0) { + jumpPlayer(y, x); return; } } @@ -112,9 +92,16 @@ window.addEventListener('keydown', (e) => { } }); -window.addEventListener('keyup', (e) => { - keys.delete(e.key); -}); +const jumpHeight = 10; + +const isJumpKey = key => { + return key === ' ' || key === 'ArrowUp' || key === 'w'; +} + +const jumpPlayer = (y, x) => { + grid[y][x] = 0; + grid[Math.max(y - jumpHeight, 0)][x] = 3; +} const updateGrid = () => { for (let y = gridHeight - 2; y >= 0; y--) { @@ -136,54 +123,61 @@ const updateGrid = () => { grid[y + 1][x] = 3; } } - - } } }; - 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 and player - 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); - } else if (grid[y][x] === 3) { - ctx.fillStyle = 'red'; - ctx.fillRect(x * gridSize, y * gridSize, gridSize, gridSize); - ctx.fillStyle = 'black'; // Reset fill color to black after drawing the player - } - } - } - }; - - // draw the sand + // draw the sand and player 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); + } else if (grid[y][x] === 3) { + ctx.fillStyle = 'red'; + ctx.fillRect(x * gridSize, y * gridSize, gridSize, gridSize); + ctx.fillStyle = 'black'; // Reset fill color to black after drawing the player } } } +}; - const framerate = 60; - let lastFrameTime = 0; - const loop = (currentTime) => { - const deltaTime = (currentTime - lastFrameTime) / 1000; - if (deltaTime > 1 / framerate) { - lastFrameTime = currentTime; - updateGrid(); - drawGrid(); - } - requestAnimationFrame(loop); - }; +const framerate = 60; +let lastFrameTime = 0; + +const gameLoop = (currentTime) => { + const deltaTime = (currentTime - lastFrameTime) / 1000; + if (deltaTime > 1 / framerate) { + lastFrameTime = currentTime; + updateGrid(); + drawGrid(); + } + requestAnimationFrame(gameLoop); +}; - requestAnimationFrame(loop); +requestAnimationFrame(gameLoop); -} )(); +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 addPlayer() { + for (let y = 0; y < gridHeight; y++) { + for (let x = 0; x < gridWidth; x++) { + if (grid[y][x] === 1) { + grid[Math.max(0, y - 10)][x] = 3; + return; + } + } + } +} |