Как сделать спрайтовую анимацию,чтобы можно было разобраться и удобно настроить (ширину картинки и количество слайдов)? И еще нужно сделать чтобы персонаж двигался вперед. Есть такой код:
https://jsfiddle.net/jfhp8o21/
var styles = {};
styles.width = '112px';
styles.height = '150px';
spriteAnimation('mk', 'https://inter-net.pro/images/css/sprite-marsch.png', styles);
function spriteAnimation(elementId, imgName, styles) {
var img = document.createElement('img');
var offset = 0;
img.onload = function() {
var element = document.getElementById(elementId);
element.style.width = styles.width;
element.style.height = styles.height;
element.style.background = "url('" + imgName + "') " + offset + "px 50%";
var i = 0;
interval = setInterval(function() {
if (offset < img.width) {
i = i + 18;
} else {
i = 0;
}
offset = 8.8 * i;
element.style.background = "url('" + imgName + "') " + offset + "px 50%";
}, 1000 / 6)
}
img.src = imgName;
}
<div id="mk"></div>
,но он очень странно работает.