dead-wastes/sketch.js

var floorPos_y;
var cameraPosX;
var camera_speed;
var processStop_timer;
var fps_recent_values = [];
var death_timer;
var showDebugData = false;
var debug_charTrace = [];
var shadows_enabled = false;

var gameChar;

var gravity;
var game_score;
var finish_position_x;

var trees_x = [];
var clouds = [];
var mountains = [];
var collectables = [];
var rivers = [];
var platforms = [];
var enemies = [];
var flagpole;

function GameCharacter() {
    this.x = width / 2;
    this.y = floorPos_y + (height - floorPos_y) / 6;
    this.x_step = 5;
    this.y_step = 8;
    this.scale = 1;
    this.sprite = 1;
    this.speed = 5;
    this.baseLives = 3;
    this.curLives = 3;
    this.baseJumpingStrength = 16;
    this.curJumpingStrength = 0;
    this.isRight = false;
    this.isLeft = false;
    this.isFalling = false;
    this.isJumping = false;
    this.isPlummeting = false;
    this.isOnPlatform = false;
    this.curGroundIndex = 0;
    this.memorizedPlatform;

    this._updateSprite = function () {
        if (this.isPlummeting) {
            this.sprite = 2;
        } else if (this.isFalling) {
            this.sprite = 2;
            if (this.isLeft && !this.isRight) this.sprite = 5;
            else if (this.isRight && !this.isLeft) this.sprite = 6;
        } else {
            if (this.isLeft && !this.isRight) this.sprite = 4;
            else if (this.isRight && !this.isLeft) this.sprite = 3;
            else this.sprite = 1;
        }
    };
    this.draw = function () {
        this._drawBody = function (jumping = false) {
            fill(palette.body_color);
            if (jumping) {
                triangle(
                    this.x - this.x_step * 2,
                    this.y - this.y_step * 1.5,
                    this.x,
                    this.y - this.y_step * 4,
                    this.x + this.x_step * 2,
                    this.y - this.y_step * 1.5,
                );
            } else {
                triangle(
                    this.x - this.x_step * 2,
                    this.y,
                    this.x,
                    this.y - this.y_step * 4,
                    this.x + this.x_step * 2,
                    this.y,
                );
            }
        }
        this._drawHead = function () {
            fill(palette.ground_colors[this.curGroundIndex]);
            ellipse(
                this.x,
                this.y - this.y_step * 5,
                this.x_step * 6,
                this.y_step * 4,
            );
        }
        this._drawEyes = function (draw_left, draw_right, eyes_height) {
            fill(0);
            if (draw_left) {
                ellipse(
                    this.x - this.x_step * 1.2,
                    this.y - this.y_step * eyes_height,
                    this.x_step / 1.5,
                    this.y_step / 2,
                );
            }
            if (draw_right) {
                ellipse(
                    this.x + this.x_step * 1.2,
                    this.y - this.y_step * eyes_height,
                    this.x_step / 1.5,
                    this.y_step / 2,
                );
            }
        }
        this._updateSprite();
        push();
        strokeWeight(1);
        stroke(1);
        this.x_step *= this.scale;
        this.y_step *= this.scale;
    
        // Standing, facing frontwards
        if (this.sprite == 1) {
            // Body
            this._drawBody();
            // Head
            this._drawHead();
            // Eyes
            this._drawEyes(true, true, 4.2);
        }
        // Jumping, facing forwards
        else if (this.sprite == 2) {
            // Body
            this._drawBody(true);
            // Hands. (Hands!)
            line(
                this.x - this.x_step * 1,
                this.y - this.y_step * 2.5,
                this.x - this.x_step * 3.2,
                this.y - this.y_step * 3.2,
            );
            line(
                this.x + this.x_step * 1,
                this.y - this.y_step * 2.5,
                this.x + this.x_step * 3.2,
                this.y - this.y_step * 3.2,
            );
            // Head
            this._drawHead();
            // Eyes
            this._drawEyes(true, true, 3.8);
        }
        // Walking right
        else if (this.sprite == 3) {
            // Body
            this._drawBody();
            // Hand. (Hand!)
            line(
                this.x,
                this.y - this.y_step * 2.5,
                this.x + this.x_step * 0.8,
                this.y - this.y_step * 1,
            );
            // Head
            this._drawHead();
            // Eyes
            this._drawEyes(false, true, 4.2);
        }
        // Walking left
        else if (this.sprite == 4) {
            // Body
            this. _drawBody();
            // Hand. (Hand!)
            line(
                this.x,
                this.y - this.y_step * 2.5,
                this.x - this.x_step * 0.8,
                this.y - this.y_step * 1,
            );
            // Head
            this._drawHead();
            // Eyess
            this._drawEyes(true, false, 4.2);
        }
        // Jumping left
        else if (this.sprite == 5) {
            // Body
            this._drawBody(true);
            // Hands. (Hands!)
            line(
                this.x - this.x_step * 1,
                this.y - this.y_step * 2.5,
                this.x - this.x_step * 3.2,
                this.y - this.y_step * 3.2,
            );
            line(
                this.x + this.x_step * 1,
                this.y - this.y_step * 2.5,
                this.x + this.x_step * 3.2,
                this.y - this.y_step * 3.2,
            );
            // Head
            this._drawHead();
            // Eyes
            this._drawEyes(true, false, 3.8);
        }
        // Jumping right
        else if (this.sprite == 6) {
            // Body
            this._drawBody(true);
            // Hands. (Hands!)
            line(
                this.x - this.x_step * 1,
                this.y - this.y_step * 2.5,
                this.x - this.x_step * 3.2,
                this.y - this.y_step * 3.2,
            );
            line(
                this.x + this.x_step * 1,
                this.y - this.y_step * 2.5,
                this.x + this.x_step * 3.2,
                this.y - this.y_step * 3.2,
            );
            // Head
            this._drawHead();
            // Eyes
            this._drawEyes(false, true, 3.8);
        } else {
            text('Bad sprite number!', 10, 10);
            console.error('Bad this sprite number: ' + this.sprite);
            noLoop();
        }
        this.x_step /= this.scale;
        this.y_step /= this.scale;
        pop();
    };
    this.drawShadow = function () {
        push();
        noStroke();
        this.x_step *= this.scale;
        this.y_step *= this.scale;
        fill('rgba(0,0,0,0.2)');
        if (!this.isPlumetting)
            shadow_y = groundPositions[this.curGroundIndex];
        else shadow_y = NaN;
        ellipse(
            this.x,
            shadow_y,
            this.x_step * 5,
            this.y_step * 1.5,
        );
        this.x_step /= this.scale;
        this.y_step /= this.scale;
        pop();
    };
    this._checkPlayerDie = function () {
        if (frameCount - death_timer > 60) {
            if (this.curLives > 1) {
                this.curLives--;
                death_timer = undefined;
                startGame();
            } else if (this.curLives == 1) {
                this.curLives--;
            } else {
                this.curLives = 0;
            }
        }
    };
    this.act = function () {
        if (!this.isPlummeting) {
            if (this.isLeft && !this.isRight) {
                this.x -= this.speed;
            } else if (this.isRight && !this.isLeft) {
                this.x += this.speed;
            }
            if (this.isJumping) {
                this.y -= this.curJumpingStrength;
                this.curJumpingStrength -= gravity;
                // If the jump peak is reached, the character is considered to be falling instead.
                if (this.curJumpingStrength <= 0) {
                    this.isFalling = true;
                    this.isJumping = false;
                }
            } else if (this.isFalling) {
                this.y -= this.curJumpingStrength;
                this.curJumpingStrength -= gravity;
                for (i = 0; i < platforms[this.curGroundIndex].length; i++) {
                    // If a character is falling above some platform, memorize it
                    if (platforms[this.curGroundIndex][i].isAbove(this)) {
                        this.memorizedPlatform = platforms[this.curGroundIndex][i];
                    } 
                    // If a character is below a memorized platform, make them stand on that platform
                    if (typeof this.memorizedPlatform !== 'undefined' &&
                    this.memorizedPlatform.isBelow(this)) {
                        this.y = this.memorizedPlatform.y;
                        this.isFalling = false;
                        this.curJumpingStrength = 0;
                        this.isOnPlatform = true;
                    }
                }
                // if a character is below the ground, make them stand on the ground
                if (this.y >= this.getCurGroundY()) {
                    this.y = this.getCurGroundY();
                    this.isFalling = false;
                    this.curJumpingStrength = 0;
                    this.isOnPlatform = false;
                }
            } else if (this.isOnPlatform) {
                // Not plummeting, standing or falling means being on a platform.
                // Perform checks whether the player is still on the same platform,
                // and fall them in case they aren't.
                if (!this.memorizedPlatform._isWithinX(this)
                    ||
                    this.curGroundIndex != this.memorizedPlatform.curGroundIndex) {
                        this.isFalling = true;
                        this.isOnPlatform = false;
                        this.memorizedPlatform = undefined;
                    }
            }
        }
        this._checkPlayerDie();
        // Doing plummeting
        if (this.isPlummeting) {
            // using OR operator to set to frameCount in case death_timer is undefined,
            // but not updating the death_timer again in case it is not undefined.
            death_timer = death_timer || frameCount;
            this.y += 3;
        }
    };

    this.getCurGroundY = function () {
        return groundPositions[this.curGroundIndex];
    };
    this.goUp = function () {
        memorizedIndex = this.curGroundIndex;
        this.curGroundIndex = max(0, this.curGroundIndex - 1);
        if (memorizedIndex != this.curGroundIndex) {
            this.y -= (height - floorPos_y) / 3;
            this.scale -= 0.1;
        }
    };
    this.goDown = function () {
        memorizedIndex = this.curGroundIndex;
        this.curGroundIndex = min(
            groundPositions.length - 1,
            this.curGroundIndex + 1,
        );
        if (memorizedIndex != this.curGroundIndex) {
            this.y += (height - floorPos_y) / 3;
            this.scale += 0.1;
        }
    };
}
// NB: All the platforms mechanics were done 
// before the task was seen on Week 20. 
// Therefore, the implementation may
// differ from one in the lecture.
function Platform(curGroundIndex, x, width, y) {
    this.curGroundIndex = curGroundIndex;
    this.x = x;
    this.width = width;
    // To make platforms jumpable to each other, define a max vertical difference
    // thru an arithmetic progression dependent on the game character's jumping strength and gravity.
    this.max_y_deviation =
        ((gameChar.baseJumpingStrength / gravity) *
            gameChar.baseJumpingStrength) /
        2;
    this.y = y || groundPositions[curGroundIndex] - this.max_y_deviation;

    this.draw = function () {
        push();
        stroke(0);
        strokeWeight(2);
        fill(palette.ground_colors[curGroundIndex]);
        rect(
            this.x - this.width,
            this.y,
            width * 2,
            height / 100,
        );
        pop();
    };
    this.drawShadow = function () {
        push();
        // drawing shadow on the ground
        noStroke();
        fill('rgba(0,0,0, 0.15)');
        rect(
            this.x - this.width,
            groundPositions[curGroundIndex],
            width * 2,
            height / 100,
        );

        pop();
    };

    this._isWithinX = function (who) {
        if (who.x >= this.x - this.width && who.x <= this.x + this.width) {
            return true;
        }
        return false;
    };

    this.isBelow = function (who) {
        if (this._isWithinX(who) && who.y >= this.y) {
            return true;
        }
        return false;
    };

    this.isAbove = function (who) {
        if (this._isWithinX(who) && who.y < this.y) {
            return true;
        }
        return false;
    };
}

