Sandbox Element Game

Okay, let's create a basic 2D falling sand simulation using the HTML Canvas API. Sandbox Element Game

body { margin: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; background-color: #222; font-family: sans-serif; } canvas { display: block; border: 1px solid #555; margin-top: 10px; } #controls { margin-top: 10px; display: flex; gap: 5px; } #controls button { padding: 5px 10px; cursor: pointer; border: 1px solid #ccc; background-color: #444; color: #eee; } #controls button.active { background-color: #666; font-weight: bold; } import { Simulation } from './simulation.js'; import { Renderer } from './renderer.js'; import { InputHandler } from './inputHandler.js'; import { ELEMENTS } from './elements.js'; const canvas = document.getElementById('sandboxCanvas'); const controlsDiv = document.getElementById('controls'); const GRID_WIDTH = 100; const GRID_HEIGHT = 80; const CELL_SIZE = 8; canvas.width = GRID_WIDTH * CELL_SIZE; canvas.height = GRID_HEIGHT * CELL_SIZE; const simulation = new Simulation(GRID_WIDTH, GRID_HEIGHT); const renderer = new Renderer(canvas, simulation.grid, CELL_SIZE, ELEMENTS); const inputHandler = new InputHandler(canvas, simulation, CELL_SIZE, controlsDiv, ELEMENTS.SAND); // Start with Sand let lastTime = 0; const targetFPS = 60; const frameInterval = 1000 / targetFPS; function gameLoop(timestamp) { requestAnimationFrame(gameLoop); const deltaTime = timestamp - lastTime; if (deltaTime >= frameInterval) { lastTime = timestamp - (deltaTime % frameInterval); // Adjust lastTime simulation.update(); renderer.draw(); } } // Initial draw renderer.draw(); // Start the game loop requestAnimationFrame(gameLoop); export const ELEMENTS = { EMPTY: 0, WALL: 1, SAND: 2, WATER: 3, }; export const ELEMENT_COLORS = { [ELEMENTS.EMPTY]: '#333333', // Dark background [ELEMENTS.WALL]: '#888888', // Grey [ELEMENTS.SAND]: '#f0d9a5', // Sandy yellow [ELEMENTS.WATER]: '#4169e1', // Royal blue }; import { ELEMENTS } from './elements.js'; export class Simulation { constructor(width, height) { this.width = width; this.height = height; this.grid = this.createGrid(); this.swapGrid = this.createGrid(); // For double buffering if needed later this.updated = new Set(); // Track updated cells in a frame } createGrid() { return Array.from({ length: this.height }, () => Array(this.width).fill(ELEMENTS.EMPTY) ); } getElement(x, y) { if (x < 0 || x >= this.width || y < 0 || y >= this.height) { return ELEMENTS.WALL; // Treat out of bounds as WALL } return this.grid[y][x]; } setElement(x, y, type) { if (x >= 0 && x < this.width && y >= 0 && y < this.height) { this.grid[y][x] = type; } } swapElements(x1, y1, x2, y2) { const temp = this.grid[y1][x1]; this.grid[y1][x1] = this.grid[y2][x2]; this.grid[y2][x2] = temp; this.updated.add(`${x2},${y2}`); // Mark the destination as updated } isEmpty(x, y) { return this.getElement(x, y) === ELEMENTS.EMPTY; } isWater(x, y) { return this.getElement(x, y) === ELEMENTS.WATER; } update() { this.updated.clear(); // Iterate bottom-up, alternating left-right/right-left for better fluid simulation const randomDirection = Math.random() < 0.5 ? 1 : -1; for (let y = this.height - 1; y >= 0; y--) { const startX = randomDirection === 1 ? 0 : this.width - 1; const endX = randomDirection === 1 ? this.width : -1; for (let x = startX; x !== endX; x += randomDirection) { const cellKey = `${x},${y}`; if (this.updated.has(cellKey)) { continue; // Skip if already updated in this frame } const currentElement = this.grid[y][x]; switch (currentElement) { case ELEMENTS.SAND: this.updateSand(x, y); break; case ELEMENTS.WATER: this.updateWater(x, y); break; // WALL and EMPTY don't move } } } } updateSand(x, y) { // Try to move down if (this.isEmpty(x, y + 1) || this.isWater(x, y + 1)) { this.swapElements(x, y, x, y + 1); return; } // Try to move diagonally down-left/down-right (randomized) const dir = Math.random() < 0.5 ? -1 : 1; if (this.isEmpty(x + dir, y + 1) || this.isWater(x + dir, y + 1)) { this.swapElements(x, y, x + dir, y + 1); return; } if (this.isEmpty(x - dir, y + 1) || this.isWater(x - dir, y + 1)) { this.swapElements(x, y, x - dir, y + 1); return; } } updateWater(x, y) { // Try to move down if (this.isEmpty(x, y + 1)) { this.swapElements(x, y, x, y + 1); return; } // Try to move diagonally down-left/down-right (randomized) const dirDiag = Math.random() < 0.5 ? -1 : 1; if (this.isEmpty(x + dirDiag, y + 1)) { this.swapElements(x, y, x + dirDiag, y + 1); return; } if (this.isEmpty(x - dirDiag, y + 1)) { this.swapElements(x, y, x - dirDiag, y + 1); return; } // Try to move sideways (randomized) const dirSide = Math.random() < 0.5 ? -1 : 1; if (this.isEmpty(x + dirSide, y)) { this.swapElements(x, y, x + dirSide, y); return; } if (this.isEmpty(x - dirSide, y)) { this.swapElements(x, y, x - dirSide, y); return; } } } import { ELEMENT_COLORS } from './elements.js'; export class Renderer { constructor(canvas, grid, cellSize, elements) { this.canvas = canvas; this.ctx = canvas.getContext('2d'); this.grid = grid; this.cellSize = cellSize; this.height = grid.length; this.width = grid[0].length; this.elements = elements; this.elementColors = ELEMENT_COLORS; } draw() { // Clear canvas (optional, could optimize by only drawing changes) // this.ctx.fillStyle = this.elementColors[this.elements.EMPTY]; // this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height); for (let y = 0; y < this.height; y++) { for (let x = 0; x < this.width; x++) { const elementType = this.grid[y][x]; this.ctx.fillStyle = this.elementColors[elementType]; this.ctx.fillRect(x * this.cellSize, y * this.cellSize, this.cellSize, this.cellSize); } } } } import { ELEMENTS } from './elements.js'; export class InputHandler { constructor(canvas, simulation, cellSize, controlsDiv, initialElement) { this.canvas = canvas; this.simulation = simulation; this.cellSize = cellSize; this.controlsDiv = controlsDiv; this.currentElement = initialElement; this.isMouseDown = false; this.brushSize = 3; // Radius of the brush this.canvas.addEventListener('mousedown', this.handleMouseDown.bind(this)); this.canvas.addEventListener('mouseup', this.handleMouseUp.bind(this)); this.canvas.addEventListener('mousemove', this.handleMouseMove.bind(this)); this.canvas.addEventListener('mouseleave', this.handleMouseLeave.bind(this)); // Stop drawing if mouse leaves canvas this.setupControlButtons(); this.updateActiveButton(); } setupControlButtons() { const buttons = this.controlsDiv.querySelectorAll('button[data-element]'); buttons.forEach(button => { button.addEventListener('click', () => { const elementType = button.getAttribute('data-element').toUpperCase(); if (elementType === 'ERASE') { this.currentElement = ELEMENTS.EMPTY; } else if (ELEMENTS[elementType] !== undefined) { this.currentElement = ELEMENTS[elementType]; } this.updateActiveButton(); }); }); } updateActiveButton() { const buttons = this.controlsDiv.querySelectorAll('button[data-element]'); buttons.forEach(button => { const elementType = button.getAttribute('data-element').toUpperCase(); let isActive = false; if (elementType === 'ERASE' && this.currentElement === ELEMENTS.EMPTY) { isActive = true; } else if (ELEMENTS[elementType] === this.currentElement) { isActive = true; } if (isActive) { button.classList.add('active'); } else { button.classList.remove('active'); } }); } getMousePos(event) { const rect = this.canvas.getBoundingClientRect(); const scaleX = this.canvas.width / rect.width; const scaleY = this.canvas.height / rect.height; const x = (event.clientX - rect.left) * scaleX; const y = (event.clientY - rect.top) * scaleY; return { x: Math.floor(x / this.cellSize), y: Math.floor(y / this.cellSize) }; } handleMouseDown(event) { this.isMouseDown = true; this.paint(event); // Paint on initial click } handleMouseUp() { this.isMouseDown = false; } handleMouseLeave() { this.isMouseDown = false; // Stop drawing if mouse leaves canvas while pressed } handleMouseMove(event) { if (this.isMouseDown) { this.paint(event); } } paint(event) { const pos = this.getMousePos(event); // Paint in a square area based on brush size const radius = Math.floor((this.brushSize -1) / 2); for (let dy = -radius; dy <= radius; dy++) { for (let dx = -radius; dx <= radius; dx++) { // Optional: Use a circular brush instead of square // if (dx*dx + dy*dy > radius*radius) continue; const gridX = pos.x + dx; const gridY = pos.y + dy; // Only paint if the target cell is empty or we are erasing if (this.currentElement === ELEMENTS.EMPTY || this.simulation.getElement(gridX, gridY) === ELEMENTS.EMPTY) { this.simulation.setElement(gridX, gridY, this.currentElement); } } } } } This sets up a basic sandbox simulation. You can click the buttons to select an element (Sand, Water, Wall, or Erase) and then click and drag on the canvas to draw that element. Sand falls down, and water falls and spreads sideways. Walls block movement.