KitaitiMakoto/sprite.html

## sprite.html
<!doctype html>
<title>sprite</title>
<style>
  div {
    width: 64px;
    height: 81px;
    margin: 3em;
    background-repeat: no-repeat;
    background-image: url("senior-santa.png");
    background-size: auto 100%;
  }
</style>
<div></div>
<label>FPS<input name=fps type=number max=60 min=0 step=1 value=0></label>
<script>
 (function() {
     'use strict';

     // 128 x 162 x 57
     var div = document.querySelector('div');
     var input = document.querySelector('input[name="fps"]');
     var fps = Number(input.value);
     input.addEventListener('change', event => {
         fps = Number(event.target.value);
         if (fps !== 0) {
             step();
         }
     });
     var current = 0;

     var step = () => {
         if (fps === 0) {
             return;
         }
         div.style.backgroundPosition = -(33 + current) * 64 + 'px top';
         current = (current + 1) % 24
         setTimeout(step, 1000 / fps);
     };
 })();
</script>
	<!doctype html>
	<title>sprite</title>
	<style>
	div {
	width: 64px;
	height: 81px;
	margin: 3em;
	background-repeat: no-repeat;
	background-image: url("senior-santa.png");
	background-size: auto 100%;
	}
	</style>
	<div></div>
	<label>FPS<input name=fps type=number max=60 min=0 step=1 value=0></label>
	<script>
	(function() {
	'use strict';

	// 128 x 162 x 57
	var div = document.querySelector('div');
	var input = document.querySelector('input[name="fps"]');
	var fps = Number(input.value);
	input.addEventListener('change', event => {
	fps = Number(event.target.value);
	if (fps !== 0) {
	step();
	}
	});
	var current = 0;

	var step = () => {
	if (fps === 0) {
	return;
	}
	div.style.backgroundPosition = -(33 + current) * 64 + 'px top';
	current = (current + 1) % 24
	setTimeout(step, 1000 / fps);
	};
	})();
	</script>