Unleashing the mobile Rover robot

// https://phaser.io/tutorials/making-your-first-phaser-3-game/part1
// https://phaser.io/tutorials/coding-tips-003
// grass level music: https://www.chosic.com/download-audio/25477/
// boss fight music: https://pixabay.com/music/video-games-cruising-down-8bit-lane-159615/
// heart container: https://xxashuraxx.itch.io/heart
// ouch sound: https://pixabay.com/sound-effects/ouch-sound-effect-30-11844/
// characters: https://pixelfrog-assets.itch.io/pixel-adventure-2
// menu items: https://bdragon1727.itch.io/basic-pixel-gui-and-buttons-pack-2
// bricktexture: https://pucci-games.itch.io/stones-brick-textures
// second level music: https://pixabay.com/sound-effects/game-music-loop-3-144252/
// spaceship: https://craftpix.net/freebies/free-pixel-art-enemy-spaceship-2d-sprites/?num=1&count=23&sq=spaceship&pos=5
// second boss enemy: https://www.kenney.nl/assets/alien-ufo-pack


let game


const gameOptions = {
    characterGravity: 1000, // how heavy the slime is and how fast it falls
    characterSpeed: 300, // speed
    characterHealth: 3,
    characterHit: false,
    playerFlying: false,
    playerScore: 0,
    playerInFight: false,
    playerLevel: 0,


    enemyGravity: 1000,
    enemySpeed: 20,
    enemyHealth: 3,
    enemyHit: false
}


window.onload = function() {
    let gameConfig = {
        type: Phaser.AUTO, // what kind of game
        backgroundColor: "#87CEEB",
        scale: {
            mode: Phaser.Scale.FIT, // scale manager
            autoCenter: Phaser.Scale.CENTER_BOTH,
            width: 640,
            height: 700,
        },
        pixelArt: true,
        physics: {
            default: "arcade",
            arcade: {
                debug: false,
                gravity: {
                    y: 0 // nothing is dropping when y = 0
                }
            }
        },
        audio: {
            disabledWebAudio: true //  reference for audio https://rexrainbow.github.io/phaser3-rex-notes/docs/site/audio/
        },
        scene: [GameMenu, PlayGame, GameMusic, SecondLevel]
    }
    window.focus()
    game = new Phaser.Game(gameConfig)
}




class GameMenu extends Phaser.Scene {
    constructor() {
        super({key: 'gamemenu'})
    }


    init(info) {
        // to check if dead-variable is defined in the data (=info) passed to the scene
        this.dead = info.dead || false // defaults to false if not provided
    }


    preload() {
        this.load.spritesheet('menuBtns', 'assets/menu/Metal_Buttons_Text_small.png', {frameWidth: 64, frameHeight: 32})
        this.load.image("clouds", "assets/background/clouds.png")
       
    }


    create() {
        for (let i = 0; i < 8; i++) {
            this.add.tileSprite(330,  game.config.height/2, 640, game.config.height, 'clouds') // syntax: tileSprite(x, y, width, height, textureKey, frame)
        }
        let fadeRect = this.add.rectangle(0, 0, this.game.config.width, this.game.config.height, 0x000000, 0.4)
        fadeRect.setOrigin(0, 0)
       
        console.log(this.dead)
        if (!this.dead) {
           
            this.anims.create({
                key: 'startBtn',
                frames: this.anims.generateFrameNumbers('menuBtns', {start: 0, end: 2}),
                frameRate: 5,
                repeat: -1
            })


            var infoText = { // reference: https://www.html5gamedevs.com/topic/40401-text-styling/
                x: this.game.config.width / 4.5,
                y: 50,
                text: 'Game Project for Introduction to Web Programming',
                style: {
                    fontSize: '14px',
                    color: '#ffffff',
                    align: 'center'
                }
            }
            this.make.text(infoText)
   
            var GameName = { // reference: https://www.html5gamedevs.com/topic/40401-text-styling/
                x: this.game.config.width / 5,
                y: 180,
                text: 'Froggy Jump',
                style: {
                    fontSize: '64px',
                    fontFamily: 'Potta One',
                    color: '#32CD32',
                    align: 'center',
                    fontWeight: 'bold'
                }
            }
            this.make.text(GameName)
   
            let startGame = this.add.sprite(this.game.config.width / 2, this.game.config.height / 2, 'startBtn').setScale(2)
            startGame.play('startBtn')
            startGame.setInteractive()
            startGame.on('pointerdown', () => {
                this.scene.start('playgame')
            })
   
        } else {


            var menu = { // reference: https://www.html5gamedevs.com/topic/40401-text-styling/
                x: this.game.config.width / 4.5,
                y: 180,
                text: 'Froggy died! Play again?',
                style: {
                    fontSize: '32px',
                    fontFamily: 'Potta One',
                    color: '#00000',
                    align: 'center',
                    fontWeight: 'bold'
                }
            }
            this.make.text(menu)


            this.anims.create({
                key: 'yesBtn',
                frames: this.anims.generateFrameNumbers('menuBtns', {start: 8, end: 9}),
                frameRate: 5,
                repeat: -1
            })
            this.anims.create({
                key: 'noBtn',
                frames: this.anims.generateFrameNumbers('menuBtns', {start: 3, end: 4}),
                frameRate: 5,
                repeat: -1
            })
           
            let yes = this.add.sprite(this.game.config.width / 1.5, this.game.config.height / 2, 'yesBtn').setScale(2)
            yes.play('yesBtn')
            yes.setInteractive()
            yes.on('pointerdown', () => {
                this.scene.start('playgame')
            })


            let no = this.add.sprite(this.game.config.width / 2.5, this.game.config.height / 2, 'noBtn').setScale(2)
            no.play('noBtn')
            no.setInteractive()
            no.on('pointerdown', () => {
                this.dead = false
                this.scene.restart({dead: this.dead})
            })
        }
    }
       


       
}


