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 = 0;
var velocityX = -4;
var velocityY = 4;

var keys = [];

draw();

function draw() {
	context.clearRect(0, 0, 480, 320);
	keyListener();
  
	context.fillStyle = "#000000";
	context.fillRect(paddleX, paddleY, 20, 100);
	context.fillRect(paddle2X, paddle2Y, 20, 100);
	context.fillRect(ballX, ballY, 10, 10);
	
 	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 (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)}
		}
	}
}