Author: ghou@andrew.cmu.edu

I wanted to create an interactive and hopefully addicting mini-game. This project is inspired by the old arcade games I used to spend all my allowance on to win the big prize at the top! Also the final stacked blocks of my project looks similar to a modern skyscraper building in the grey skylines.

sketch

//Grace Wanying Hou
//15-104 Section D
//ghou@andrew.cmu.edu
//Final Project

//blocks dimensions setup
var h = 20;
var w = 100;
var x = 0;
var y = 20;
var speed = 1;
var fall = 5;
var dropping = false;
var taps = 0;

//arrays
var blocks = [];
var land = [75];

//gameplay
var play = false;
var gameOver = false;
var win = false;


function setup() {
    createCanvas(250, 400);
    frameRate(50);
    
}
 
function draw(){
    noStroke();
    if (gameOver == true){
        if (play == true){//game screen once "gameover"
            makeBackground();
            text("YOUR SCORE WAS " + taps, 60, height - h*taps - 2 * h);
            text("PRESS ANY KEY TO PLAY AGAIN", 28, height - h * taps - h);
            push();
            textSize(10);
            text("screenshot and share your architecture masterpiece :)", 5, 30)//hehe i like architecture
            pop();
            updateDisplay();
        }

        if (win == true){//game screen once player wins
            makeBackground();
            text("YOU WIN",100,40);
            text("PRESS ANY KEY TO PLAY AGAIN", 28, height/2);
            push();
            textSize(10);
            text("screenshot and share your architecture masterpiece :)", 5, 30)
            pop();
            updateDisplay();
        }
        //resetting the variables when restarting game
        if (keyIsPressed){
            gameOver = false;
            play = false;
            win = false;
            blocks = [];
            land = [75];
            dropping = false;
            w = 100;
            x = 0;
            y = 20;
            speed = 1;
            fall = 5;
            taps = 0;
        }
    }
    
    else if (play == true){//screen once game starts
            makeBackground();
            text("PRESS SPACE TO STACK BLOCKS", 30, height/2);
            for (var i = 0; i < 3; i++){
                var xstart = width / 2 - 50;
                var ystart = height - 20;
                blocks[i] = makeBlock(xstart, ystart, 100);
            }//gameplay functions
            blockDrop();
            drawBlock();
            blockMove();
            addBase();
            updateDisplay();
            scoreDisplay();
    }
    
    else {
        if (play == false){//starting screen
            makeBackground();
            text("PRESS ANY KEY TO BEGIN GAME", 28, height/2);
            if (keyIsPressed == true){
                play = true;
            }
        }
    }
    
    if (w <= 0){
        gameOver = true;
        play = true;
    }
    
    else if (taps >= 16 & y >= 50){
        gameOver = true;
        win = true;   
    }
}

function makeBackground(){//making a gradient for the background
    strokeWeight(1);
    for (var i = 0; i < height; i++){
        stroke(255 - i / 8);
        line(0, i, width, i);
    }
}

function blockMove(){//hovering blocks moving side to side
    if (x >= width - w){
        speed = -1 - (taps * 0.2);
    }
    else if(x <= 0){
        speed = 1+(taps * 0.2);
    }
    x = x + speed;
}

function blockDrop(){//dropping blocks
    if (dropping == true){
        y = y + fall;
        speed = 0;
        while (y > height - h * taps){
            dropping = false;
            y = 20;
            speed = 1 + (taps * 0.2);
            fall = 5;
        }
    }
}

function keyTyped(){//setting the blocks to drop once space is pressed
    if (keyCode == 32 & dropping == false && play == true){
        taps = taps + 1;
        append(land, x);
        dropping = true;
    }
}

function drawBlock(){//drawing hovering block
    noStroke();
    fill(0);
    rect(x,y,w,h);
}


function scoreDisplay(){//displaying score (numbers of blocks fallen)
    push();
    fill(255);
    textSize(15);
    text(taps,120,height-5);
    pop();

}
    
function addBase(){//knida confusing measurements of blocks collected in the tower
    var currenth = height - taps * h - h;//current height of tower
    if (y == height - h * taps){//if falling blocks are on the LEFT side of the tower
        if (land[taps] <= land[taps - 1]){
            blocks.push(makeBlock(land[taps - 1], currenth ,w - (land[taps - 1] - land[taps])));
            w = w - (land[taps - 1] - land[taps]);
            shorten(land);
            append(land, land[taps-1]);
        }
        else if (land[taps] > land[taps - 1]){//if falling blocks are on the RIGHT side of the tower
             blocks.push(makeBlock(land[taps], currenth, w - (land[taps] - land[taps - 1])));
             w = w - (land[taps] - land[taps - 1]);
        }
    }
}

function updateDisplay(){//drawing and updating the display of the stacked blocks
    for (var i = 0; i < blocks.length; i++){
        blocks[i].add();
    }
}

function towerBlocks(){//drawing the blocks in the tower
    noStroke();
    fill(0);
    rect(this.x, this.y, this.bw, this.bh);
}

//objects created for each block in the tower
function makeBlock(xlocation, ylocation, currentwidth){
    var block = {x:xlocation,
                 y:ylocation,
                 bh:20,
                 bw:currentwidth,
                 add:towerBlocks,
                 }
    return block;
}