JSFiddle - React, Tailwind, and code Playground

by Merlin Ye

JavaScript

var Ticker = (function() {
    var _callbacks = []
    var _tick = function () {
        _callbacks.forEach(cbArr => {
            var callback = cbArr[0]
            var scope = cbArr[1]
            callback.call(scope)
        })

        window.requestAnimationFrame(_tick)
    }
    var _raf = window.requestAnimationFrame(_tick)

    var instance = {}

    instance.on = function (callback, scope) {
        var result = _callbacks.filter(cbArr => {
            return callback == cbArr[0] && scope == cbArr[1]
        })

        if(!result.length){
            _callbacks.push([callback, scope])
        }
    }

    instance.off = function (callback, scope) {
        for (var cbArr of _callbacks) {
            if(cbArr[0] == callback || cbArr[1] == scope){
                _callbacks.splice(_callbacks.indexOf(cbArr), 1)
            }
        }
    }

    return instance
})()

var canvas = document.createElement('canvas')
document.body.appendChild(canvas)
document.body.style.cssText = 'margin: 0; padding: 0'

canvas.width = window.innerWidth
canvas.height = window.innerHeight
var ctx = canvas.getContext('2d')

function preload (list) {
    var cdn = 'https://raw.githubusercontent.com/nullice/NViconsLib_Silhouette/master/Sample/sample_flat/64px/'
    var loaded = 0
    var total = list.length
    for (var i = 0; i < total; i++) {
        var img = new Image()
        img.src = cdn + list[i]
        imgList.push(img)
        img.onload = (e) => {
            loaded ++
            if(loaded == total){
                start()
            }
        }
    }
}

function start() {
    imgList.forEach((img, index) => {
        var row = index % 3 + 1
        var col = Math.floor(index / 3) + 1
        var bitmap = new DisplayObject(img)
        bitmap.x = row * 100
        bitmap.y = col * 100
        bitmap.vx = 4 * Math.random() - 2
        bitmap.vy = 4 * Math.random() - 2
        children.push(bitmap)
    })

    updateView()
}

var preloadList = [
   ...