let arrow;          // Arrow object, what the player controls
let obj;            // Obj is a superclass for the blocks and trails,
                    // As they move together with the same velocity and acceleration
let trails = [];    // List for the trail circles behind the arrow
let blocks = [];    // List for the blocks appearing on screen
let score;          // ...the score.

function setup() {
    noStroke();
    createCanvas(constrain(windowWidth, 0, windowHeight * 2 / 3), windowHeight); // To get min. aspect ratio of 2 : 3
    textAlign(CENTER, CENTER);

    score = 0;
    arrow = new Arrow();
    obj = new Obj();
    blocks.push(new Block(
        obj,
        random(- width / 2, width / 4),
        float(height) * -5 / 6,
        random(width / 4, width / 2)
        ));
}

function draw() {
    background(0);

    translate(width / 2 , height * 5 / 6);  // Using the arrow as origin

    // CREATING STUFF
    if (blocks[blocks.length - 1].y >= - height / 3) {  // New block pushed each time the previous block reaches halfway through
        blocks.push(new Block(
            obj,
            random(- width / 2, width / 4),
            float(height) * -5 / 6,
            random(width / 4, width / 2)
            ));
    }

    trails.push(new Trail(obj, arrow));

    // DELETING STUFF
    if (trails.length > 30) {
        trails.splice(0, 1);
    }

    for (let i = trails.length - 1; i >= 0; i--) {
        if (trails[i].y > float(height) / 6 + trails[i].r) {    // Deleting trails that get past the screen
            trails.splice(i, 1);
        }
    }

    for (let i = blocks.length - 1; i >= 0; i--) {
        if (blocks[i].y > float(height) / 6 + blocks[i].h) {    // Deleting blocks that get past the screen
            blocks.splice(i, 1);
            score++;    // Each block gives a score.
        }
    }

    // CHECKING COLLISION
    if (- width / 20.0 <= blocks[0].y && blocks[0].y <= width / 40.0 + blocks[0].h) {   // I *think* this is causing most of the unoptimisation.
        if (blocks[0].hits(arrow)) {
            gameOver();
        }
    }

    // MOVING STUFF
    if (mouseIsPressed || touches.length !== 0) {   // Arrow moves as long as the mouse is pressed or screen is touched
        obj.vel = constrain(obj.vel + obj.acc, 0, height / 40.0);
    } else {    // Deceleration.
        obj.vel = constrain(obj.vel - obj.acc, 0, height / 40.0);
    }

    for (let trail of trails) {
        trail.move();
    }

    for (let block of blocks) {
        block.move();
    }

    arrow.update();

    // SHOWING STUFF
    for (let trail of trails) {
        trail.show();
    }

    for (let block of blocks) {
        block.show();
    }

    arrow.show();

    textSize(width * 0.08);
    //fill(91,192,255);
    fill(50, 125, 255);
    text(score, - width * 0.44, - height * 0.785);  // Score on top
}

function gameOver() {
    blocks = [];
    trails = [];
    arrow.y = height;
    noLoop();
    textSize(height / 10.0);
    text("Game Over", 0, - height / 3.0);
}
function Obj() {
    this.vel = 0.0;
    this.acc = float(width) / 800;  // Default acceleration/deceleration for every moving object
}

function Arrow() {
    this.x = 0.0;
    this.y = 0.0;

    this.update = function() {
        this.x = width * 7.0 / 16 * Math.sin(frameCount * 0.05);  // sin gives an oscillating value between -1 and 1
    };

    this.show = function() {
        fill(255);
        beginShape();  // 3 vertices for triangle
        vertex(this.x, this.y - width / 20.0);
        vertex(this.x - height / 50.0, this.y + width / 40.0);
        vertex(this.x + height / 60.0, this.y + width / 40.0);
        endShape(CLOSE);
    };
}

function Trail(obj, arrow) {
    this.x = arrow.x;
    this.y = arrow.y + width / 40.0;
    this.r = width / 25.0;

    this.move = function() {
        this.y += obj.vel;
    };

    this.show = function() {
        fill(50, 125, 255, 70);
        ellipse(this.x, this.y, this.r);
    };
}

function Block(obj, x, y, w) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = height / 20.0;

    this.show = function() {
        fill(255);
        rect(this.x, this.y - this.h, this.w, this.h);
    };

    this.hits = function(arrow) {
        return (arrow.x >= this.x && arrow.x - this.x <= this.w);
    };

    this.move = function() {
        this.y += obj.vel;
    };
}