JSFiddle - React, Tailwind, and code Playground

by yonatan

HTML

<canvas></canvas>

CSS

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}

JavaScript

// This is a commented (or rather re-written) version of my JS1K 2018 entry - "Solar Quartet".
// You can see it at https://js1k.com/2018-coins/demo/3075
// This version has a better sky gradient and no audio at the moment.

// It's actually a remake of a demo I posted in 2011 on the now defunct wonderfl.net (which was something
// like codepen.io for ActionScript 3). That, in turn, was a fork of "Super Express", a train-ride scene
// by k0rin.

// You can see k0rin's original and my AS3 version along with a *lot* of other forks at
// http://wa.zozuar.org/tree.php?root=75

// Currently in Chrome you need to click the "Get Adobe Flash" button so it'll ask you if you want to
// allow flash to run.

// The rest of this is formatted as:
//    // Explanation of the compressed code
//    // ...
//
//    // Commented out, compressed code
//
//    Readable (more or less) version of the code
//    ...

document.addEventListener("DOMContentLoaded", go);
go() // no DOMContentLoaded on jsfiddle?
function go() {
    "use strict";
    // JS1K's HTML shim gives us a canvas (a) and its 2D context (c) for free. We'll set them up here.

    let canvas = document.querySelector('canvas');
    let ctx = canvas.getContext('2d');

    // First off - we define an abbreviation function. This takes an object, iterates over its properties
    // and stores their names as strings in a 2 or 3 letter variable ("this" is the window object).
    //
    // p[0]+p[6] will evaluate to the 1st and 7th letter (or the 1st+"undefined" if there's no 7th),
    // [p[20]] will be an empty string if the property's name is too short ([undefined] gets coerced to
    // an empty string).
    //
    // This is a variation on Marijn Haverbeke's technique - see https://marijnhaverbeke.nl/js1k/
    //
    // We won't be using it in the readable version of the demo.

    // A=o=>{for(p in o)this[p[0]+p[6]+[p[20]]]=p}

    // Next we abbreviate all the properties in our window object because...