​

let boatImages = {

    left: null,

    right: null

};

let boatIsGoingLeft = true

let boatLocation = {

    x: 100,

    y: 100

}

let boatScale = 0.5

const boatMinScale = 0.1, boatMaxScale = 0.8

​

const mountainImages = []

const mountains = []

​

function preload() {

    boatImages.right = loadImage("boat-right.png")

    boatImages.left = loadImage("boat-left.png")

​

    // Load the mountain image into an array

    mountainImages.push(loadImage("mountain1.png"))

    mountainImages.push(loadImage("mountain2.png"))

    mountainImages.push(loadImage("mountain3.png"))

}

​

function setup() {

    // Make a canvas

    createCanvas(canvasWidth, canvasHeight);

    background("#E3CEC1")

​

    // Center the boat on the canvas

    boatLocation.y = (canvasHeight / 2) - (boatImages.left.height * boatScale / 2)

    boatScale = map(boatLocation.y, 0, canvasHeight, boatMinScale, boatMaxScale)

    boatLocation.x = (canvasWidth / 2) - (boatImages.left.width * boatScale / 2)

​

​

    // Create three mountains

    mountains.push(new Mountain(100, 50, mountainImages[0], 0.5))

    mountains.push(new Mountain(400, 30, mountainImages[1], 0.5))

    mountains.push(new Mountain(800, 70, mountainImages[2], 0.5))

}

​

function draw() {

    // Clear the screen every frame

    background("#E3CEC1")

​

    // Draw all the mountains

    for (const mountain of mountains) {

        // only draw the mountain when it is on the screen

        if (mountain.x > 0 - mountain.image.width && mountain.x < canvasWidth) {

            image(mountain.image, mountain.x, mountain.y, mountain.image.width * mountain.scale, mountain.image.height * mountain.scale)

        }

    }

​

    // Draw the boat on the canvas based on the direction that it is moving

    if (boatIsGoingLeft) {

        image(boatImages.left, boatLocation.x, boatLocation.y, boatImages.left.width * boatScale, boatImages.left.height * boatScale)

    } else {

        image(boatImages.right, boatLocation.x, boatLocation.y, boatImages.left.width * boatScale, boatImages.left.height * boatScale)

    }

​

​

    // Control the boat by changing the direction

    if (keyIsDown(LEFT_ARROW)) {

        boatIsGoingLeft = true

​

        // sliding the mountains to the right

        for (const mountain of mountains) {

            mountain.x += 2;

        }

​

    }

    if (keyIsDown(RIGHT_ARROW)) {

        boatIsGoingLeft = false

​

        // sliding the mountains to the left

        for (const mountain of mountains) {

            mountain.x -= 2;

        }

    }

    // Control the boat by changing the scale and height of the boat

    if (keyIsDown(UP_ARROW)) {

        boatLocation.y -= 2

        // Prevent from going of the canvas

        if (boatLocation.y < 0) {

            boatLocation.y = 0

        }

        boatScale = map(boatLocation.y, 0, canvasHeight, boatMinScale, boatMaxScale)

​

        // recenter the boat

        boatLocation.x = (canvasWidth / 2) - (boatImages.left.width * boatScale / 2)

    }

    if (keyIsDown(DOWN_ARROW)) {

        boatLocation.y += 2

        // Prevent from going of the canvas

        if (boatLocation.y > canvasHeight - boatImages.left.height * boatMaxScale) {

            boatLocation.y = canvasHeight - boatImages.left.height * boatMaxScale

        }

        boatScale = map(boatLocation.y, 0, canvasHeight, boatMinScale, boatMaxScale)

​

        // recenter the boat

        boatLocation.x = (canvasWidth / 2) - (boatImages.left.width * boatScale / 2)

    }

}

​

​

class Mountain {

​

    // Creates a Mountain object with a x and y location and the image and scale

    constructor(x, y, image, scale) {

        this.x = x;

        this.y = y;

        this.image = image;

        this.scale = scale;

    }

​

}

​

​