iMajin LLC

Power Ups!

Let’s Add Some Power Ups! =)

Adding power-ups can make your game more fun and engaging! How else are you going to cook during the boss battle?

Step 1: Add the Power Up Functions to Your JS File

First, we’ll add the new Power Up functions to our “dash.js” file.

  1. Click the copy button below to copy all the new functions. Then go to line 617 in your “dash.js” file and select lines 617 through 629.
  2. Once you have all those lines highlighted, press delete.
  3. After the lines have been deleted paste the code you copied from this page there and save the file.

Voilà! That should do it for the the JS part of things.

    // Function to create power-up elements
    function createPowerUp() {
    const powerUp = document.createElement('div');
    powerUp.classList.add('power-up');
    const powerUpLeft = playableScreenWidth + Math.random() * 500;
    
    // Randomly position power-up
    const platform = document.querySelectorAll('.platform');
    const randomPlatform = platform[Math.floor(Math.random() * platform.length)];
    const platformRect = randomPlatform.getBoundingClientRect();
    const powerUpBottom = Math.random() * (platformRect.height - 20) + 20;
    
    powerUp.style.left = `${powerUpLeft}px`;
    powerUp.style.bottom = `${powerUpBottom}px`;
    
    platformContainer.appendChild(powerUp);
    
    return powerUp;
    }
    
    // Function to move power-ups to the left only when the player is moving to the right
    function movePowerUps() {
    const powerUps = document.querySelectorAll('.power-up');
    powerUps.forEach((powerUp, index) => {
    if (isMovingRight) {
    const powerUpLeft = parseInt(powerUp.style.left) - playerSpeed;
    powerUp.style.left = `${powerUpLeft}px`;
    
    // Remove power-up if it's off-screen to the left
    if (powerUpLeft < -50) {
    powerUp.remove();
    }
    }
    });
    }
    
    // Example scores to trigger power-ups
    const powerUpScores = [10, 100, 1000]; // Adjust as needed
    let currentPowerUpIndex = 0;
    
    let activePowerUp = null;
    
    function checkScoreForPowerUps() {
    if (score >= powerUpScores[currentPowerUpIndex]) {
    activePowerUp = createPowerUp();
    currentPowerUpIndex++;
    }
    }
    
    function checkPowerUpCollision() {
    if (activePowerUp) {
    const powerUpRect = activePowerUp.getBoundingClientRect();
    const playerRect = player.getBoundingClientRect();
    
    if (
    playerRect.left < powerUpRect.left + powerUpRect.width &&
    playerRect.left + playerRect.width > powerUpRect.left &&
    playerRect.top < powerUpRect.top + powerUpRect.height &&
    playerRect.top + playerRect.height > powerUpRect.top
    ) {
    // Collision detected, apply power-up effect
    activePowerUp.remove();
    activePowerUp = null;
    applyPowerUpEffect();
    }
    }
    }
    
    function applyPowerUpEffect() {
    // Example power-up effects: Increase player speed, jump height, and decrease gravity for 5 seconds
    const originalSpeed = playerSpeed;
    const originalJumpHeight = jumpHeight;
    const originalGravity = gravity;
    
    playerSpeed += 10;
    jumpHeight += 500;
    gravity -= 0.5;
    
    setTimeout(() => {
    // Revert the changes after 5 seconds
    playerSpeed = originalSpeed;
    jumpHeight = originalJumpHeight;
    gravity = originalGravity;
    }, 5000);
    }
    
    // Call this function in your game loop to continuously check for score updates
    function updateGame() {
    if (isGameActive) {
    moveCoins();
    checkCoinCollision();
    movePowerUps(); // Move power-ups
    checkScoreForPowerUps(); // Check for power-up triggers
    checkPowerUpCollision(); // Check for power-up collision
    requestAnimationFrame(updateGame);
    }
    }

Step 2: Add Some Cool Styles to Your Animations CSS File

Next, we’ll add the styles for the Power Ups. Follow along in class for this part =)
Resources: