paper-pong.js

// Program 14

importScripts('paper.js');

(async () => {
  // Get a canvas object for this paper.
  const canvas = await paper.get('canvas');

  // Get context
  const ctx = canvas.getContext('2d');
  // Get a "supporter canvas", which is a canvas for the entire
  // projection surface.
  const supporterCanvas = await paper.get('supporterCanvas');
  const supporterCtx = supporterCanvas.getContext('2d');
  // setup
  let ballRadius = 30;
  let x = supporterCanvas.width/2;
  let y = supporterCanvas.height-30;
  let dx = 8;
  let dy = -3;
  let scoreLeft = 0;
  let scoreRight = 0;

  // Get the paper number of this piece of paper (which should not change).
  const myPaperNumber = await paper.get('number');

  // Movement functions
  function drawBall() {
    supporterCtx.beginPath();
    supporterCtx.arc(x, y, ballRadius, 0, Math.PI*2);
    supporterCtx.fillStyle = 'white';
    supporterCtx.fill();
    supporterCtx.closePath();
  }

  function getPaddles(papers) {

   const points = [];

    for (let id of Object.keys(papers)) {
      const other = papers[id];
        if (other.data.isPaddle) {
          points.push(other.points);
      }
    }

    const paddles = points.map(val => {
      const w = val.topRight.x - val.topLeft.x;
      const h = val.bottomRight.y - val.topRight.y;
      return {
        'direction': getSide(val),
        'width': w/2,
        'height': h,
        'center': val.center,
        'x': val.topLeft.x + w/4,
        'y': val.topLeft.y
      }
    });

    function getSide(val) {
      let d;
      if (val.topLeft.x < supporterCanvas.width/2) {
        d = 'left'
      } else {
        d = 'right'
      }
      return d;
    }

    return paddles;

  }

  function drawPaddles(paddles) {
    paddles.forEach((val) => {
      if (val.direction === 'left') {
        supporterCtx.fillStyle = 'red';
      } else {
        supporterCtx.fillStyle = 'green';
      }
      supporterCtx.beginPath();
      supporterCtx.fillRect(val.x, val.y, val.width, val.height);
    })

  }

  function collisionDetection(paddles) {
    paddles.forEach(val => {
      if(x > val.x && x < val.x+val.width && y > val.y && y < val.y+val.height) {
        dx= -dx;
      }
    })
  }

  function drawScore() {
    ctx.beginPath()
    ctx.fillStyle = 'red';
    ctx.font="20px Arial";
    ctx.fillText(`Points: ${scoreLeft}`, 10, 20)
    ctx.fillStyle = 'green';
    ctx.fillText(`Points: ${scoreRight}`, 10, 50)
  }

  function drawBoundingBox() {
    supporterCtx.strokeStyle = 'white';
    supporterCtx.lineWidth = 10;
    supporterCtx.strokeRect(45, 25, supporterCanvas.width - 90, supporterCanvas.height - 55);
  }

  drawScore();

  // Repeat every 100 milliseconds.
  setInterval(async () => {
    // Clear out the supporter canvas. We get our own canvas, so we won't
    // interfere with other programs by doing this.
    supporterCtx.clearRect(0, 0, supporterCanvas.width, supporterCanvas.height);

    drawBoundingBox();

    // Get a list of all the papers.
    const papers = await paper.get('papers');
    const paddles = getPaddles(papers);
    drawPaddles(paddles);
    drawBall();
    collisionDetection(paddles);

    if(x + dx > supporterCanvas.width-ballRadius) {
      dx = -dx;
      scoreLeft++;
      ctx.clearRect(0, 0, canvas.width, canvas.height)
      drawScore();
    }
    if (x + dx < ballRadius) {
      dx = -dx;
      scoreRight++;
      ctx.clearRect(0, 0, canvas.width, canvas.height)
      drawScore();
    }
    if(y + dy > supporterCanvas.height-ballRadius || y + dy < ballRadius) {
        dy = -dy;
    }
    
    x += dx;
    y += dy;

    // Finally, commit to the canvas, which actually renders.
    supporterCtx.commit();
  }, 1000/60);
})();