JSFiddle - React, Tailwind, and code Playground

by WolfGaming

HTML

<canvas id="myCanvas" width="400" height="400" 
style="border:1px solid black;">
Sorry, your browser does not support the HTML5 canvas tag.
</canvas>

JavaScript

// "Crappy PONG" -- step by step
//
// Step 9: Homework
/*

* Make the ball bounce off the left and right 
  edges of the playfield, instead of "resetting". *Done*
  
* Add a scoring system! When the ball hits the *Done*
  left edge, the right paddle earns a point, and
  vice versa. Display each paddle's score, in
  "bold 40px Arial", at the top of the playfield 

* Prevent the paddles from moving out of the
  playfield, by having them "collide" with it. *Done*
  
* Let the user also move the paddles horizontally *Done*
  i.e. left and right within 100 pixels of the edges,
  using the 'A' and 'D' keys for the left paddle,
  and   the 'J' and 'L' keys for the right paddle
  
* Add a second ball, with half the velocity  *Done*
  of the first one.

*/

"use strict";

/* jshint browser: true, devel: true, globalstrict: true */

var g_canvas = document.getElementById("myCanvas");
var g_ctx = g_canvas.getContext("2d");

/*
0        1         2         3         4         5         6         7         8         9
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
*/

// =================
// KEYBOARD HANDLING
// =================

var g_keys = [];

var KEY_R = 'R'.charCodeAt(0);
var KEY_F = 'F'.charCodeAt(0);

function handleKeydown(evt) {
    g_keys[evt.keyCode] = true;
    g_world.updateKeysUp(g_keys, evt);
}

function handleKeyup(evt) {
    g_keys[evt.keyCode] = false;
}

// Inspects, and then clears, a key's state
//
// This allows a keypress to be "one-shot" e.g. for toggles
// ..until the auto-repeat kicks in, that is.
//
function eatKey(keyCode) {
    var isDown = g_keys[keyCode];
    g_keys[keyCode] = false;
    return isDown;
}

window.addEventListener("keydown", handleKeydown);
window.addEventListener("keyup", handleKeyup);

// ===========
// WORLD STUFF
// ===========

var g_world = 
    {
        objects: [],
        variableBallSpeed: false
    };

g_world.registerObject = function(obj) {
   ...