Pong: Adição de Menu

Compartilhando algumas adições no código:

Adicionei a opção de escolher no jogo se jogaremos contra a maquina ou contra alguém:

A parte abaixo adiciona os botões no jogo

function setup() {
  createCanvas(599, 400);
  button1 = createButton("1 vs 1");
  button1.position(0, 0);
  button1.mousePressed(modo1v1);
  button2 = createButton("1 vs COM");
  button2.position(60, 0);
  button2.mousePressed(modo1vCOM);
}

As duas partes abaixo são a parte lógica que ativa o modo escolhido:

function marcaPonto() {
  if (xBola + raio > 599.9) {
    placarP += 1;
    ponto.play();
  }

  if (xBola - raio < 0) {
    placarO += 1;
    ponto.play();
  }
}

function modo1v1() {
  placarO = 0;
  placarP = 0;
  xBola = 300;
  yBola = 200;
  velocidadeXBola = 5;
  velocidadeYBola = 5;
  yRaqueteO = 150;
  yRaqueteP = 150;
  sel = "MultPlayer";
}
function modo1vCOM() {
  placarO = 0;
  placarP = 0;
  xBola = 300;
  yBola = 200;
  velocidadeXBola = 5;
  velocidadeYBola = 5;
  yRaqueteP = 150;
  sel = "SinglePlayer";
}

function modoDeJogo() {
  if (sel == "MultPlayer") {
    if (keyIsDown(87)) {
      yRaqueteO -= 10;
    }

    if (keyIsDown(83)) {
      yRaqueteO += 10;
    }
  }
  if (sel == "SinglePlayer") {
    velocidadeRaqueteO = (yBola + alturaRaqueteO / 3) * dif_Bola;

    yRaqueteO = velocidadeRaqueteO + random(0, 6);
  }
}

Incluí também uma parte para impedir que as raquetes saiam da tela enquanto controlamos elas:

function ManterRaquetesEmTela() {
  if (yRaqueteP + alturaRaqueteP > height) {
    yRaqueteP = height - alturaRaqueteP;
  }

  if (yRaqueteP <= 0) {
    yRaqueteP = 0;
  }

  if (yRaqueteO + alturaRaqueteO > height) {
    yRaqueteO = height - alturaRaqueteO;
  }

  if (yRaqueteO <= 0) {
    yRaqueteO = 0;
  }
}

Link do jogo:

https://editor.p5js.org/Trinity5201/full/0q8n9LYRu

Código completo:

https://editor.p5js.org/Trinity5201/sketches/0q8n9LYRu