class GameMusic extends Phaser.Scene { // multiple scenes reference: https://labs.phaser.io/edit.html?src=src/scenes/multiple%20scenes%20from%20classes.js


    constructor() {
        super({key: 'gamemusic', active: true}) // music is set to be always active
    }


    preload() { // loading the assets
        // audios and related images
        this.load.audio('GrassLevelMusic', "assets/audio/firstLevelMusic.mp3")
        this.load.audio('NextLevelMusic', "assets/audio/secondLevel.mp3")
        this.load.audio('firstBossMusic', 'assets/audio/firstBossfightMusic.mp3')
        this.load.image('volumeOn', "assets/audio/volume_on.png")
        this.load.image('volumeOff', "assets/audio/volume_off.png")


    }


    create() {
        this.firstmusic = this.sound.add('GrassLevelMusic')
        this.secondMusic = this.sound.add('NextLevelMusic')
        this.bossMusic = this.sound.add('firstBossMusic')




        this.bossMusic.setLoop(true)
        this.firstmusic.setLoop(true)
        this.secondMusic.setLoop(true)


        this.firstmusic.play()
        this.firstmusic.setVolume(0.2)


        this.volume = this.add.image(game.config.width/15, game.config.height/25, 'volumeOn').setScale(0.1)
        this.volume.setInteractive()
        this.input.on('gameobjectup', this.volumeHandler, this)


        // EventEmitter reference: https://photonstorm.github.io/phaser3-docs/Phaser.Events.EventEmitter.html
        this.events.on('playBossFightMusic', this.playBossFightMusic, this)
        this.events.on('stopBossFightMusic', this.stopBossFightMusic, this)
        this.events.on('resetMusic', this.resetMusicOnPlayerDeath, this)
        this.events.on('nextLevel', this.nextLevelMusic, this)
    }


    playBossFightMusic() {
        if (this.firstmusic.isPlaying) {
            this.tweens.add({ // refernce for fading out/in music: https://phaser.discourse.group/t/solved-fade-out-sound/3289
                targets: this.firstmusic,
                volume: 0,
                duration: 500
            })
            this.firstmusic.stop()


            this.bossMusic.play()
            this.bossMusic.setVolume(0)


            this.tweens.add({
                targets: this.bossMusic,
                volume: 0.2,
                duration: 1000
            })
        } else if (this.secondMusic.isPlaying) {
            this.tweens.add({ // refernce for fading out/in music: https://phaser.discourse.group/t/solved-fade-out-sound/3289
                targets: this.secondMusic,
                volume: 0,
                duration: 500
            })
            this.secondMusic.stop()


            this.bossMusic.play()
            this.bossMusic.setVolume(0)


            this.tweens.add({
                targets: this.bossMusic,
                volume: 0.2,
                duration: 1000
            })
        } else {
            this.bossMusic.play()
            this.bossMusic.setVolume(0)
        }
    }


    stopBossFightMusic() {
        if (this.bossMusic.isPlaying) {
            this.tweens.add({
                targets: this.bossMusic,
                volume: 0,
                duration: 500
            })
            this.bossMusic.stop()
        } else {
            return
        }
    }


