Skibidi Titan

[TravisCallow]

Added a feature in the game which is the Skibidi Titan which follows the player around. It stops every 4 seconds to shoot a beam down at the user which if the user touches, they will die. This feature was complicated to add due to it's complex features and using several files.

The skibidi titan file is SkibidiTitan.js In this file, there is a variable which is called debounce which is used to power the titan. I do not think this is the most efficient way to do this however but I am unfamiliar with dealing with things like this in js. The main code which powers the Titan is the following which is in the update() loop:

   update() {
        super.update();
        var laser = document.getElementById("Laser")
        if(debounce < 240 && debounce > -1){   //Track player
            laser.style.left = `-200px`;
            this.x = GameEnv.PlayerPosition.playerX - 200;
            debounce += 1;
        }
        if(debounce < -120){   //Freeze titan
            debounce += 1;
            if(debounce == -235){GameEnv.playSound("laserCharge");}
            this.canvas.style.filter = `invert(${debounce+240}%)`
        }else if(debounce < 0 && debounce >= -120){   //Fire laser
            debounce += 1;
            this.canvas.style.filter = `invert(0%)`
            laser.style.left = `${this.x + 200}px`; //change laser to titan's position
            if(debounce == -115){GameEnv.playSound("laserSound");}  //play sound

            var plrPos = GameEnv.PlayerPosition.playerX

            if (this.x >= plrPos - 250 && this.x <= plrPos - 150) {
                debounce = 0;
                laser.style.left = `${this.x+200}px`;
            }
        }

        if(debounce == 240){
            debounce = -240;   //Set debounce to start freezing the titan
        }
   }

Here is the sprite image file location: /images/platformer/sprites/skibidiTItan.png

This is the code to spawn in your own skibidi titan in gameSetup.js:

{ name: 'skibidiTitan', id: 'skibidiTitan', class: skibidiTitan, data: this.assets.enemies.skibidiTitan, xPercentage:  0.35, minPosition: 0.5 }, 

The collision for the laser is in: PlayerSkibidi.js

Here is the code:

    handleCollisionStart() {
        super.handleCollisionStart(); // calls the super class method
        // adds additional collision events
        this.handleCollisionEvent("toiletEnd");
        this.handleCollisionEvent("SkibidiToilet");
        this.handleCollisionEvent("laser");
    }
handlePlayerReaction() {
        super.handlePlayerReaction(); // calls the super class method
        // handles additional player reactions
        switch (this.state.collision) {
            //There are more for the toiletEnd and SkibidiToilet but this is the laser collision.
            case "laser": // 
                if (this.collisionData.touchPoints.this.right || this.collisionData.touchPoints.this.left) {
                    if (GameEnv.difficulty === "normal" || GameEnv.difficulty === "hard") {
                        if (this.state.isDying == false) {
                            this.state.isDying = true;
                            this.canvas.style.transition = "transform 0.5s";
                            this.canvas.style.transform = "rotate(-90deg) translate(-26px, 0%)";
                            GameEnv.playSound("PlayerDeath");
                            setTimeout(async() => {
                                await GameControl.transitionToLevel(GameEnv.levels[GameEnv.levels.indexOf(GameEnv.currentLevel)]);
                            }, 900); 
                        }
                    } else if (GameEnv.difficulty === "easy" && this.collisionData.touchPoints.this.right) {
                        this.x -= 10;
                    } else if (GameEnv.difficulty === "easy" && this.collisionData.touchPoints.this.left) {
                    this.x += 10;
                    }

                }
                break;  
        }

    }

Here is the finished Skibidi Titan:

https://github.com/Tvick22/platformer3x/assets/114638384/f2cf2117-9c91-443d-9b3a-f02ff5ac9507