JSFiddle - React, Tailwind, and code Playground

by meddle

HTML

<div style="position: absolute; top: 50px; left: 50px;">
    <canvas id="canvasOne" width="300" height="500">Your browser does not support HTML5 Canvas.</canvas>
</div>

JavaScript

var theCanvas = document.getElementById("canvasOne");
var context = theCanvas.getContext("2d"),
    i, j, goDown = true, done = [], tops = {}, currentDown;

j = 0;


var pos = Math.floor((Math.random() * 13)) * 20;

function draw() {

    context.setTransform(1, 0, 0, 1, 0, 0);
    context.clearRect(0, 0, theCanvas.width, theCanvas.height);
    
    context.beginPath();
    for (i = 0; i <= 500; i += 20) {
        context.moveTo(0, i);
        context.lineTo(300, i);
    }

    for (i = 0; i <= 300; i += 20) {
        context.moveTo(i, 0);
        context.lineTo(i, 500);
    }
    
    

    context.lineWidth = 1.0;
    context.strokeStyle = "green";
    context.stroke();
    context.closePath();
    for (i = 0; i < done.length; i++) {
        context.fillRect(done[i].pos, done[i].j, 60, 20);
        context.fillRect(done[i].pos + 20, done[i].j + 20, 20, 20);
    }
    var gr = context.createLinearGradient(0, 0, 500, 0);
    gr.addColorStop(0, 'rgb(225,0,3)');
    gr.addColorStop(.5, 'rgb(24,35,50)');
    gr.addColorStop(1, 'rgb(25,0,32)');

    context.fillStyle = gr;
    context.fillRect(pos, j, 60, 20);
    context.fillRect(pos + 20, j + 20, 20, 20);
    
    if (goDown) {
        j += 20;
    } else {
        goDown = true;
    }
    
    currentDown = (tops[pos] !== undefined) ? tops[pos] : 460;
    
    if (j >= currentDown) {
        done.push({pos: pos, j: j});
        tops[pos] = j - 20;
        
        j = 0;
        pos = Math.floor((Math.random() * 13)) * 20;
        
    }

}

setInterval(drawIt, 500, 0);

function drawIt(down) {
    if (down) {
        goDown = false;
    }
    requestAnimationFrame(draw);
    
}

document.onkeydown = function (e) {
    if (e.keyCode === 37) {
        pos-=20;
        if (pos < 0) {
            pos = 0;
        }
        drawIt(true);
    }
    if (e.keyCode === 39) {
        pos+=20;
        if (pos > 240) {
            pos = 240;
        }
        drawIt(true);
    }
    if (e.keyCode === 40) {
        j =...