Enemy Collision Hacks

Replace the `Player` and `Enemy` code with your player which will refreance your player from your code.

Note: All these hacks should be placed into the `Enemy.js` file.

Hack #1 - Make Enemy Bounce back on collision

Instead of just reversing direction, make the enemy “bounce” back a little when it collides with something.

This hack should be inside of the `updateMovement()` function.

%%js

if (this.collisionData.touchPoints.other.id === "player") {
    if (this.collisionData.touchPoints.other.left && this.immune == 0) {  
        this.speed = -this.speed;  // Reverse speed
        this.x += 10;  // Move enemy back slightly
    }
}

<IPython.core.display.Javascript object>

Hack #2 - Make Player Freeze for a Few Seconds on Collision with Enemy

When the enemy hits the player, make it stop moving for 3 seconds before continuing.

This hack should be implemented into the `collisionAction()` function, nothing needs to be deleted in `enemy.js`

%%js

if (this.collisionData.touchPoints.other.id === "player") {
    this.speed = 0;  // Stop movement

    setTimeout(() => {
        this.speed = 3;  // Restore original speed after delay
    }, 3000);  // Time in milliseconds
}

<IPython.core.display.Javascript object>

Death Animation Hacks

Note: Insert these hacks into your enemiy’s file

Hack 1: Simple Death Animation

Add this hack to your game. For this hack, we will find an explosion png. Then, using this png, write code for a death animation that appears after the enemy dies. You can make it enlarge itself or spin, it doesn’t matter.

//alter some of the code to fit your game
if (this.collisionData.touchPoints.other.id === "player") {
    GameEnv.invincible = true;
    GameEnv.goombaBounce = true; 
    this.die();
}

die(); {
    const sprite_src_kaboom = path + "/images/gamify/laser_bolt.png"; //you can just put some random image here
    const sprite_data_kaboom = {
        //make some sprite data and add code to make it more like an animation.
    }

}

Hack 2: Harder Death Animation

For this hack, you will need to actually make an animation. Complete the code by making the shards. This code is taken from EnemyGoomba.js, so if you need to, take a look.

//alter the code to fit your game
if (this.collisionData.touchPoints.other.id === "player") {
    GameEnv.invincible = true;
    GameEnv.goombaBounce = true; 
    this.kaboom();   
}

kaboom(); {
const shards = 8; //number of shards
for (let i=0; i < shards; i++) {
    const shard = document.createElement('div');
    shard.style.position = 'absolute';
    shard.style.width = '5px';
    shard.style.height = '5px'; 
//continue making the shards    
    


    shard.animate([
        { transform: `translate(0,0)`}, //complete the rest of the animation code
        { transform: `translate`} //complete the rest of the animation code
    ], {
        duration: 1000,
        easing: 'ease-out',
        fill: 'forwards'
    });

    setTimeout(() => {
        shard.remove();
    }, 1000);
    }
}

Enemy Collision and Death Animation HW:

Part 1: Enemy Collision:

Look through the lessons again, and build enemy collision of your idea on your own game Some ideas we can give you is:

Having a damage when it gets hit
Having a message pop up when it hits
Other Ideas of your own..

Part 2: Death Animation:

Same as part one, just create a death animation in your own game. Simple ideas you can use is:

enemy slowly disappearing into nothing.
having a quick white flash before disappearing (used in retro games).
Having an explosion, enemy bursting into particles or flames.
Creative ideas of your own..

Grading:

The game should work
The coding should be at least similar to what we showed you through lessons