ypos = 100;

var dx;

var dy;

var points;

var mic;

​

let img;

let fish;

let fish2;

let ball;

var ds;

​

let score = 0;

​

//images and font

function preload(){

  img = loadImage('bg1.png');

  fish = loadImage('fish.png');

  fish2 = loadImage('fish2.png');

  ball = loadImage('ball.png')

  ds = loadFont('DancingScript-VariableFont_wght.ttf');

}

​

function setup() {

  createCanvas(windowHeight, windowHeight);

  //get voice as input

  mic = new p5.AudioIn();

  mic.start();

}

​

function draw() {

  //get voice level to control

  var vol = map(mic.getLevel(), 0, 1, 0, height*10);

  background(img);

  g = height/20 + 10;

  w = height/15;

  r = height/13;

  n = height/400;

  fill("#CACFCC99")

  noStroke();

  rect(height/20, height/20, height*0.9, height*0.9);

​

  //2 bats

  fill("#0E3D71");

  stroke("white");

  strokeWeight(2*n)

  image(fish, g, vol-30, w, height/5);

  image(fish2, height-g-w, ypos-45, w, height/6);

  for(let i = 0; i < height; i +=20){

    line(height/2, i, height/2, i+10);

  }

  //ball movement 

  xpos += dx;

  ypos += dy;

  if (xpos >= height-g-w-r){ //hit computer player

    dx = -dx;

    console.log(dx)

  }else if (xpos <= g+w){

    if(ypos >= vol-30 && ypos <= vol-30+height/5){ //score

      dx = -dx;

      dy = -dy;

      score ++;

    }else if(score < 5){ //lose the game

      xpos = -height/2;

      ypos = -height/2;

      dx = 0;

      dy = 0;

      noStroke();

      fill("#CDCA9199")

      rect(height/4, height/2.5, height/2, height/4.5)

      fill(0);

      textSize(36*n);

      text("GAME OVER", height/2, height/2)

      textSize(24*n);

      text("click to restart", height/2, height/1.7)

    } 

  }

  if(ypos <= height/20 || ypos >= height*0.9){

    dy = -dy;

  }

  //win 

  if (score >= 5){

    xpos = -height/2;

    ypos = -height/2;

    dx = 0;

    dy = 0;

    noStroke();

    fill("#CDCA9199")

    rect(height/4, height/2.5, height/2, height/4.4)

    fill(0);

    textSize(36*n);

    text("WIN!", height/2, height/2)

    textSize(24*n);

    text("click to restart", height/2, height/1.7)

  }

  //ball

  image(ball, xpos, ypos, r, r);

  //text set up

  textAlign(CENTER);

  fill("#193160");

  stroke(255);

  strokeWeight(2*n);

  textFont(ds);

  textSize(18*n);

  text("score", height/2, height*0.87);

  text(score, height/2, height*0.93);

  textSize(48*n);

  text("PONG GAME", height/2, height/5);

}

​

//reset new game 

function mouseClicked(){

  xpos = height/2;

  ypos = height/2;

  dx = 5;

  dy = 4;

  score = 0; 

}

​

​