var text_size;
// Variables to set colors. Set in setup()
var palette;

function setup() {
    createCanvas(1024, 576);
    palette = {
        body_color: color('white'),
        head_color: color('darkgreen'),
        sky_color: color('#8E9887'),
        ground_colors: [color('#874321'), color('#636721'), color('#634345')],
        river_river_color: color('#56C525'),
        river_river_wave_color: color('#4BAD21'),
        river_color: color('#7B672A'),
        pine_leaves_color: color('#3F4834'),
        maple_leaves_color: color('#4E3D1F'),
        pine_stem: color('#644D0D'),
        maple_stem: color('#936907'),
        mountain: color('#5a5a5a'),
        mountain_shadow: color('#3c3c3c'),
        cloud0: color(200),
        cloud1: color(220),
        cloud2: color(255),
        coin_outer: color('#FDC334'),
        coin_middle: color('#ababab'),
        coin_inner: color('#FDC334'),
        heart_color: color('darkred'),
        enemy_head_color: color('red'),
        enemy_body_color: color('red'),
    };
    startGame((level_start = true));
}
function startGame(level_start) {
    floorPos_y = 432;
    // levels of depth where the character, collectable and enemies stand.
    groundPositions = [
        floorPos_y + (height - floorPos_y) / 6,
        floorPos_y + (3 * (height - floorPos_y)) / 6,
        floorPos_y + (5 * (height - floorPos_y)) / 6,
    ];
    camera_speed = 0.9;
    gravity = 1;
    game_score = 0;
    finish_position_x = 2000;
    textSize(width / 20);
    flagpole = {
        x: finish_position_x,
        isReached: false,
        size_vert: 4,
        size_hor: 7,
        cell_size: 20,
        cell_size_v: 20,
        cell_size_h: 20,
    };
    if (level_start) {
        gameChar = new GameCharacter();
        cameraPosX = gameChar.x - width / 2;
        // Creating trees, clouds, mountains, rivers, collectables.
        {
            // Creating trees, clouds, mountains, rivers, collectables, platforms, enemies.
            for (i = 0; i < 150; i++) {
                trees_x[i] = random(-100, 10000);
            }
            for (i = 0; i < 100; i++) {
                clouds[i] = {
                    x: random(-100, 10000),
                    y: random(0, floorPos_y / 2),
                    size: random(0.4, 2),
                };
            }
            // Latter mountains.
            for (i = 0; i < finish_position_x / 90; i++) {
                mountains[i] = {
                    x: random(-200, finish_position_x + 200),
                    width: random(60, 150),
                    height: random(floorPos_y - 50, floorPos_y - 150),
                    skew: random(-20, 20),
                };
                // To prevent spiky mountains which are quite ugly
                mountains[i].height = max(
                    mountains[i].width,
                    mountains[i].height,
                );
            }
            // Start mountains.
            for (i = 0; i < 6; i++) {
                mountains[i] = {
                    x: width / (i + 1.5),
                    width: width / (i + random(2, 4)),
                    height: height / (2 + 0.8 * i),
                    skew: (random(-10, 20) * i) / 2,
                };
            }
            for (i = 0; i < 100; i++) {
                if (i == 0) {
                    rivers[0] = {
                        x: 700,
                        width: 50,
                        points: [],
                    };
                } else {
                    if (rivers[i - 1].x + 600 > finish_position_x) break;
                    rivers[i] = {
                        x: rivers[i - 1].x + 300 + 200 * random(0.5, 1),
                        width: 50 + 30 * random(),
                        points: [],
                    };
                }
            }
            for (i = 0; i < 100; i++) {
                if (i == 0) {
                    collectables[0] = {
                        x: 600,
                        curGroundIndex: 0,
                        y:
                            groundPositions[0] -
                            10 /*taking 10 for better visuals*/,
                        size: 75,
                        isFound: false,
                    };
                } else {
                    // Skipping generating coins after the finish line
                    if (collectables[i - 1].x + 200 > finish_position_x) {
                        break;
                    }
                    r = floor(random(0, groundPositions.length));
                    collectables[i] = {
                        x: collectables[i - 1].x + 50 + 100 * random(0.5, 1),
                        curGroundIndex: r,
                        y:
                            groundPositions[r] -
                            10 /*taking 10 for better visuals*/,
                        size: 75,
                        isFound: false,
                    };
                    // Checking whether the coin is over a river;
                    // marking it as isFound (making it disabled) in case if.
                    for (k = 0; k < rivers.length; k++) {
                        if (
                            rivers[k].x - rivers[k].width / 2 <
                                collectables[i].x &&
                            rivers[k].x + rivers[k].width / 2 >
                                collectables[i].x
                        ) {
                            collectables[i].isFound = true;
                        }
                    }
                }
            }
            for (i = 0; i < groundPositions.length; i++) {
                platforms[i] = [];
            }
            for (i = 0; i < 100; i++) {
                if (i == 0) {
                    platforms[0][0] = new Platform(
                        0,
                        700,
                        50,
                        groundPositions[0] - Platform.max_y_deviation,
                    );
                    platforms[1][0] = new Platform(
                        1,
                        800,
                        50,
                        groundPositions[1] - Platform.max_y_deviation,
                    );
                    platforms[2][0] = new Platform(
                        2,
                        900,
                        50,
                        groundPositions[2] - Platform.max_y_deviation,
                    );
                } else {
                    let groundPosIndex = floor(
                        random(0, groundPositions.length),
                    );
                    // array.slice(-1)[0] gets the last element of an array without removing it,
                    // contrary to array.pop().
                    prev = platforms[groundPosIndex].slice(-1)[0];
                    // stopping generation after the flagpole
                    if (prev.x + prev.width + 155 > finish_position_x) break;
                    platforms[groundPosIndex].push(
                        new Platform(
                            groundPosIndex,
                            prev.x + random(prev.width + 70, prev.width + 155),
                            random(15, 60),
                            max(
                                random(
                                    prev.y - prev.max_y_deviation,
                                    floorPos_y - prev.max_y_deviation,
                                ),
                                height / 8,
                            ),
                        ),
                    );
                }
            }
        }
    } else {
        gameChar.x = width / 2;
        gameChar.y = floorPos_y + (height - floorPos_y) / 6;
        gameChar.scale = 1;
        gameChar.curGroundIndex = 0;
        gameChar.isPlummeting = false;
        gameChar.isFalling = false;
        gameChar.isJumping = false;
        gameChar.isLeft = false;
        gameChar.isRight = false;
        gameChar.isOnPlatform = false;
    }
}
function draw() {
    // -------- SKY ----------------
    background(palette.sky_color);

    // -------- GROUND -------------
    drawGround();

    push();
    fill(0);

    translate(-cameraPosX, 0); // Scrolling everything
    // Focusing on the character. lerp() ensures fluid camera movement.
    if (gameChar.x < finish_position_x)
        cameraPosX = lerp(gameChar.x - width / 2, cameraPosX, camera_speed);
    else
        cameraPosX = lerp(
            finish_position_x - width / 2,
            cameraPosX,
            camera_speed,
        );

    // -------- CLOUDS --------------
    drawClouds();
    // -------- MOUNTAINS -----------
    drawMountains();
    // -------- CANYONS -------------
    for (i = 0; i < rivers.length; i++) {
        river = rivers[i];
        drawRiver(river);
        if (!gameChar.isFalling && !gameChar.isJumping) checkRiver(river);
    }
    // -------- TREES ---------------
    drawTrees();
    // -------- PLATFORMS SHADOWS ---
    if (shadows_enabled)
        for (i = 0; i < groundPositions.length; i++) {
            drawPlatformsShadows(i);
        }
    // -------- COLLECTABLES --------
    for (i = 0; i < collectables.length; i++) {
        collectable = collectables[i];
        if (!collectable.isFound) drawCollectable(collectable);
        checkCollectable(collectable);
    }
    // -------- FLAGPOLE ------------
    renderFlagpole();
    if (!flagpole.isReached) checkFlagpole();
    // GAMECHAR, PLATFORMS & ENEMIES RENDER
    complexDraw();
    // - ------ GAME CHARACTER ------
    gameChar.act();
    pop(); // Scrolling end
    // -------- INTERFACE -----------
    drawInterface();
}
function complexDraw() {
    // Since platforms require being drawn in three different ordrs relative to enemies and the game character,
    // a function is made to handle this and to decrease clutter.
    for (i = 0; i <= gameChar.curGroundIndex; i++) {
        drawPlatforms(i);
    }
    if (shadows_enabled) gameChar.drawShadow();
    gameChar.draw();
    for (i = gameChar.curGroundIndex + 1; i < groundPositions.length; i++) {
        drawPlatforms(i);
    }
}
function drawInterface() {
    push();
    fill(0);
    stroke(0);
    text('Score: ' + game_score, 12, text_size);
    drawLives();
    if (gameChar.curLives < 1)
        text('Game over. Press space to continue...', 0, height / 2);
    else if (flagpole.isReached)
        text('Level complete. Press space to continue...', 0, height / 2);
    if (showDebugData) {
        text(gameChar.curGroundIndex, 99, 99);
        text(gameChar.getCurGroundY(), 188, 99);
        text(gameChar.sprite, 277, 99);

        // draw game character's trajectory
        drawCharTrace();
        drawFps();
    }
    pop();
}
function drawCharTrace() {
    debug_charTrace.push([gameChar.x, gameChar.y]);
    if (debug_charTrace.length > 100) debug_charTrace.shift();
    push();
    stroke(255, 0, 0);
    strokeWeight(3);
    translate(-cameraPosX, 0);
    for (i = 0; i < debug_charTrace.length; i++) {
        point(debug_charTrace[i][0], debug_charTrace[i][1]);
    }
    translate(cameraPosX, 0);
    pop();
}
function checkRiver(t_river) {
    if (
        gameChar.x > river.x - river.width / 2 &&
        gameChar.x < river.x + river.width / 2 &&
        gameChar.y > floorPos_y
    ) {
        gameChar.isPlummeting = true;
    }
}
function checkCollectable(t_collectable) {
    if (
        !t_collectable.isFound &&
        collectable.curGroundIndex == gameChar.curGroundIndex &&
        dist(
            t_collectable.x,
            t_collectable.y,
            gameChar.x,
            gameChar.y - gameChar.x_step * 4,
        ) <
            t_collectable.size / 2
    ) {
        t_collectable.isFound = true;
        game_score++;
    }
}
function drawGround() {
    push();
    noStroke();
    fill(palette.ground_colors[0]);
    rect(0, floorPos_y, width, height - floorPos_y);
    fill(palette.ground_colors[1]);
    rect(
        0,
        floorPos_y + (2 * (height - floorPos_y)) / 6,
        width,
        floorPos_y + (2 * (height - floorPos_y)) / 6,
    );
    fill(palette.ground_colors[2]);
    rect(
        0,
        floorPos_y + (4 * (height - floorPos_y)) / 6,
        width,
        floorPos_y + (4 * (height - floorPos_y)) / 6,
    );
    stroke(1);
    translate(-cameraPosX, 0);
    for (i = -width / 2; i < finish_position_x + width / 2; i += 20) {
        line(
            i,
            floorPos_y + (2 * (height - floorPos_y)) / 6,
            i + 1,
            floorPos_y + (2 * (height - floorPos_y)) / 6,
        );
        line(
            i,
            floorPos_y + (4 * (height - floorPos_y)) / 6,
            i + 1,
            floorPos_y + (4 * (height - floorPos_y)) / 6,
        );
    }
    pop();
}
function drawRiver(t_river) {
    push();
    fill(palette.river_river_color);
    rect(t_river.x - t_river.width / 2, floorPos_y, t_river.width, height);

    // Waves animation.
    if (frameCount % 2 == 0) {
        PointX = random(
            t_river.x - t_river.width / 2 + 5,
            t_river.x + t_river.width / 2 - 5,
        );
        PointY = random(floorPos_y, height);
        if (t_river.points.length > 2) {
            t_river.points.shift();
        }
        t_river.points.push([PointX, PointY, random(20, 100)]);
    }
    stroke(palette.river_river_wave_color);
    strokeWeight(5);
    for (k = 0; k < t_river.points.length; k++) {
        line(
            t_river.points[k][0],
            t_river.points[k][1],
            t_river.points[k][0],
            t_river.points[k][1] + t_river.points[k][2],
        );
    }

    pop();
}
function drawCollectable(t_collectable) {
    push();
    // animating the coin's jiggle
    // a - vert. intensity, c - hor. intensity, b - vert. speed, d - hor. speed
    a = 0.1;
    b = 3;
    c = 0.2;
    d = 2;
    t_collectable.y -= sin(frameCount * a) * b;
    t_collectable.x += sin(frameCount * c) * d;
    stroke(0.2);
    fill(palette.coin_outer);
    ellipse(t_collectable.x, t_collectable.y, 0.7 * t_collectable.size);
    fill(palette.coin_middle);
    ellipse(t_collectable.x, t_collectable.y, 0.6 * t_collectable.size);
    fill(palette.coin_inner);
    ellipse(t_collectable.x, t_collectable.y, 0.5 * t_collectable.size);
    // restoring coin's coordinates to preserve game logic
    t_collectable.y += sin(frameCount * a) * b;
    t_collectable.x -= sin(frameCount * c) * d;
    pop();
}
function drawClouds() {
    for (i = 0; i < clouds.length; i++) {
        push();
        // imitating clouds movement, upper ones should go faster
        translate((frameCount / clouds[i].y) * 20, 0);
        // Adding counter-translating to implement parallax, the feeling of depth
        translate(cameraPosX / 1.1, 0);

        noStroke();
        fill(palette.cloud0);
        ellipse(
            clouds[i].x - 20,
            clouds[i].y - 10,
            20 * clouds[i].size,
            30 * clouds[i].size,
        );
        fill(palette.cloud1);
        ellipse(
            clouds[i].x + 20,
            clouds[i].y - 20,
            70 * clouds[i].size,
            50 * clouds[i].size,
        );
        fill(palette.cloud2);
        ellipse(
            clouds[i].x,
            clouds[i].y,
            90 * clouds[i].size,
            40 * clouds[i].size,
        );
        ellipse(
            clouds[i].x + 45,
            clouds[i].y - 10,
            50 * clouds[i].size,
            35 * clouds[i].size,
        );
        pop();
    }
}
function drawMountains() {
    for (i = 0; i < mountains.length; i++) {
        push();
        // slowing down translation to add parallax, the feeling of depth
        translate(cameraPosX / 2, 0);
        noStroke();
        fill(palette.mountain_shadow);
        triangle(
            mountains[i].x - mountains[i].width,
            floorPos_y,
            mountains[i].x + mountains[i].skew,
            mountains[i].height,
            mountains[i].x + mountains[i].width,
            floorPos_y,
        );
        fill(palette.mountain);
        triangle(
            mountains[i].x - mountains[i].width,
            floorPos_y,
            mountains[i].x + mountains[i].skew,
            mountains[i].height,
            mountains[i].x - mountains[i].width / 1.5,
            floorPos_y,
        );
        pop();
    }
}
function drawHeart(isEmpty, x, y, size) {
    push();
    if (isEmpty) {
        noFill();
        stroke(0);
    } else {
        fill(palette.heart_color);
        stroke(palette.heart_color);
    }
    triangle(x, y, x + size, y - size, x + size * 2, y);
    triangle(x - size * 2, y, x - size, y - size, x, y);
    triangle(x, y, x + size, y + size, x - size, y + size);
    triangle(x - size * 2, y, x, y + size * 2, x + size * 2, y);
    pop();
}
function drawLives() {
    push();
    stroke(255, 0, 0);
    noFill();
    var heart_size = 20;
    for (i = gameChar.baseLives; i > 0; i--) {
        drawHeart(
            true,
            width - i * heart_size * 4.5,
            heart_size * 1.5,
            heart_size,
        );
    }
    for (i = gameChar.curLives; i > 0; i--) {
        drawHeart(
            false,
            width - i * heart_size * 4.5,
            heart_size * 1.5,
            heart_size,
        );
    }
    pop();
}
function drawTrees() {
    for (i = 0; i < trees_x.length; i++) {
        // Draw pine in case the integer part of tree
        // coordinate is even.
        if (Math.trunc(trees_x[i]) % 2 == 0) {
            fill(palette.pine_stem);
            triangle(
                trees_x[i] - 15,
                floorPos_y,
                trees_x[i],
                floorPos_y - 150,
                trees_x[i] + 15,
                floorPos_y,
            );
            fill(palette.pine_leaves_color);
            triangle(
                trees_x[i] - 45,
                floorPos_y - 45,
                trees_x[i],
                floorPos_y - 120,
                trees_x[i] + 45,
                floorPos_y - 45,
            );
            triangle(
                trees_x[i] - 45,
                floorPos_y - 85,
                trees_x[i],
                floorPos_y - 180,
                trees_x[i] + 45,
                floorPos_y - 85,
            );
        }
        // Draw maple
        else {
            fill(palette.maple_stem);
            triangle(
                trees_x[i] - 10,
                floorPos_y,
                trees_x[i],
                floorPos_y - 120,
                trees_x[i] + 10,
                floorPos_y,
            );
            fill(palette.maple_leaves_color);
            ellipse(trees_x[i], floorPos_y - 50, 80, 30);
            ellipse(trees_x[i], floorPos_y - 70, 100, 30);
            ellipse(trees_x[i], floorPos_y - 90, 80, 30);
            ellipse(trees_x[i], floorPos_y - 110, 40, 30);
        }
    }
}
function drawPlatforms(rowIndex) {
    push();
    for (k = 0; k < platforms[rowIndex].length; k++) {
        platforms[rowIndex][k].draw();
    }
    pop();
}
function drawPlatformsShadows(rowIndex) {
    push();
    for (k = 0; k < platforms[rowIndex].length; k++) {
        platforms[rowIndex][k].drawShadow();
    }
    pop();
}
function renderFlagpole() {
    // NB - This function is implemented a bit differently than how it was requested in Part 6.
    // It has no states to switch between - instead, the flag gradually goes into the opposite direction
    // as the player crosses it, what is done by manipulating flagpole's parameters.
    // This is done for animation purposes.

    push();
    strokeWeight(0);
    fill(0);

    // Movement animation, as mentioned in NB.
    if (flagpole.isReached && flagpole.cell_size_h > -flagpole.cell_size)
        flagpole.cell_size_h -= 0.8;
    // the flagpole pole
    rect(flagpole.x, floorPos_y / 2, 2, floorPos_y / 2);

    // the flagpole flag
    for (i = 0; i < flagpole.size_hor; i++) {
        for (j = 0; j < flagpole.size_vert; j++) {
            fill(((i + j) % 2) * 255);
            rect(
                flagpole.x + flagpole.cell_size_h * i,
                floorPos_y / 2 + flagpole.cell_size_v * j,
                flagpole.cell_size_h,
                flagpole.cell_size_v,
            );
        }
    }
    pop();
}
function checkFlagpole() {
    // Considering the linear nature of the game, the flagpole is triggered whenever player is beyond it by x.
    // If to imagine a hypothetical jump where the player somehow jumps beyond the pole in one frame,
    // this function will trigger anyway.
    if (gameChar.x >= finish_position_x) {
        flagpole.isReached = true;
    }
}