    resetMusicOnPlayerDeath() {
        if (this.firstmusic.isPlaying) {
            this.firstmusic.stop()
            this.firstmusic.play()
            this.firstmusic.setVolume(0.2)
        } else if (this.secondMusic.isPlaying) {
            this.secondMusic.stop()
            this.firstmusic.play()
            this.firstmusic.setVolume(0.2)          
        } else if (this.bossMusic.isPlaying) {
            this.tweens.add({ // refernce for fading out/in music: https://phaser.discourse.group/t/solved-fade-out-sound/3289
                targets: this.bossMusic,
                volume: 0,
                duration: 500
            })
            this.bossMusic.stop()
            this.firstmusic.play()
            this.firstmusic.setVolume(0.2)
        }
    }


    nextLevelMusic() {
        this.tweens.add({ // refernce for fading out/in music: https://phaser.discourse.group/t/solved-fade-out-sound/3289
            targets: this.bossMusic,
            volume: 0,
            duration: 500
        })
        this.bossMusic.stop()
        this.secondMusic.play()
        this.secondMusic.setVolume(0.2)
    }


    volumeHandler () {
        if (this.firstmusic.isPlaying) {
            this.firstmusic.pause()
            this.volume.setTexture('volumeOff').setScale(0.1)
            return
        } else if (!this.firstmusic.isPlaying) {
            this.firstmusic.resume()
            this.volume.setTexture('volumeOn')
            return
        }


        if (this.secondMusic.isPlaying) {
            this.secondMusic.pause()
            this.volume.setTexture('volumeOff').setScale(0.1)
            return
        } else if (!this.secondMusic.isPlaying) {
            this.secondMusic.resume()
            this.volume.setTexture('volumeOn')
            return
        }


        if (this.bossMusic.isPlaying) {
            this.bossMusic.pause()
            this.volume.setTexture('volumeOff').setScale(0.1)
            return
        } else {
            this.bossMusic.resume()
            this.volume.setTexture('volumeOn')
            return
        }
    }
}


class SecondLevel extends Phaser.Scene {
    constructor () {
        super({key: 'secondlevel'});
    }


    preload() {
        // background stuff
        this.load.image("citybg", "assets/background/citybg.jpg")
        this.load.image("brickbg", "assets/background/Brickwall.png")


        // platforms to stand on
        this.load.image("cityPlatform", "assets/platform/Pads/cityPlatform.png")
        this.load.image('cityTerrain', "assets/Free/Terrain/CityTerrain(16x16).png", {frameWidth: 16, frameHeight: 16})
        this.load.image('citySkyTerrain', "assets/Free/Terrain/CitySkyTerrain(16x16).png", {frameWidth: 16, frameHeight: 16})


        // enemies
        this.load.image('spaceShipRight', 'assets/enemies/Ship1/Ship1Right.png')
        this.load.image('spaceShipLeft', 'assets/enemies/Ship1/Ship1Left.png')
        this.load.spritesheet('bossEnemyRight', 'assets/enemies/NightBorneRight.png', {frameWidth: 80, frameHeight: 80})
        this.load.spritesheet('bossEnemyLeft', 'assets/enemies/NightBorneLeft.png', {frameWidth: 80, frameHeight: 80})


    }


