Make an interactive game

// Sample 1

/* This is a sample program that demonstrates some of the concepts we have worked on in class.

I have included comments so that each line is explained.  You will see the dim variable included with the random statement to manipulate the range so the box does not go outside the border of the screen.

I also have a complex 'if' statement     ((x>m-dim)&&(x<m+dim)&&(y>n-dim)&&(y<n+dim))

This statement checks to see if the mouse is inside the box it asks if x is greater than the left side of the box and less than the right side value of the box and does both for the 'y' axis as well.  The && characters are there to do the 'AND' logic function in this statement.

You can also do an 'or' logic by using the symbols || (which are made using the shift key and the backslash key found above the 'enter' key)

Your task is to make an interactive game similar to this one.  I expect this should take you an hour or two so this will cover two days of class assignment.*/

var dim = 50;

var m;

var n;

function setup() {

  createCanvas(640, 320);

  rectMode(CENTER);

  m = dim + random(640 - dim * 2);                       //get a random number between 50 and 590 for starting box 'x' position

  n = dim + random(320 - dim * 2);                       //get a random number between 50 and 270 for starting box 'y' position

}

function draw() {

  background(0);                                                                           // set screen color to black

  fill(0, 200, 200); // set box color

  rect(m, n, dim * 2, dim * 2);                                                     // draw box

  textSize(24);                                                                                // set font size

  fill(255);                                                                                       // set font color

  text("Mouse", m - (dim * 4) / 5, n);                                          // place text 'Mouse'

  text("Here", m - (dim * 4) / 5, n + dim / 2);                            // place text 'Here'

  x = mouseX; // get mouse 'x' position

  y = mouseY; // get mouse 'y' position

  if (x > m - dim && x < m + dim && y > n - dim && y < n + dim) {       // this line checks if the mouse is inside the box

    background(0);                                                                                       // redraw a black background to erase the old box

    m = dim + random(640 - dim * 2);                                 //get a random number between 50 and 590 for new box 'x' position

    n = dim + random(320 - dim * 2);                                  //get a random number between 50 and 270 for new box 'y' position

  }

}

// Sample 2

/* This is a sample program that demonstrates some of the concepts we have worked on in class.

I have included comments so that each line is explained.  You will see the dX and dY variables included for speed and a conditional near the bottom to make it go faster.

I also have a complex 'if' statement     ((x>m-dim)&&(x<m+dim)&&(y>n-dim)&&(y<n+dim))

This statement checks more than one thing at a time.  The && characters are there to do the 'AND' logic function in this statement.

You can also do an 'or' logic by using the symbols || (which are made using the shift key and the backslash key found above the 'enter' key)

Your task is to make an interactive game similar to this one.  I expect this should take you an hour or two so this will cover two days of class assignment.*/

let x; let y;

let dX; //speed of the ball in x

let dY; //speed of the ball in y

let speed;

let size = 50;      // size of the ball

let count = 0; let m; let n;

function setup() {

  createCanvas(500, 300);

  x = random(100,300);   // get a starting point

  y = random(100,300);   // get a starting point

  speed = 2;     //starting speed

  dX = speed;

  dY = speed;

}

function draw() {

  background(0);

  m = mouseX;            //paddle position

  fill(0,0,255);      //paddle& ball color

  rect(m-50,height-20,100,20);

  circle(x,y,size);

  if(x >(width-size/2)){dX=-speed;  }  //right side bounce

  if(x<size/2){dX=speed;} // left side bounce

  if(y<size/2){dY=speed;}  // top bounce

  x += dX;

  y += dY;

  if ((y + size / 2 )>( height - 20)) {    if ((x > m - 50 )&&( x < m + 50)) {

      dY = -speed; count +=1;  // paddle bounce

    }

  }

  textSize(32);

  fill(255);

  text(count,5,30);

  if (y>(height+50)){textSize(80);fill(255,0,0);text("GAME OVER",0,height/2);count = 0;}

  if(count%10==0){speed += 1; size+=1;}

  if(speed >10){speed = 1;}

  }