JSFiddle - React, Tailwind, and code Playground

by Rúnar Berg Baugsson Sigríðarson

HTML

<h1>Homework 5</h1>
<canvas id="myCanvas" width="400" height="400">
  PONG!
</canvas>

CSS

canvas {
    border: 1px solid black;
}

JavaScript

// "Crappy PONG" -- step by step
//
// Step 0: Introducing a Paddle
/*

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

 * Make the ball bounce off the left and right
 edges of the playfield, instead of "resetting".

 * 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

 * Prevent the paddles from moving out of the
 playfield, by having them "collide" with it.

 * 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

 * Add a second ball, with half the velocity
 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");
g_ctx.lineWidth = 2;

var tau = 2*Math.PI;

// some linear algebra types
var Vector = function(a, b) {

  var length = Math.sqrt(a*a + b*b);
  var angle = Math.acos(a/length);
  
  var vectorPlus = function(v) {
    return new Vector(a + v[0], b + v[1]);
  };

  var dot = function(v) {
    return a*v[0] + b*v[1];
  };

  var times = function(x) {
    return new Vector(x*a, x*b);
  };
  
  Object.defineProperties(this, {
    0: {
      enumerable: true,
      value: a
    },
    1: {
      enumerable: true,
      value: b
    },
    length: {
      value: length
    },
    angle: {
      value: angle
    },
    plus: {
      value: vectorPlus
    },
    dot: {
      value: dot
    },
    times: {
      value: times
    },
    toString: {
      value: function() {
        return "["+a+" "+b+"]";
      }
    }
  });

  return this;
};

var Matrix = function(a, b, c, d) {
  var l0 = new Vector(a,b);
  var l1 = new Vector(c,d);

  var det = a*d - b*c;

  var plus = function(U) {
    return new Matrix(a+U["0,0"], b+U["0,1"],
          ...