    create() {
        this.physics.world.setBounds(0, 0, 640, 4000) // world height is 4000 pixls
        this.worldBounds = this.physics.world.bounds
        this.cursors = this.input.keyboard.createCursorKeys() // initializing the keyboard
        this.input.keyboard.manager.enabled = true


        this.add.image(game.config.width/2, this.worldBounds.height-320, 'citybg').setScale(0.35)
        this.cameras.main.setBackgroundColor('#010e14') // bg color




        this.rock = this.add.tileSprite(0, this.worldBounds.height+200, game.config.width*8, 1200, 'brickbg').setScale(0.3)


        this.battleGround = this.add.tileSprite(320, 400, game.config.width, 48, 'citySkyTerrain')
        this.physics.world.enable(this.battleGround)
        this.battleGround.body.setImmovable(true)
        this.battleGround.body.allowGravity = false
        this.battleGround.body.checkCollision.down = false


        // syntax: tileSprite(x, y, width, height, textureKey, frame)
        this.cityGround = this.add.tileSprite(320, this.worldBounds.height, this.worldBounds.height, 48, 'cityTerrain') // the bottom ground
        this.physics.world.enable(this.cityGround)
        this.cityGround.body.setImmovable(true)
        this.cityGround.body.checkCollision.down = false


        this.cityPlatforms = this.physics.add.group({
            immovable: true, // the platforms won't move if the player touches them
            allowGravity: false // normal platforms won't fall down
        })


        let x = 0, y = this.worldBounds.height-200 // y is the starting point for the first platform
        while (y > 500) { // create(x-cordinate, y-cordinate, item) when going up until y coordinate(?) meets its limit
            x = Phaser.Math.Between(0,game.config.width)


            let platform = this.cityPlatforms.create(x, y, "cityPlatform").setScale(0.1)
            platform.body.velocity.x = Phaser.Math.Between(70,200) // random speed for platforms
            platform.refreshBody().body.checkCollision.down = false // ability to jump through platforms but stand on them, reference: https://cedarcantab.wixsite.com/website-1/post/one-way-pass-through-platforms-in-phaser-3-sprites
            platform.setFrictionX(1) // making the player ride with the platform, reference: https://labs.phaser.io/edit.html?src=src/physics/arcade/friction.js&v=3.60.0


       
            y = y - 100 - 50 * Math.random(); // the platforms will be 100 to 150 pixels apart
        }


        this.spaceShips = this.physics.add.group({
            immovable: true, // the birds won't move if the player touches them
            allowGravity: false // birds won't fall down
        })


        let x_ss = 0, y_ss = this.worldBounds.height-500 // y is the starting point for the first bird
        while (y_ss > 500) { // create(x-cordinate, y-cordinate, item) when going up until y coordinate(?) meets its limit
            x_ss = Phaser.Math.Between(0,game.config.width)


            let spaceship =  this.spaceShips.create(x_ss, y_ss, 'spaceShipRight').setScale(0.9)
            spaceship.setTexture('spaceShipRight', 0)
            spaceship.body.velocity.x = 200 // speed for birds


            y_ss = y_ss - 200 - 100 * Math.random(); // the birds will be 70 to 120 pixels apart
            //bird.play("birdFlyRight")
            spaceship.setCollideWorldBounds(true);
        }


        this.coins = this.physics.add.group({
        })




       


        //creating animations for the sprites
        // enemy anims
        this.anims.create({
            key: 'enemyIdleRight',
            frames: this.anims.generateFrameNumbers("bossEnemyRight", {start: 0, end: 8}),
            frameRate: 10,
            repeat: -1
        })
        this.anims.create({
            key: 'enemyRunRight',
            frames: this.anims.generateFrameNumbers('bossEnemyRight', {start: 23, end: 28}),
            frameRate: 15,
            repeat: -1
        })
        this.anims.create({
            key: 'enemyAttackRight',
            frames: this.anims.generateFrameNumbers('bossEnemyRight', {start: 46, end: 57}),
            frameRate: 15,
            repeat: -1
        })
        this.anims.create({
            key: 'enemyHit',
            frames: this.anims.generateFrameNumbers('bossEnemyRight', {start: 69, end: 73}),
            frameRate: 10,
            repeat: -1
        })
        this.anims.create({
            key: 'enemyDeadRight',
            frames: this.anims.generateFrameNumbers('bossEnemyRight', {start: 91, end: 114}),
            frameRate: 10
        })
        // left side for enemy
        this.anims.create({
            key: 'enemyIdleLeft',
            frames: this.anims.generateFrameNumbers("bossEnemyLeft", {start: 14, end: 22}),
            frameRate: 10,
            repeat: -1
        })
        this.anims.create({
            key: 'enemyRunLeft',
            frames: this.anims.generateFrameNumbers('bossEnemyLeft', {start: 40, end: 45}),
            frameRate: 15,
            repeat: -1
        })
        this.anims.create({
            key: 'enemyAttackLeft',
            frames: this.anims.generateFrameNumbers('bossEnemyLeft', {start: 57, end: 68}),
            frameRate: 15,
            repeat: -1
        })


        // adding the characters to the world
        this.frog = this.physics.add.sprite(game.config.width / 2, this.worldBounds.height - 100, 'frog_idle').setScale(1.5) // this.worldBounds.height-100
        this.frog.anims.play('frog_idle')
        this.frog.body.gravity.y = gameOptions.characterGravity
        this.frog.body.bounce.y = 0.2
        this.frog.setCollideWorldBounds(true) // player cannot go over the worldbounds


        // main character properties
        this.frog.health = gameOptions.characterHealth // character health
        this.frog.isHit = gameOptions.characterHit // flag to check if player is hit
        this.frog.score = gameOptions.playerScore // score is for coins player collects
        this.frog.isFlying = gameOptions.playerFlying // flag to check if player is flying, needed in the update()
        this.frog.inFight = gameOptions.playerInFight // flag to check if player is in fight, also needed in update()
        this.frog.level = 2 // flag to check which level player is on. Used for e.g., music and enemy animations


        this.enemy = this.physics.add.sprite(game.config.width / 1.2, this.worldBounds.height - 3800, 'enemyIdleRight').setScale(3) // this.worldBounds.height-100
        this.enemy.anims.play('enemyIdleLeft')
        this.enemy.body.setOffset(20,35)
        this.enemy.body.gravity.y = gameOptions.enemyGravity
        this.enemy.setCollideWorldBounds(true) // player cannot go over the worldbounds


        // enemy characteristics
        this.enemy.health = gameOptions.enemyHealth
        this.enemyisHit = gameOptions.enemyHit
        this.enemy.attacking = false


        this.coins = this.physics.add.group({
        })


        this.coinCount = 0
        let x_c = 0, y_c = this.worldBounds.height-150
        while (y_c > 450) { // create(x-cordinate, y-cordinate, item) when going up until y coordinate(?) meets its limit
            x_c = Phaser.Math.Between(0,game.config.width)


            let coin = this.coins.create(x_c, y_c, 'coin')
            coin.play("coinAnim")
            coin.setCollideWorldBounds(true)
       
            y_c = y_c - 140 - 50 * Math.random()
            this.physics.add.overlap(this.frog, coin, collectCoin, null, this)
            this.coinCount++
            if (this.coinCount == 20) {
                break
            }
        }


        this.collectHearts = this.physics.add.group({
        })
        let x_h = 0, y_h = this.worldBounds.height-1000
        while (y_h > 100) { // create(x-cordinate, y-cordinate, item) when going up until y coordinate(?) meets its limit
            x_h = Phaser.Math.Between(0,game.config.width)


            let heart = this.collectHearts.create(x_h, y_h, 'heart').setScale(2)
            heart.setOffset(-8,-8) // setting heart in the middle of the hitting box
            heart.play("heart")
            heart.setCollideWorldBounds(true)
       
            y_h = y_h - 300 - 200 * Math.random()
        }


        let x_fb = 0, y_fb = this.worldBounds.height-1000
        while (y_fb > 600) { // create(x-cordinate, y-cordinate, item) when going up until y coordinate(?) meets its limit
            x_fb = Phaser.Math.Between(0,game.config.width)


            let bonus = this.coins.create(x_fb, y_fb, 'flightBonus').setScale(0.3) // adding coins on platforms
            bonus.setCollideWorldBounds(true)
       
            y_fb = y_fb - 800 - 500 * Math.random()
            this.physics.add.overlap(this.frog, bonus, flightBonusAction, null, this)
        }


        // colliders / overlaps
        this.physics.add.collider(this.frog, this.cityGround)
        this.physics.add.collider(this.frog, this.cityPlatforms)
        this.physics.add.overlap(this.frog, this.spaceShips, playerHit, null, this)
        this.physics.add.overlap(this.frog, this.collectHearts, collectHeart, null, this)
       
        this.physics.add.collider(this.frog, this.enemy)
        this.physics.add.collider(this.frog, this.battleGround)
        this.physics.add.collider(this.enemy, this.battleGround)


        this.cameras.main.startFollow(this.frog, false, 0.09, 0.09) // reference: https://photonstorm.github.io/phaser3-docs/Phaser.Cameras.Scene2D.Camera.html
        this.cameras.main.setDeadzone(game.config.width, game.config.height/2) // cameras start following the frog after it has passed the first half of the start screen




        // UI texts like amount of coins and score and health
        this.heart1 = this.add.image(game.config.width/1.05, game.config.height/25, 'hearts').setScale(1).setVisible(true).setScrollFactor(0)
        this.heart2 = this.add.image(game.config.width/1.1, game.config.height/25, 'hearts').setScale(1).setVisible(true).setScrollFactor(0)
        this.heart3 = this.add.image(game.config.width/1.15, game.config.height/25, 'hearts').setScale(1).setVisible(true).setScrollFactor(0)
        this.frog.hearts = [this.heart1, this.heart2, this.heart3]


        this.scoreText = this.add.text(game.config.width/1.23, game.config.height/12, "0" + "/" + this.coinCount, {fontSize: "30px", fill: "#000000"}).setVisible(true).setScrollFactor(0).setColor('white')


        this.coinImage = this.add.sprite(game.config.width/1.05, game.config.height/10, 'coin').setScrollFactor(0).setScale(2)
        this.coinImage.play("coinAnim")
    }


