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
canvas.style.cssText = 'position: absolute'
var ctx = canvas.getContext('2d')

var tarX = window.innerWidth / 2
var tarY = window.innerHeight / 2
var ease = 0.1

var div = document.createElement('div')
div.innerHTML = '缓动系数: <input type="range" value="0.1" min="0" max="1" step="0.01" id="slider">ease=<span id="sliderValue">0.1</span>'
document.body.appendChild(div)
div.style.cssText = 'position:absolute'

document.getElementById('slider').addEventListener('input', e => {
    document.getElementById('sliderValue').innerText = e.target.value
    ease = +e.target.value
})

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]
       ...