function drawFps() {
    push();
    fps = Math.round(frameRate() * 10) / 10;
    if (fps_recent_values.length < 200) fps_recent_values.push(fps);
    else fps_recent_values.shift();
    fps_recent_values.push(fps);
    fill('red');
    text(fps, 400, 99);
    stroke('black');
    beginShape(LINES);
    for (i = 1; i < fps_recent_values.length; i++) {
        vertex(i, fps_recent_values[i]);
    }
    endShape();
    pop();
}
function keyPressed() {
    console.log(frameCount + ' pressed ' + key + ' ' + keyCode);
    if (gameChar.curLives < 1 || flagpole.isReached) {
        if (keyCode == 32 /*Space*/) {
            /*Hard resets the game*/
            startGame((level_start = true));
        }
    } else if (!gameChar.isPlummeting) {
        if (keyCode == 65 /*A*/ || keyCode == LEFT_ARROW)
            gameChar.isLeft = true;
        if (keyCode == 68 /*D*/ || keyCode == RIGHT_ARROW)
            gameChar.isRight = true;
        if (keyCode == 83 /*S*/ || keyCode == DOWN_ARROW) gameChar.goDown();
        if (keyCode == 87 /*W*/ || keyCode == UP_ARROW) gameChar.goUp();
        // Rewrote jumping routine to make it more natural and be able to
        // support platforms and different player dimensions
        if (
            (keyCode == 32 /*Space*/ || keyCode == 88) /*X*/ &&
            !gameChar.isFalling &&
            !gameChar.isJumping
        ) {
            gameChar.isJumping = true;
            gameChar.curJumpingStrength = gameChar.baseJumpingStrength;
        }
    }
    if (keyCode == 77 /*M*/) showDebugData = !showDebugData;
    if (keyCode == 78 /*N*/) shadows_enabled = !shadows_enabled;
}
function keyReleased() {
    console.log(frameCount + ' released ' + key + ' ' + keyCode);
    if (keyCode == 65 /*A*/ || keyCode == LEFT_ARROW) gameChar.isLeft = false;
    if (keyCode == 68 /*D*/ || keyCode == RIGHT_ARROW) gameChar.isRight = false;
}