const blockHeight = 30;

let currentBlock;

​

let blockDir;

let blockSpeed;

let img;

let plateImg;

​

let placedBlocks = [];

​

const statePlaying = "playing";

const stateLose = "lose";

const stateWin = "win";

​

let menuState = statePlaying;

​

function preload() {

    img = loadImage('assets/kitchen.jpg');

    plateImg = loadImage('assets/plate.png');

}

​

function setup() {

    createCanvas(1000, 1000);

    textAlign(CENTER, CENTER);

    newGame();

}

​

function draw() {

    background(255);

    image(img, 0, 0, 1000, 1000); // Draw background image

​

    // Draw plate image

    const plateWidth = 450; // Adjust the width of the plate

    const plateHeight = 70; // Adjust the height of the plate

    const plateX = 290; // Set x position

    const plateY = 720; // Set y position

​

    image(plateImg, plateX, plateY, plateWidth, plateHeight);

​

    if(menuState === statePlaying) { 

        textSize(blockHeight);

        updateBlock();

        drawBlocks();

    } else if(menuState === stateLose) {

        textSize(blockHeight * 2);

        fill(255, 0, 0);

        text("Loser!", width/2, height/2);

        textSize(blockHeight);

        text("Press space to start a new game!", width/2, height * 3/4);

    } else if(menuState === stateWin) {

        textSize(blockHeight * 2);

        fill(0, 255, 0);

        text("Winner!", width/2, height/2);

        textSize(blockHeight);

        text("Press space to start a new game!", width/2, height * 3/4);

    }  

}

​

function keyReleased() {

    if(key === " ") {

        if(menuState === statePlaying) {

            placeBlock(); 

        } else {

            newGame();

            menuState = statePlaying;

        }

    }

}

​

function newGame() {

    currentBlock = createVector(0, 720, blockWidth);

    blockDir = 1;

    blockSpeed = 2;

    placedBlocks = [];

}

​

function updateBlock() {

    currentBlock.x += blockDir * blockSpeed;

    if(currentBlock.x < 0) {

        blockDir = 1;

    }

    if(currentBlock.x + currentBlock.z > width) {

        blockDir = -1;

    }  

}

​

function drawBlocks() {

    fill(255);

    ellipse(currentBlock.x + currentBlock.z / 2, currentBlock.y + blockHeight / 2, currentBlock.z, blockHeight);

    fill(205, 133, 63);

    for(let block of placedBlocks) {

        ellipse(block.x + block.z / 2, block.y + blockHeight / 2, block.z, blockHeight);

    }

    text(placedBlocks.length, blockHeight, blockHeight);

}

​

function placeBlock() {

    const prevBlock = placedBlocks[placedBlocks.length - 1];

    let newWidth = blockWidth;

    if(prevBlock) {

        const leftEdge = max(prevBlock.x, currentBlock.x);

        const rightEdge = min(prevBlock.x + prevBlock.z, currentBlock.x + currentBlock.z);

​

        newWidth = rightEdge - leftEdge;

        currentBlock.x = leftEdge;

        currentBlock.z = newWidth;

    }

    if(newWidth < 0) {

        menuState = stateLose;

        return;

    }

    placedBlocks.push(currentBlock);

    blockSpeed *= 1.1;

    newBlock(newWidth);

}

​

function newBlock(newWidth) {

    const blockStackHeight = 720 - (placedBlocks.length * blockHeight);

    if(blockStackHeight < 0) {

        menuState = stateWin;

        return;

    }

    currentBlock = createVector(0, blockStackHeight, newWidth);

}

​