    update() {
        this.cityPlatforms.children.iterate(function(platform) { // moving the platforms
            if (platform.body.velocity.x == 0) {
                platform.setVelocityX(Phaser.Math.Between(70,200)) // if the platform is not moving, added this check because if character got in between the border and platform the platform stopped moving
            }


            if (platform.body.velocity.x < 0 && platform.x <= 40) { // if platform is moving to th§e left and the x location of it is less or same as 0
                platform.setVelocityX(Phaser.Math.Between(70,200)) // change direction to right
            } else if (platform.body.velocity.x > 0 && platform.x >= game.config.width-40) {
                platform.setVelocityX(-Phaser.Math.Between(70,200)); // change direction to left
            }


        }, this)


       
        this.spaceShips.children.iterate(function(spaceShip) { // moving the spaceship and checking collisions between current spaceship and player
            if (spaceShip.body.velocity.x == 0) {
                if (spaceShip.texture.key === "spaceShipRight") {
                    spaceShip.body.velocity.x = -200
                    spaceShip.setTexture("spaceShipLeft")
                } else {
                    spaceShip.body.velocity.x = 200 // change direction to right
                    spaceShip.setTexture("spaceShipRight")
                }
               
            }
            // movements of spaceships
            if (spaceShip.body.velocity.x < 0 && spaceShip.x <= 0) {
                spaceShip.body.velocity.x = 200 // change direction to right
                spaceShip.setTexture("spaceShipRight")
            } else if (spaceShip.body.velocity.x > 0 && spaceShip.x >= this.worldBounds.width) {
                spaceShip.body.velocity.x = -200; // change direction to left
                spaceShip.setTexture("spaceShipLeft")
            }
        }, this)


        if (!this.frog.isHit && this.frog.health > 0) {
           
            if (this.cursors.up.isDown && this.frog.body.touching.down) {
                this.frog.body.velocity.y = -gameOptions.characterGravity / 1.4
                this.frog.anims.play("frog_jump", true)
                const jump = this.sound.add('jump')
                jump.play()
            }


            if (this.frog.body.velocity.y < 0 && !this.frog.body.touching.down) {
                this.frog.anims.play("frog_jump", true)
            } else if (this.frog.body.velocity.y > 0 && !this.frog.body.touching.down) {
                this.frog.setTexture('fall', 0)
            }
   
            if (this.cursors.right.isDown) {
                this.frog.body.velocity.x = gameOptions.characterSpeed
                this.frog.anims.play('frog_run_right', true)
            } else if (this.cursors.left.isDown) {
                this.frog.body.velocity.x = -gameOptions.characterSpeed
                this.frog.anims.play('frog_run_left', true)
            } else {
                this.frog.body.velocity.x = 0
                this.frog.anims.play("frog_idle", true)
            }


            if (this.frog.inFight) {
                if (!this.enemy.isHit) {
                    if (Phaser.Math.Distance.BetweenPoints(this.frog, this.enemy) > 120) {
                        this.enemy.attacking = false
                        bossFightLogic2(this, this.frog, this.enemy)
                    }




                    if (this.enemy.anims.getName() !== 'enemyRunLeft' && this.frog.x < this.enemy.x) {
                        //console.log("tuleeko tänne", this.enemy.body.velocity.x)
                        this.enemy.anims.play('enemyRunLeft')
                    } else if (this.enemy.anims.getName() !== 'enemyRunRight' && this.frog.x > this.enemy.x) {
                        this.enemy.anims.play('enemyRunRight')
                    }
                   
               
                    if (Phaser.Math.Distance.BetweenPoints(this.frog, this.enemy) <= 120 && this.frog.y > this.enemy.y) {


                        this.enemy.attacking = true
                        this.enemy.body.velocity.x = 0
                        this.enemy.body.velocity.y = 0


                        if (this.frog.x > this.enemy.x && this.enemy.anims.getName() !== 'enemyAttackRight') {
                            this.enemy.anims.play('enemyAttackRight')
                        } else if (this.frog.x < this.enemy.x && this.enemy.anims.getName() !== 'enemyAttackLeft') {
                            this.enemy.anims.play('enemyAttackLeft')
                        }
                    }


                    if (this.enemy.body.touching.up && this.physics.collide(this.frog, this.enemy)) { // if player jumps on top of enemy it will get hit
                        this.enemy.body.velocity.x = 0
                        this.enemy.anims.stop()
                        enemyHit(this.enemy, this.frog, this)
                    } else if (this.enemy.attacking && !this.enemy.body.touching.up) {
                        playerHit.call(this, this.frog, this.enemy)  
                    }
                } // if enemy is hit
               
            } // if player in fight


            if (this.frog.body.y <= 330 && this.frog.body.touching.down && !this.frog.inFight) {
                startBossFight(this.frog, this.enemy, this)
            }
        }// if frog is hit
    }
}














