var x = 500;
var y = 300;
var i, n, j, m, b;
var r=15;
var angleX = 50;
var angleY = 75;
var s1 = 0;
var s2 = 0;
var UpL, DownL, UpR, DownR;
var blocks


var easy=30;//7.5 to Infinity easy

var[ ] blocks = new var[600];

var leftpaddle;
var rightpaddle;
var bg;
var ball;
var sand;
var star;
var leftwon;
var rightwon;
var beer;


function preload(){

  leftpaddle = loadImage('leftpaddle.png');
  rightpaddle = loadImage('rightpaddle.png');
  bg = loadImage('bg.png');
  ball= loadImage('ball.png');
  sand= loadImage('sand.png');
  star= loadImage('star.png');
  leftwon= loadImage('leftwon.png');
  rightwon= loadImage('rightwon.png');
}



function setup() {

  fill(255,0,0);
  createCanvas(1000, 600);



  for (b=0; b<20; b++) {
    blocks[b] = 1;
  }


  i = 15;
  j = 975;
  n = 270;
  m = 270;

  // leftpaddle = loadImage('leftpaddle.png');
  // rightpaddle = loadImage('rightpaddle.png');
  // bg = loadImage('bg.png');
  // ball= loadImage('ball.png');
  // sand= loadImage('sand.png');
  // star= loadImage('star.png');
  // leftwon= loadImage('leftwon.png');
  // rightwon= loadImage('rightwon.png');
}

function draw() {
  move();
  cleantrails();
  notifications();
  breakout();
  blockgone();
  bouncing();
  paddleMove();
}


function paddleMove() {
  if (UpL ) {
    n=n-6;
  }
  if (DownL) {
    n=n+6;
  }
  if (UpR ) {
    m=m-6;
  }
  if (DownR) {
    m=m+6;
  }
}

function keyPressed() {
  if (key == 'w'||key == 'W') {
    UpL = true;
  }
  if (key == 's'||key == 'S') {
    DownL = true;
  }
  if (key == CODED) {
    if (keyCode == UP) {
      UpR = true;
    }
  }
  if (key == CODED) {
    if (keyCode == DOWN) {
      DownR = true;
    }
  }
}

function keyReleased() {
  if (key == 'w'||key == 'W') {
    UpL = false;
  }
  if (key== 's'||key == 'S') {
    DownL = false;
  }
  if (key == CODED) {
    if (keyCode == UP) {
      UpR = false;
    }
  }
  if (key == CODED) {
    if (keyCode == DOWN) {
      DownR = false;
    }
  }
}



/////////////////////////////

var blocks_gone;
var bx, by;

function blockgone() {
  blocks_gone = 1;

  for (b=0; b<20; b++) {
    // Calculate the x,y position of upper right corner
    bx = 500;
    by = b*30;

    // Check if we we have a block (blocks[x] is 1)
    if (blocks[b]==1) {
      // Draw the block
      noStroke();
      rect(bx, by, r, r);
      //image(beer, bx-15, by);

      // Since we drew a block, all are not gone
      blocks_gone = 0;

    }
    // Check if ball is over the block, if so, remove it (blocks[i]=0)
    // first check bounce on top/bottom
    if (x>(bx) && x<(bx+r+easy) &&
      y>(by) && y<(by+r+easy) && blocks[b]==1) {
      blocks[b]=0;
    }
  }
}


/////////////////////////////

function bouncing() {
  if (y < 25) {
    angleY = abs(angleY);
  }
  if (y > 575) {
    angleY = -angleY;
  }
  if (x < 95 && y > n && y < n+60) {
    angleX = abs(angleX);
    angleX = angleX+0.5;
    angleY = random(-10, 10);
  }

  if (x > 880 && y > m && y < m+60) {
    angleX = -angleX;
    angleX = angleX-0.5;
    angleY = random(-10, 10);
  }

  //scores
  if (x < 15) {
    s2 = s2+1;
    x = 500;
    y = 300;
    angleX = 7;
    angleY = 0;
    if (s2 ==6 ) {
      noLoop();
      image(rightwon, 340, 200);

      //fill(255);
      //textFont(font2);

      //text("Right Crab win", 150, 50);
    }
  }
  if (x > 975) {
    s1 = s1+1;
    x = 500;
    y = 300;
    angleX = -7;
    angleY = 0;
    if (s1 == 6) {
      noLoop();
      image(leftwon, 340, 200);

      //fill(255);
      //textFont(font2);

      //text("Left Crab win", 150, 50);
    }
  }
}

/////////////////////////////

function breakout() {

//ball


  //paddle one
  //left one
  //rect(i, n, 6*r, 6*r);

  image(leftpaddle, i, n);

  //right one
  //rect(j-80, m, 6*r, 6*r);
    image(rightpaddle, j-80, m);

      smooth();
      fill(255);
      rect(x, y, r, r);
      image(ball, x-50, y-50);


}

/////////////////////////////

function cleantrails() {

  background(0);
  image(sand, 0, 0);

  image(bg, 0, 0);
}

/////////////////////////////

function move() {
  x = x+angleX;
  y = y+angleY;
}

/////////////////////////////


function notifications() {


  textSize(50);
  //text pos
  fill(255);
  text(s1, 400, 70);
  text(s2, 570, 70);
  }