JSFiddle - React, Tailwind, and code Playground

by Caleb Evans

CSS

p {
    font-size: 20pt;
    margin-left: 50px;
}

JavaScript

// Start iterator variable at 0
var i = 0;
// Declare sx and sy variables
var sx, sy;
// Cache body element for efficiency
var $body = $('body');

// Define width and height of an image in the sprite
var sWidth = 40;
var sHeight = 45;

// Start timer
var timer = setInterval(function() {
	
	sx = i * sWidth;
	sy = 0;
	
    // Set sx and sy properties of image layer here
    
    // Display values for demonstration
	$body.html('<p>sx = ' + sx + '<br />sy = ' + sy + '</p>');
	
	if (i === 2) {
		// Restart iterator variable if it gets too big
		i = 0;
	} else {
		// Increment i until we get to 3
		i += 1;
	}
	
}, 500);