class PlayGame extends Phaser.Scene { // ensimmäisen tason pelin toiminnallisuuksia
   
    constructor () {
        super({key: 'playgame'});
    }
   
    preload() { // loading the assets


        // platforms and grounds on which the characters can stand on and interact with
        this.load.image('tileSet', "assets/Free/Terrain/GrassTerrain(16x16).png", {frameWidth: 16, frameHeight: 16})
        this.load.image("grassPlatform", "assets/platform/Pads/Pad_04_1.png")
        this.load.image("cloudPlatform", "assets/platform/cloudPlatform.png")
        // background assets
        this.load.image("clouds", "assets/background/clouds.png")
        this.load.image("rock", "assets/background/rocktile.png")


        // frog asset
        this.load.spritesheet('idle', 'assets/Free/Characters/Frog/Idle(32x32).png', {frameWidth: 32, frameHeight: 32})
        this.load.spritesheet('runRight', 'assets/Free/Characters/Frog/Run(32x32).png', {frameWidth: 32, frameHeight: 32})
        this.load.spritesheet('runLeft', 'assets/Free/Characters/Frog/Run(32x32)_left.png', {frameWidth: 32, frameHeight: 32})
        this.load.spritesheet('jump', 'assets/Free/Characters/Frog/jump1.png', {frameWidth: 32, frameHeight: 32})
        this.load.spritesheet('hit', 'assets/Free/Characters/Frog/Hit(32x32).png', {frameWidth: 32, frameHeight: 32})
        this.load.spritesheet('fall', 'assets/Free/Characters/Frog/fall2.png', {frameWidth: 32, frameHeight: 32})


        // enemies
        this.load.spritesheet('plant_idle', "assets/enemies/Plant/Idle(44x42).png", {frameWidth: 44, frameHeight: 42})
        this.load.image('plant_bullet', 'assets/enemies/Plant/Bullet.png')
        this.load.spritesheet('plant_hit', 'assets/enemies/Plant/Hit(44x42).png', {frameWidth: 44, frameHeight: 42})
        this.load.spritesheet('plant_attack', 'assets/enemies/Plant/Attack(44x42).png', {frameWidth: 44, frameHeight: 42})
        this.load.spritesheet('plant_attack_right', 'assets/enemies/Plant/AttackRight(44x42).png', {frameWidth: 44, frameHeight: 42})


        this.load.spritesheet('bird', 'assets/enemies/birdSprite2.png', {frameWidth: 16, frameHeight: 16})


        // hearts for player and enemy
        this.load.image('hearts', 'assets/free/Characters/Heart/heart3.png', {frameWidth: 16, frameHeight: 16})
        this.load.spritesheet('collectHearts', 'assets/free/Characters/Heart/collectHeart.png', {frameWidth: 17, frameHeight: 17})
        this.load.image('enemyHearts', 'assets/free/Characters/Heart/enemy_heart.png', {frameWidth: 16, frameHeight: 16})


        // bonus items
        this.load.spritesheet('coin', 'assets/platform/Bonus_items/coin16x16.png', {frameWidth: 16, frameHeight: 16})
        this.load.image('flightBonus', 'assets/platform/Bonus_items/Flight_Bonus_01.png')


        // audios for functions
        this.load.audio('jump', "assets/audio/jump.mp3")
        this.load.audio('ouch', "assets/audio/ouch.mp3")
        this.load.audio('death', "assets/audio/gameOver.mp3")
        this.load.audio('coin', "assets/audio/collectcoin.mp3")
        this.load.audio('flightBonus', "assets/audio/flightBonus.mp3")
    }




