cn-sensei-guides/03-orange/08-wall-blaster-2.js

/** 
This activity uses loops and switches statements to place brick objects. Conditionals are used to program collision code. The player must clear all the bricks to win.
 */

//*****************Scene - Initialize When Scene Starts Event************************//
// set up the scene
if ($this.scene.state() == "PLAY") {
    // keep track of how many bricks there are
    $this.brickCount = 0;
    
    // set up helper variables for the loops
    var blockSpacingX = 100;
    var blockSpacingY = 35;
    
    // loop through 4 rows and 8 columns and place the bricks
    for (var row = 0; row < 4; row++) {
        for(var col = 0; col < 8; col++) {
            // clone the brick objects
            var brickClone = brick.clone();
            
            // place the cloned brick using the helper variables
            brickClone.x(col * blockSpacingX);
            brickClone.y(row * blockSpacingY);
            
            // give the bricks health based on the row
            brickClone.health = 4 - row;
            brickClone.updateColor();
            
            //increment the brickCount
            $this.brickCount++;
        }
    }
    // remove the original brick from the scene
    brick.remove();
}

//*************************paddle - Update Every Frame Event************************//
// move the paddle to the cursor
$this.x(getMouseX() - 125/2);

//************************ball - Update Every Frame Event**************************//
// move the ball on every frame
moveX($this);
moveY($this);

// check for collisions on every frame
$this.checkPaddleCollision();
$this.checkWallCollision();

//***********************ball - Initialize When Scene Starts Event*****************//
// check to see if the ball is colliding with the paddle
$this.checkPaddleCollision = function() {
    if ($this.isTouching(paddle)) {
        // calculate x speed based on where the ball hit the paddle
        var ballCenter = $this.x() + 25/2;
        var paddleCenter = paddle.x() + 125/2;
        var launchSpeed = 3 * (ballCenter - paddleCenter);
        
        // adjust the speedX based on the launch speed
        $this.speedX(launchSpeed);
        // keep the speedY at 200 but make sure the ball goes up
        $this.speedY(-200);
    }
};

// check to see if the ball is colliding with the walls
$this.checkWallCollision = function() {
    // bounce the ball off the left or right side
    if ($this.x() <= 0 || $this.x() >= 800) {
        // change the ball's x direction
        $this.speedX(-$this.speedX());
    }
    // bounce the ball off the top side
    if ($this.y() <= 0) {
        // change the ball's y direction
        $this.speedY(-$this.speedY());
    }
    // reset the ball if it goes off the bottom side
    if ($this.y() >= 600) {
        // place the ball in the center of the scne
        $this.x(400);
        $this.y(300);
        // give the ball a random speedX
        $this.speedX(random(-200, 200));
    }
};

//************************brick - Update Every Frame Event**************************//
// if this brik touches the ball
if ($this.isTouching(ball)) {
    // decrease the brick's health by one and update its color
    $this.health--;
    $this.updateColor();
    
    // bounce the ball in the opposite direction
    ball.speedY(-ball.speedY());
    
    // if the brick's health is 0
    if ($this.health <= 0) {
        // decrement the brick count
        $this.scene.brickCount--;
        // remove the brick
        $this.remove();
        // if there are no more bricks, stop the game
        if ($this.scene.brickCount <= 0) {
            $this.scene.stopCode();
        }
    }
}

//*********************brick - Initialize When Scene Starts Event********************//
// change the brick color based on its health
$this.updateColor = function() {
    switch ($this.health) {
        case 1:
            $this.fill("#8CE0D3"); // light blue
            break;
        case 2:
            $this.fill("#28ADA9"); // dark blue
            break;
        case 3:
            $this.fill("#8A2F62"); // light purple
            break;
        case 4:
            $this.fill("#500F34"); // dark purple
            break;
        default:
            $this.fill("#000000"); //black
            break;
    }
};