JSFiddle - React, Tailwind, and code Playground

by ethertank

HTML

<canvas id="c" width="300" height="300">(´･ω･｀)</canvas>

CSS

#c { outline: 1px dotted #000; }

JavaScript

// requestAnim shim layer by Paul Irish
    window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function(/* function */ callback, /* DOMElement */ element){
                window.setTimeout(callback, 1000 / 60);
              };
    })();

function Tile(X, Y) {
    //プライベート
    var dx = X,
        dy = Y;

    var o = {
        dx: X,
        dy: Y,
        x: X + Math.floor(Math.random() * 300),
        y: Y + Math.floor(Math.random() * 300),
        getDX: function() {
            return dx;
        },
        getDY: function() {
            return dy;
        }
    };

    if (Math.ceil(Math.random() * 2) === 1) {
        o.dx = -dx;
    }
    if (Math.ceil(Math.random() * 2) === 1) {
        o.dy = -dy;
    }


    return o;
};


// usage: var HOGEGE = Tile(10,10);
window.addEventListener("load", function() {
    var c = document.getElementById("c");
    var ctx = c.getContext('2d');

    var cw = c.width;
    var ch = c.height;

    var tw = 30;
    var th = 30;

    var xl = cw / tw;
    var yl = ch / th;

    var ts = [];

    for (var i = 0; i < yl; i++) {
        for (var j = 0; j < xl; j++) {
            ts.push(Tile(j * tw, i * th));
        }
    }

    i = ts.length;

    function frame() {
        while (i--) {
            ctx.fillStyle = "red";
            var t = ts[i];
            ctx.fillRect(t.x, t.y, tw, th);
            t = [t["x"]--, t.y--];
        }
    }


    function animate() {
        requestAnimFrame(animate);
        frame();
    }

    animate();


}, false);