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

Анимировать персонажа будем с помощью спрайтов, которые можно бесплатно скачать например со следующих сайтов:
“Spriters-resource.com”
“Gameart2d.com”
“OpenGameArt.org”
“Opengamegraphics.com”
“Kenney.nl”
“Reinerstilesets.de”
Я буду использовать следующий спрайт:

Скачать спрайт можно по следующей ссылке.
Спрайт у нас следующих размеров: width=3376 height=1609 (понадобится для javascript кода).

Также можно добавить фон, например следующую картинку:

Скачать данную картинку можно по следующей ссылке.
Теперь перейдем к анимации персонажа с помощью javascript.
При клике на анимацию, она будем случайным образом меняться на другую.

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

<div id='klik' >
В данной анимации мы будем использовать не весь спрайт, а только вторую и третью строчку с изображениями, поэтому в параметрах:

var trackRight = 1;

var trackLeft = 2;

указываем 1 и 2, если бы мы захотели использовать первую и вторую строчку, то нужно было бы указать 0 и 1.

В параметрах:

var canvasWidth = 300;

var canvasHeight = 400;

указываем размер окошка, в котором будет показана наша анимация.

В параметрах:

var spriteWidth = 3376;

var spriteHeight = 1609;

указываем ширину и высоту спрайта.

В параметрах:

var rows = 4;

var cols = 15;

указываем количество строк и столбцов в спрайте.

В параметре:

var speed = 10;

указываем на сколько будет смещаться персонаж в анимации, можно поставить, например, значение равное 0.1, тогда персонаж будет стоять на месте.

Также можно добавить кнопки к нашей анимации, а клики убрать:
 
 
, тогда код будет следующим:
 
<canvas id='canvas' style='background-image: url(https://capitalwm.ru/wp-content/uploads/2020/01/sozdaem-virtualnogo-personazha-dlya-sajta-na-javascript-1.jpg)'></canvas><br <button >
Как вставить данную анимацию к себе на wordpress сайт?

Достаточно просто, например, можно вставить её в виджет “Текст”.

Для этого заходим в админку wordpress, в левом меню выбираем пункт “Внешний вид”, подпункт “Виджеты”:
 
 
Находим виджет “HTML-код”:
 
 
, перетаскиваем его в нужный сайдбар (боковую колонку) и вствляем код нашей анимации (если вы используете видет “Текст”, то вствляйте код во вкладке “Текст”):
 
 
Если у вас старая версия wordpress и виджет “HTML-код” отсутствует, то находим виджет “Текст” и вставляем код в него:
 
 
На этом всё красивых вам виртуальных помощников!