Здравствуйте, давайте создадим помощника с помощью ещё одного javascript кода.

Скачать исходники для статьи можно ниже

Спрайт для анимации помощника возьмем следующий:

В спрайте 28 изображений (тайлов). Размер спрайта 1995 × 1848, соответственно размер тайла ширина 1995/7 = 285 и высота 1848/4 = 462 – зададим эти цифры в коде ниже.

Код анимации:

<canvas id="canvas" width="500" height="500"></canvas>

<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var image = new Image();

var drawTile = function(x, y, tile, width, height) {
    context.drawImage(image, (tile % 7) * width, Math.floor(tile / 7) * height, width, height, x, y, width, height);
};

image.onload = function() {
    // draw all 28 tiles:
    var i = 0;
    setInterval(function() {
        context.clearRect(0,0,500,500);
        drawTile(0, 0, i, 285, 462);
        i++;
        if (i > 27) i = 0;
    }, 85);
}
image.src = 'http://1jurnal.ru/wp-content/uploads/2018/06/villis2.png';
</script>

Теперь давайте добавим клики по нашему виртуальному помощнику и при каждом новом клике зададим какие картинки (тайлы) спрайта необходимо показать:

Спрайт поменяем на следующий:

Каждые 14 изображений (тайлов) меняют цвет.

В спрайте 56 изображений (тайлов). Размер спрайта 1985 × 3656, соответственно размер тайла ширина 1985/7 = 285 и высота 3656/8 = 456 – зададим эти цифры в коде ниже.

<div id='klik' onclick='klik()'>
<canvas id="canvas" width="500" height="500"></canvas>
</div>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var image = new Image();

var drawTile = function(x, y, tile, width, height) {
    context.drawImage(image, (tile % 7) * width, Math.floor(tile / 7) * height, width, height, x, y, width, height);
};
var i=0;
var t=13;
var k = 1;

function klik(){
			    
			if (k==1) {
			  i=14;
			  t=27;
			  }
		    	if (k==2){
		    	  i=28;
		    	  t=41;
		    	  }
			if (k==3) {
			  i=42;
			  t=55;
			  }
			if (k==4) {
			  i=0;
			  t=13;
			  k = 0;
			  }
			  k = k + 1;
		}

image.onload = function() {
    // draw all 12 tiles:
    setInterval(function() {
        context.clearRect(0,0,500,500);
        drawTile(0, 0, i, 285, 456);
        i++;
        if (i > t) {
            i = t;
            
}
    }, 85);
}
image.src = '/wp-content/uploads/2018/06/villis5.png';

</script>

Теперь при крике на виртуального помощника будет меняется анимация – помощник будет менять цвет.

На этом всё! Красивых вам сайтов!