JSFiddle - React, Tailwind, and code Playground

by aee11

HTML

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

CSS

/*

x* Make the ball bounce off the left and right 
  edges of the playfield, instead of "resetting".
  
x* Add a scoring system! When the ball hits the
  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 

x* Prevent the paddles from moving out of the
  playfield, by having them "collide" with it.
  
x* Let the user also move the paddles horizontally
  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
  
x* Add a second ball, with half the velocity 
  of the first one.

*/

Babel + JSX

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


"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 = [];

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

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);

// ============
// PARTICLE STUFF
// ============

class ParticleSystem {
	constructor() {
    	this.particles = [];
    }
    addParticle(particle) {
        this.particles.push(particle);
    }
    update() {
        this.particles = this.particles.filter(particle => particle.shouldRemove());
        for (let particle of this.particles) {
            particle.update();
        }
    }
    render(ctx) {
    	for (let particle of this.particles) {
            particle.render(ctx);
        }
    }
}

class ColorRGBA {
    constructor(r, g, b, alpha) {
    	this.r = r;
        this.g = g;
        this.b = b;
        this.alpha = alpha || 1;
    }
    setAlpha(alpha) {
        this.alpha = alpha;
    }
    getAlpha() { return this.alpha; }
    toString() {
    	return `rgba(${this.r}, ${this.g}, ${this.b}, ${this.alpha})`;
    }
}

class Particle {
	constructor(pos, vel, size, color) {
    	this.pos = pos;
        this.vel = vel;
        this.originalVel = {x: vel.x, y: vel.y};
       ...