fishy/js/app.js

Array.prototype.random = function () {
    return this[Math.floor((Math.random()*this.length))];
}

const FishApp = {
    data() {
        return {
            force: 0,
            pull: false,
            pullRate: 2,
            dropRate: 3,
            intervalID: null,
            fishMovementIntervalID: null,
            fishy: null,
            fishies: [
                {
                    name: 'Freddy the fishy',
                    strength: 3,
                    quirkyness: 10,
                    points: 10,
                    position: 0,
                    sprite: './assets/fishTile_074.png'
                }
            ]
        }
    },
    watch: {
        pull() {
            let vue = this;
            window.clearInterval(vue.intervalID);

            if (vue.pull) {
                vue.intervalID = setInterval(function () {
                    if (vue.force < 125) {
                        vue.force = Number(vue.force) + vue.pullRate;
                    }
                }, 50);
            } else {
                vue.intervalID = setInterval(function () {
                    if (vue.force >= 0.0) {
                        vue.force = Number(vue.force) - vue.dropRate;
                    }

                    if (vue.force < 0.7) {
                        vue.force = 0;
                    }
                }, 50);
            }
        }
    },
    methods: {
        pullRod() {
            this.force = Number(this.force) + 0.5;
        },
        deployFish() {
            this.fishy = this.fishies.random();
            this.startFishLifecycle();
        },
        startFishLifecycle() {
            let vue = this;
            this.fishy.position = 0;

            this.fishMovementIntervalID = setInterval(() => {
                let up = Math.floor(Math.random() * 101) <= 55;

                if (up) {
                    if (vue.fishy.position < 250) {
                        vue.fishy.position += vue.fishy.quirkyness;
                    } else {
                        vue.fishy.position -= vue.fishy.quirkyness;
                    }
                } else {
                    if (vue.fishy.position >= vue.fishy.quirkyness) {
                        vue.fishy.position = Number(vue.fishy.position) - vue.fishy.quirkyness;
                    }
                }
            }, 100);
        }
    }
};

Vue.createApp(FishApp).mount('#root');