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

Здравствуйте, давайте создадим простого помощника на сайт (персонажа на сайт, инфа для сайта), кликая по которому будет меняться его анимация – для этого воспользуемся javascript кодом.

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

Анимировать персонажа будем с помощью спрайтов, которые можно бесплатно скачать например со следующих сайтов:

“Spriters-resource.com”
“Gameart2d.com”
“OpenGameArt.org”
“Opengamegraphics.com”
“Kenney.nl”
“Reinerstilesets.de”

Я буду использовать следующий спрайт:

Скачать спрайт можно по следующей ссылке.

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

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

Скачать данную картинку можно по следующей ссылке.

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

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

<div id='klik' onclick='klik()'>
<canvas id='canvas' style='background-image: url(/wp-content/uploads/2018/06/background1.jpg)'></canvas><br />
</div>	
		
		<script>
		    var k = 0;
		
			var canvasWidth = 300; 
			var canvasHeight = 400;
			
			var spriteWidth = 3376; 
			var spriteHeight = 1609; 
			
			var rows = 4; 
			var cols = 15; 
			
			var trackRight = 1; 
			var trackLeft = 2; 
			
			var width = spriteWidth/cols; 
			var height = spriteHeight/rows; 
			
			var curFrame = 0; 
			var frameCount = 8; 
			
			var x=0;
			var y=0; 
			
			var srcX; 
			var srcY; 
			
			var left =  false;
			var right =  true;
			
			var speed = 10; 
			
			var canvas = document.getElementById('canvas');
			canvas.width = canvasWidth;
			canvas.height = canvasHeight; 
			
			var ctx = canvas.getContext("2d");
			
			var character = new Image(); 
			character.src = "/wp-content/uploads/2018/06/girl.png";
			
			function updateFrame(){
				curFrame = ++curFrame % frameCount; 				
				srcX = curFrame * width; 
				ctx.clearRect(x,y,width,height);	
				
				if(left && x>0){
					srcY = trackLeft * height; 
					x-=speed; 
				}
				if(right && x<canvasWidth-width){
					srcY = trackRight * height; 
					x+=speed; 
				}
			}
			
			function draw(){
			    if (left!=right) {
				updateFrame();
			} 
				ctx.drawImage(character,srcX,srcY,width,height,x,y,width,height);
			}
			
			function klik(){
			    
			    if (k==0) {
			    left = true;
			    right = false;
			    }
		    	if (k==1){
		    	left = false;
		    	right = false;
		    	}
			   	if (k==2) {
			    left = false;
			    right = true;
			    k = -1;
			   	}
			    k = k + 1;
			
			}
		
			
			setInterval(draw,100);
			
		</script>

В данной анимации мы будем использовать не весь спрайт, а только вторую и третью строчку с изображениями, поэтому в параметрах:
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(/wp-content/uploads/2018/06/background1.jpg)'></canvas><br />
   

    	<button onclick='moveLeft()'>Left</button>
		<button onclick='moveRight()'>Right</button>
		<button onclick='moveStop()'>Stop</button>
         
        <script>
            var k = 0;
         
            var canvasWidth = 300; 
            var canvasHeight = 400;
             
            var spriteWidth = 3376; 
            var spriteHeight = 1609; 
             
            var rows = 4; 
            var cols = 15; 
             
            var trackRight = 1; 
            var trackLeft = 2; 
             
            var width = spriteWidth/cols; 
            var height = spriteHeight/rows; 
             
            var curFrame = 0; 
            var frameCount = 8; 
             
            var x=0;
            var y=0; 
             
            var srcX; 
            var srcY; 
             
            var left =  false;
            var right =  true;
             
            var speed = 10; 
             
            var canvas = document.getElementById('canvas');
            canvas.width = canvasWidth;
            canvas.height = canvasHeight; 
             
            var ctx = canvas.getContext("2d");
             
            var character = new Image(); 
            character.src = "/wp-content/uploads/2018/06/girl.png";
             
            function updateFrame(){
                curFrame = ++curFrame % frameCount;                 
                srcX = curFrame * width; 
                ctx.clearRect(x,y,width,height);    
                 
                if(left && x>0){
                    srcY = trackLeft * height; 
                    x-=speed; 
                }
                if(right && x<canvasWidth-width){
                    srcY = trackRight * height; 
                    x+=speed; 
                }
            }
             
            function draw(){
                if (left!=right) {
                updateFrame();
            } 
                ctx.drawImage(character,srcX,srcY,width,height,x,y,width,height);
            }
             
            function moveLeft(){
				left = true; 
				right = false; 
			}
			
			function moveRight(){
				left = false;
				right = true; 
			}
			
			function moveStop(){
				left = false;
				right = false; 
			}
         
             
            setInterval(draw,100);
             
        </script>

Как вставить данную анимацию к себе на wordpress сайт?

Достаточно просто, например, можно вставить её в виджет “Текст”.
Для этого заходим в админку wordpress, в левом меню выбираем пункт “Внешний вид”, подпункт “Виджеты”:

Находим виджет “HTML-код”:

, перетаскиваем его в нужный сайдбар (боковую колонку) и вствляем код нашей анимации (если вы используете видет “Текст”, то вствляйте код во вкладке “Текст”):