    create() { // creating everything we will use in the game (animations, keyboard etc
        this.physics.world.setBounds(0, 0, 640, 4000) // world height is 4000 pixls
        this.worldBounds = this.physics.world.bounds
        this.cursors = this.input.keyboard.createCursorKeys() // initializing the keyboard
        game.input.keyboard.manager.enabled = true
       
        for (let i = 0; i < 8; i++) {
            this.add.tileSprite(330,  this.worldBounds.height/2, 640, this.worldBounds.height+1000, 'clouds') // syntax: tileSprite(x, y, width, height, textureKey, frame) (800,600)
        }
        this.rock = this.add.tileSprite(320, this.worldBounds.height+200, game.config.width*2, 400, 'rock')


        this.battleGround = this.add.tileSprite(320, 400, game.config.width, 49, 'cloudPlatform')
        this.physics.world.enable(this.battleGround)
        this.battleGround.body.setImmovable(true)
        this.battleGround.body.allowGravity = false
        this.battleGround.body.checkCollision.down = false


        this.ground = this.add.tileSprite(320, this.worldBounds.height, game.config.width, 49, 'tileSet') // the bottom ground
        this.physics.world.enable(this.ground)
        this.ground.body.setImmovable(true)
        this.ground.body.allowGravity = false




        this.basicPlatforms = this.physics.add.group({
            immovable: true, // the platforms won't move if the player touches them
            allowGravity: false // normal platforms won't fall down
        })


   
        // 1st boss enemy
        this.anims.create({
            key: 'plantIdle',
            frames: this.anims.generateFrameNumbers('plant_idle', {start: 0, end: 10}),
            frameRate: 20,
            repeat: -1
        })
        this.anims.create({
            key: 'plantHit',
            frames: this.anims.generateFrameNumbers('plant_hit', {start: 0, end: 4}),
            frameRate: 15,
            repeat: -1
        })
        this.anims.create({
            key: 'plantAttackLeft',
            frames: this.anims.generateFrameNumbers('plant_attack', {start: 0, end: 7}),
            frameRate: 10,
            repeat: -1
        })
        this.anims.create({
            key: 'plantAttackRight',
            frames: this.anims.generateFrameNumbers('plant_attack_right', {start: 0, end: 7}),
            frameRate: 15,
            repeat: -1
        })


        // frog
        this.anims.create({
            key: 'frog_idle',
            frames: this.anims.generateFrameNumbers("idle", {start: 0, end: 7}),
            frameRate: 20,
            repeat: -1
        })
        this.anims.create({
            key: 'frog_run_left',
            frames: this.anims.generateFrameNumbers('runLeft', {start: 0, end: 11}),
            repeat: -1
        });
        this.anims.create({
            key: 'frog_run_right',
            frames: this.anims.generateFrameNumbers('runRight', {start: 0, end: 11}),
            repeat: -1
        })
        this.anims.create({
            key: 'frog_jump',
            frames: this.anims.generateFrameNumbers('jump', {start: 0, end: 1}),
            repeat: -1
        })
        this.anims.create({
            key: 'frog_hit',
            frames: this.anims.generateFrameNumbers('hit', {start: 0, end: 6}),
            frameRate: 10
        })


        // bird anims
        this.anims.create({
            key: 'birdFlyLeft',
            frames: this.anims.generateFrameNumbers('bird', {start: 26, end: 33}),
            frameRate: 10,
            repeat: -1
        })
        this.anims.create({
            key: 'birdFlyRight',
            frames: this.anims.generateFrameNumbers('bird', {start: 9, end: 15}),
            frameRate: 10,
            repeat: -1
        })


        // item animations
        this.anims.create({
            key: 'coinAnim',
            frames: this.anims.generateFrameNumbers('coin', {start: 0, end: 14}),
            frameRate: 10,
            repeat: -1
        })
        this.anims.create({
            key: 'heart',
            frames: this.anims.generateFrameNumbers('collectHearts', {start: 0, end: 3}),
            frameRate: 10,
            repeat: -1
        })
       


        // reference for getting the platforms be quite evenly but a bit randomly apart from each other: https://stackoverflow.com/questions/26648207/placing-platforms-randomly-in-world-with-phaser
        let x = 0, y = this.worldBounds.height-200 // y is the starting point for the first platform
        while (y > 500) { // create(x-cordinate, y-cordinate, item) when going up until y coordinate(?) meets its limit
            x = Phaser.Math.Between(0,game.config.width)


            let platform = this.basicPlatforms.create(x, y, "grassPlatform").setScale(0.2)
            platform.body.velocity.x = Phaser.Math.Between(70,200) // random speed for platforms
            platform.refreshBody().body.checkCollision.down = false // ability to jump through platforms but stand on them, reference: https://cedarcantab.wixsite.com/website-1/post/one-way-pass-through-platforms-in-phaser-3-sprites
            platform.setFrictionX(1) // making the player ride with the platform, reference: https://labs.phaser.io/edit.html?src=src/physics/arcade/friction.js&v=3.60.0


       
            y = y - 100 - 50 * Math.random(); // the platforms will be 100 to 150 pixels apart
        }


       
        // adding the characters to the world
        this.frog = this.physics.add.sprite(game.config.width / 2, this.worldBounds.height-100, 'frog_idle').setScale(1.5) // this.worldBounds.height-100
        this.frog.anims.play('frog_idle')
        this.frog.body.gravity.y = gameOptions.characterGravity
        this.frog.body.bounce.y = 0.2


        // main character characteristics
        this.frog.health = gameOptions.characterHealth
        this.frog.isHit = gameOptions.characterHit
        this.frog.score = gameOptions.playerScore
        this.frog.isFlying = gameOptions.playerFlying
        this.frog.inFight = gameOptions.playerInFight
        this.frog.level = 1




        // adding birds that fly in the game and gamer has to avoid them
        this.birds = this.physics.add.group({
...

This file has been truncated, please download it to see its full contents.