Add Wall Blaster 2

03-orange/08-wall-blaster-2.js

@@ -0,0 +1,132 @@
+/** 
+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;
+    }
+};
+