path: root/js/sand/sand.js

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));

(function(){

    let mouseDown = false;

    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(); 
        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) => {
    if (e.key === ' ' && !playerAdded) {
        addPlayer();
        playerAdded = true;
    }
});

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;
        for (let y = 0; y < gridHeight; y++) {
            for (let x = 0; x < gridWidth; x++) {
                grid[y][x] = 0;
            }
        }
        return;
    }
    
    // move the character around
    for (let y = 0; y < gridHeight; y++) {
        for (let x = 0; x < gridWidth; x++) {
            if (grid[y][x] === 3) {
                if ((e.key === 'ArrowLeft' || e.key === 'a') && x > 0 && grid[y][x - 1] === 0) {
                    grid[y][x] = 0;
                    grid[y][x - 1] = 3;
                    return;
                } else if ((e.key === 'ArrowRight' || e.key === 'd') && x < gridWidth - 1 && grid[y][x + 1] === 0) {
                    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;
                    return;
                }
            }
        }
    }
});

window.addEventListener('keyup', (e) => {
    keys.delete(e.key);
});

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;
                }
            } else if (grid[y][x] === 3) {
                if (y < gridHeight - 1 && grid[y + 1][x] === 0) {
                    grid[y][x] = 0;
                    grid[y + 1][x] = 3;
                }
            }

            
        }
    }
};

    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
    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 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);

} )();