JSFiddle - React, Tailwind, and code Playground

by Merlin Ye

HTML

<div>
    <p>速度</p>
    <label>vx<input value="0" id="inputVx" disabled></label>
    <label>vy<input value="0" id="inputVy" disabled></label>
</div>
<div>
    <p>加速度</p>
    <label>ax<input value="1" id="inputAx"></label>
    <label>ay<input value="0" id="inputAy"></label>
</div>
<div>
<button id='reset'>RESET</button>
</div>
</div>

CSS

canvas {
  margin-top: 10px;
  margin-left: 10px;
  border: 1px solid black;
}

JavaScript

var input = {
        vx: document.getElementById('inputVx'),
        vy: document.getElementById('inputVy'),
        ax: document.getElementById('inputAx'),
        ay: document.getElementById('inputAy')
    }

    var velocity = {
        vx: 0,
        vy: 0,
        ax: 1,
        ay: 0
    }

    function onInputChange (e) {
        var el = e.currentTarget
        var name = el.name
        velocity[name] = +el.value
    }

    for(var key in input) {
        input[key].name = key
        input[key].addEventListener('input', onInputChange)
    }
    
    function updateInputs () {
      input.vx.value = velocity.vx
      input.vy.value = velocity.vy
    }
    
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 = 500
canvas.height = 500
var ctx = canvas.getContext('2d')
var bird

function preload (list) {
    var cdn = 'https://raw.githubusercontent.com/aprilandjan/aprilandjan.github.io/master/img/'
    var loaded = 0
    var total = list.length
   ...