Спрайт для анимации помощника возьмем следующий:
В спрайте 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_ls.jpg';
</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 = 'http://www.peredacha24.ru/wp-content/uploads/2018/07/sozdaem-virtualnogo-personazha-na-javascript-versiya-2-1_ls.jpg';
</script>
Теперь при крике на виртуального помощника будет меняется анимация – помощник будет менять цвет.
