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

function keyListener() {
  window.onkeydown = function(e) {
    
    // Get the KeyCode for pressed key.
    // Some browsers use e.keyCode, some e.which
    var key = e.keyCode ? e.keyCode : e.which;
    
    // Add to our keys[] array
    if (!keys.includes(key)) {keys.push(key);}
  }
  window.onkeyup = function(e) {
    
    // Get the KeyCode for released key.
    var key = e.keyCode ? e.keyCode : e.which;
   
    // Remove key from our keys[] array
    for (var i = 0; i < keys.length; i++) {
      if (keys[i] == key) {keys.splice(i, 1)}
    }
  }
}