1207paddle

// object-oriented programming (OOP)

// is programming using OBJECTS

// objects are pieces of computer code 

// that contain both functions *and* data

//

// objects in javascript are accessed through

// things called "classes"

// classes have methods which are functions

// classes have properties which are variables

// classes also have a constructor function which runs

// when you make one. this is called instantiation.

​

var NUMROWS = 5;

var NUMCOLUMNS = 10;

var BWIDTH = 40;

var BHEIGHT = 15;

var BHSPACING = 5;

var BVSPACING = 5;

​

var LEFTWALL, RIGHTWALL, TOPWALL, BOTTOMWALL; // these are walls

​

var bricks = []; // array to hold all the bricks

var ball; // variable to contain a ball

var paddle; // variable to contain the paddle

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  LEFTWALL = width*0.2;

  RIGHTWALL = width*0.8;

  TOPWALL = height*0.1;

  BOTTOMWALL = height*0.9;

  restartGame();

}

​

function draw() {

  background(0);

  drawWalls(); // draw the walls

  paddle.move(mouseX-paddle.w/2); // move the paddle

  // draw the bricks and collision detect:

  for(let i = bricks.length-1;i>=0;i--) // go through the bricks backwards

  {

    bricks[i].draw(); // draw them

    if(bricks[i].collide(ball)) // see if the ball is hitting them

    {

      ball.bounce(bricks[i]);

      ball.velocity*=1.01; // make it faster

    }

    if(bricks[i].alive==false) // KILL THE BRICK

    {

      bricks.splice(i, 1); // deleted

    }

  }

  if(paddle.collide(ball)) {

    ball.bounce(paddle);

    ball.angle+=map(ball.x-paddle.x,0,paddle.w,-0.3, 0.3);

  }

  ball.draw(); // draw the ball

  paddle.draw(); // draw the paddle

}

​

function keyTyped() {

  restartGame();

}

​

function restartGame() {

  bricks = []; // reinitialize the bricks array

  var TOTALWIDTH = (BWIDTH+BHSPACING)*NUMCOLUMNS; // how many pixels wide is all the bricks

  var offsetx = (width-TOTALWIDTH)/2;

  var offsety = TOPWALL+BHEIGHT*5;  

  for(let i = 0;i<NUMROWS*NUMCOLUMNS;i++)

  {

    let c = i%NUMCOLUMNS;

    let r = floor(i/NUMCOLUMNS);

    bricks[i] = new Brick(c*(BWIDTH+BHSPACING) + offsetx, r*(BHEIGHT+BVSPACING) + offsety, BWIDTH, BHEIGHT);

  } 

  // make a new ball:

  ball = new Ball();

  // make a new paddle:

  paddle = new Paddle();

}

​

function drawWalls() {

  fill(255, 0, 255);

  rect(LEFTWALL, TOPWALL, 10, BOTTOMWALL-TOPWALL);

  rect(RIGHTWALL, TOPWALL, 10, BOTTOMWALL-TOPWALL);

  rect(LEFTWALL, TOPWALL, RIGHTWALL-LEFTWALL, 10);

  rect(LEFTWALL, BOTTOMWALL, RIGHTWALL-LEFTWALL, 10);

}

​

// this is going to be a class definition for the bricks:

class Brick {

  // constructor: runs when you instantiate the class ("new" on a object)

  constructor(x=width/2,y=height/2,w=10,h=10)

  {

    // set some properties:

    this.x = x;

    this.y = y;

    this.w = w;

    this.h = h;

    this.r = random(128,255);

    this.g = random(128,255);

    this.b = random(128,255);

    this.alive = true;

  }

  // add some methods:

  draw() // draws the brick every frame

  {

    fill(this.r,this.g,this.b);

    rect(this.x,this.y,this.w,this.h);

  }

  collide(_ball) // check whether brick is touching the ball (argument)

  {

    if(_ball.x>this.x&&_ball.x<(this.x+this.w)&&_ball.y>this.y&&_ball.y<(this.y+this.h))

    {

      // COLLISION!!!!!!!!!

      this.alive = false;

      return(true);

    }

    else

    {

      return(false);

    }

  }

}

​

// this is going to be a class definition for the ball:

class Ball {

  // constructor: runs when you instantiate the class ("new" on a object)

  constructor(x=width/2,y=height*2/3,v=5,a=random(PI, TWO_PI))

  {

    // set some properties:

    this.x = x;

    this.y = y;

    this.px = x;

    this.py = y;

    this.velocity = v;

    this.angle = a;

  }

  // add some methods:

  draw()

  {

    fill(255);

    ellipse(this.x,this.y,15,15);

    this.px = this.x;

    this.py = this.y;

    this.x = this.x + this.velocity * cos(this.angle);

    this.y = this.y + this.velocity * sin(this.angle);

    // make the ball bounce off the walls:

    if(this.x>RIGHTWALL) this.angle = PI - this.angle;

    if(this.x<LEFTWALL) this.angle = PI - this.angle;

    if(this.y>BOTTOMWALL) this.angle = TWO_PI - this.angle;

    if(this.y<TOPWALL) this.angle = TWO_PI - this.angle;

  }

  bounce(_brick)

  {

    if(this.px>_brick.x) this.angle = PI - this.angle;

    if(this.px<_brick.x+_brick.w) this.angle = PI - this.angle;

    if(this.py>_brick.y) this.angle = TWO_PI - this.angle;

    if(this.py<_brick.y+_brick.h) this.angle = TWO_PI - this.angle;

  }

}

​

// this is going to be a class definition for the paddle:

class Paddle {

  // constructor: runs when you instantiate the class ("new" on a object)

  constructor(x=width/2,y=BOTTOMWALL*0.9,w=60,h=10)

  {

    // set some properties:

    this.x = x;

    this.y = y;

    this.w = w;

    this.h = h;

    this.r = 0;

    this.g = 255;

    this.b = 255;

  }

  // add some methods:

  draw() // draws the paddle every frame

  {

    fill(this.r,this.g,this.b);

    rect(this.x,this.y,this.w,this.h);

  }

  move(_x)

  {

    this.x = constrain(_x,LEFTWALL,RIGHTWALL-this.w);

  }

  collide(_ball) // check whether brick is touching the ball (argument)

  {

    if(_ball.x>this.x&&_ball.x<(this.x+this.w)&&_ball.y>this.y&&_ball.y<(this.y+this.h))

    {

      // COLLISION!!!!!!!!!

      return(true);

    }

    else

    {

      return(false);

    }

  }

}

​

​

​

​

​