JSFiddle - React, Tailwind, and code Playground

by Calumks

HTML

<canvas id = "canvas" width = "480" height = "320"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

var paddleX = 1;
var paddleY = 1;

var paddle2X = 459;
var paddle2Y = 1;

var ballX = 240;
var ballY = 100;
var velocityX = 5;
var velocityY = 5;

var keys = [];

draw();

function draw() {
  context.clearRect(0, 0, 480, 320);
  keyListener();

  context.fillStyle = "#8B0000";
  context.fillRect(paddleX, paddleY, 20, 100);
  context.fillRect(paddle2X, paddle2Y, 20, 100);
  context.fillRect(ballX, ballY, 10, 10);

  if (ballX > 480 || ballX < 0) {
    ballX = 200;
    velocityX *= (Math.random() - 0.5) > 0 ? 1 : -1;
  }
  if (ballY > 320) {
    velocityY *= -1;
  }

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

  ballX += velocityX;
  ballY += velocityY;

  if (ballY < 0 || ballY + 10 > 320) {
    velocityY *= -1;
  }

  var speed = 7;
  if (keys.includes(87) && paddleY > 0) {
    paddleY -= speed;
  }
  if (keys.includes(83) && paddleY + 100 < 320) {
    paddleY += speed;
  }

  if (keys.includes(38) && paddle2Y > 0) {
    paddle2Y -= speed;
  }
  if (keys.includes(40) && paddle2Y + 100 < 320) {
    paddle2Y += speed;
  }

  if (between(ballY, paddleY, paddleY + 100) &&
    between(ballX, paddleX, paddleX + 20)) {
    velocityX *= -1;
  }

  if (between(ballY, paddle2Y, paddle2Y + 100) &&
    between(ballX, paddle2X - 20, paddle2X)) {
    velocityX *= -1;
  }

  requestAnimationFrame(draw);
}

function between(a, b, c) {
  if (a > b && a < c) {
    return true;
  }
  return false;
}

function keyListener() {
  window.onkeydown = function(e) {
    if (!keys.includes(e.which)) {
      keys.push(e.keyCode ? e.keyCode : e.which);
    }
  }
  window.onkeyup = function(e) {
    for (var i = 0; i < keys.length; i++) {
      if (keys[i] == e.which) {
        keys.splice(i, 1)
      }
    }
  }
}