Главная Новости

Создаем виртуального персонажа на javascript (версия 2)

Опубликовано: 01.09.2018

Здравствуйте, давайте создадим помощника с помощью ещё одного 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 = 'http://mnogoblog.ru/wp-content/uploads/2018/06/villis5.png'; </script>

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

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

rss