JSFiddle - React, Tailwind, and code Playground
by Newman5
HTML
<html>
<body id='body'></body>
</html>
JavaScript
//establish base vars
var width = 100;
var height = 100;
var frameRate = 30;
var imageHost = 'http://www.udacity.com';
//not why set them as null
var canvas = null;
var context = null;
// create a list (called array in JS) of image files
var assets = ['/media/js/standalone/libs/gamedev_assets/robowalk/robowalk00.png',
'/media/js/standalone/libs/gamedev_assets/robowalk/robowalk01.png',
'/media/js/standalone/libs/gamedev_assets/robowalk/robowalk02.png',
'/media/js/standalone/libs/gamedev_assets/robowalk/robowalk03.png',
'/media/js/standalone/libs/gamedev_assets/robowalk/robowalk04.png',
'/media/js/standalone/libs/gamedev_assets/robowalk/robowalk05.png',
'/media/js/standalone/libs/gamedev_assets/robowalk/robowalk06.png',
'/media/js/standalone/libs/gamedev_assets/robowalk/robowalk07.png',
'/media/js/standalone/libs/gamedev_assets/robowalk/robowalk08.png',
'/media/js/standalone/libs/gamedev_assets/robowalk/robowalk09.png',
'/media/js/standalone/libs/gamedev_assets/robowalk/robowalk10.png',
'/media/js/standalone/libs/gamedev_assets/robowalk/robowalk11.png',
'/media/js/standalone/libs/gamedev_assets/robowalk/robowalk12.png',
'/media/js/standalone/libs/gamedev_assets/robowalk/robowalk13.png',
'/media/js/standalone/libs/gamedev_assets/robowalk/robowalk14.png',
'/media/js/standalone/libs/gamedev_assets/robowalk/robowalk15.png',
'/media/js/standalone/libs/gamedev_assets/robowalk/robowalk16.png',
'/media/js/standalone/libs/gamedev_assets/robowalk/robowalk17.png',
'/media/js/standalone/libs/gamedev_assets/robowalk/robowalk18.png'];
//creates an empty array for frames
var frames = [];
// empty ... placeholder var
var numberLoaded = 0;
//function that builds the frames array... and does the setInterval in a return'ed function.
// ? here
var imageOnLoad = function (img, index) {
return function () {
numberLoaded++;
if (numberLoaded === assets.length) {
setInterval(animate,...