JSFiddle - React, Tailwind, and code Playground

by Merlin Ye

JavaScript

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

        _count++
        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/aprilandjan/aprilandjan.github.io/master/img/'
    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() {
    var config = {
        frameRate: 6,
        frames: [
            {regX:52, regY:44, image:null},
            {regX:48, regY:40, image:null}
        ]
    }

    config.frames.forEach((frame, index) => {
        frame.image = imgList[index]
    })


    for (var i = 0; i < 2; i++) {
        var sp = new Sprite(config)
        sp.x = canvas.width >> 1
        sp.y...