1. Главная
2. TechGensu

I just made a Walling Animation using JavaScript. As you remember I made a walking animation in C (Walking Animation in C    • Walking Animation in C   .) If you to get the code click the link. Don’t forget to like, share, and subscribe.

Code: a=document.getElementById("a");
b=a.getContext("2d");
setInterval(c,1000/5);

x=0;
y=15;
ff=0;

function c(){

b.fillStyle="black";
b.fillRect(0,0,a.width,a.height);
b.beginPath();
b.strokeStyle="white";
b.moveTo(0,116);
b.lineTo(a.width,116);
b.stroke();

x+=y;
ff++;

if(ff==1){
f1();}
if(ff==2){
f2l();}
if(ff==3){
f2lb();}
if(ff==4){
fl();}
if(ff==5){
f2();}
if(ff==6){
f2b();
ff=0;}
}

function f1(){
b.beginPath();
b.strokeStyle="yellow";
b.arc(100+x,20,10,0,2*Math.PI);
b.moveTo(100+x,30);
b.lineTo(100+x,70);

//upper leg
b.moveTo(100+x,70);
b.lineTo(110+x,90);

//lower leg
b.moveTo(110+x,90);
b.lineTo(115+x,115);

//foot
b.moveTo(115+x,115);
b.lineTo(125+x,115);

//upper arm
b.moveTo(100+x,40);
b.lineTo(92+x,60);

//lower arm
b.moveTo(92+x,60);
b.lineTo(90+x,71);
b.stroke();

// opposite side
b.beginPath();
b.strokeStyle="red";
//upper leg
b.moveTo(100+x,70);
b.lineTo(95+x,95);

//lower leg
b.moveTo(95+x,95);
b.lineTo(90+x,115);

//foot
b.moveTo(90+x,115);
b.lineTo(100+x,115);

//upper arm
b.moveTo(100+x,40);
b.lineTo(108+x,55);

//lower arm
b.moveTo(108+x,55);
b.lineTo(118+x,67);



b.stroke();
}

function fl(){

b.beginPath();
b.strokeStyle="yellow";
b.arc(100+x,20,10,0,2*Math.PI);
b.moveTo(100+x,30);
b.lineTo(100+x,70);


// opposite side
//upper leg
b.moveTo(100+x,70);
b.lineTo(95+x,95);

//lower leg
b.moveTo(95+x,95);
b.lineTo(90+x,115);

//foot
b.moveTo(90+x,115);
b.lineTo(100+x,115);

//upper arm
b.moveTo(100+x,40);
b.lineTo(108+x,55);

//lower arm
b.moveTo(108+x,55);
b.lineTo(118+x,67);

b.stroke();


b.beginPath();
b.strokeStyle="red";
//upper leg
b.moveTo(100+x,70);
b.lineTo(110+x,90);

//lower leg
b.moveTo(110+x,90);
b.lineTo(115+x,115);

//foot
b.moveTo(115+x,115);
b.lineTo(125+x,115);

//upper arm
b.moveTo(100+x,40);
b.lineTo(92+x,60);

//lower arm
b.moveTo(92+x,60);
b.lineTo(90+x,71);
b.stroke();


}
function f2(){

b.beginPath();
b.strokeStyle="yellow";
b.arc(100+x,25,10,0,2*Math.PI);
b.moveTo(100+x,35);
b.lineTo(100+x,70);

//upper leg
b.moveTo(100+x,70);
b.lineTo(100+x,90);

//lower leg
b.moveTo(100+x,90);
b.lineTo(80+x,100);

//foot
b.moveTo(80+x,100);
b.lineTo(80+x,110);

//upper arm
b.moveTo(100+x,40);
b.lineTo(95+x,57);

//lower arm
b.moveTo(95+x,57);
b.lineTo(93+x,74);
b.stroke();

// opposite side
b.beginPath();
b.strokeStyle="red";
//upper leg
b.moveTo(100+x,70);
b.lineTo(100+x,95);

//lower leg
b.moveTo(100+x,95);
b.lineTo(100+x,115);

//foot
b.moveTo(100+x,115);
b.lineTo(110+x,115);

//upper arm
b.moveTo(100+x,40);
b.lineTo(105+x,58);

//lower arm
b.moveTo(105+x,58);
b.lineTo(115+x,70);

b.stroke();}

function f2l(){

b.beginPath();
b.strokeStyle="yellow";
b.arc(100+x,25,10,0,2*Math.PI);
b.moveTo(100+x,35);
b.lineTo(100+x,70);
//upper leg
b.moveTo(100+x,70);
b.lineTo(100+x,95);

//lower leg
b.moveTo(100+x,95);
b.lineTo(100+x,115);

//foot
b.moveTo(100+x,115);
b.lineTo(110+x,115);

//upper arm
b.moveTo(100+x,40);
b.lineTo(105+x,58);

//lower arm
b.moveTo(105+x,58);
b.lineTo(115+x,70);

b.stroke();
b.beginPath();
b.strokeStyle="red";
//upper leg
b.moveTo(100+x,70);
b.lineTo(100+x,90);
//lower leg
b.moveTo(100+x,90);
b.lineTo(80+x,100);
//foot
b.moveTo(80+x,100);
b.lineTo(80+x,110);

//upper arm
b.moveTo(100+x,40);
b.lineTo(95+x,57);
//lower arm
b.moveTo(95+x,57);
b.lineTo(93+x,74);
b.stroke();
}

function f2lb(){

b.beginPath();
b.strokeStyle="yellow";
b.arc(100+x,18,10,0,2*Math.PI);
b.moveTo(100+x,28);
b.lineTo(100+x,70);

//upper leg
b.moveTo(100+x,70);
b.lineTo(95+x,100);

//lower leg
b.moveTo(95+x,100);
b.lineTo(90+x,110);

//foot
b.moveTo(90+x,110);
b.lineTo(100+x,110);

//upper arm
b.moveTo(100+x,40);
b.lineTo(107+x,56);

//lower arm
b.moveTo(107+x,56);
b.lineTo(117+x,68);

b.stroke();
b.beginPath();
b.strokeStyle="red";
//upper leg
b.moveTo(100+x,70);
b.lineTo(105+x,85);

//lower leg
b.moveTo(105+x,85);
b.lineTo(85+x,95);

//foot
b.moveTo(85+x,95);
b.lineTo(80+x,105);

//upper arm
b.moveTo(100+x,40);
b.lineTo(94+x,58);

//lower arm
b.moveTo(94+x,58);
b.lineTo(92+x,75);
b.stroke();
}

function f2b(){
b.beginPath();
b.strokeStyle="yellow";
b.arc(100+x,18,10,0,2*Math.PI);
b.moveTo(100+x,28);
b.lineTo(100+x,70);
b.stroke();
b.beginPath();
b.strokeStyle="red";

//upper leg
b.moveTo(100+x,70);
b.lineTo(95+x,100);

//lower leg
b.moveTo(95+x,100);
b.lineTo(90+x,110);

//foot
b.moveTo(90+x,110);
b.lineTo(100+x,110);

//upper arm
b.moveTo(100+x,40);
b.lineTo(107+x,56);

//lower arm
b.moveTo(107+x,56);
b.lineTo(117+x,68);

b.stroke();
b.beginPath();
b.strokeStyle="yellow";
//upper leg
b.moveTo(100+x,70);
b.lineTo(105+x,85);

//lower leg
b.moveTo(105+x,85);
b.lineTo(85+x,95);

//foot
b.moveTo(85+x,95);
b.lineTo(80+x,105);

//upper arm
b.moveTo(100+x,40);
b.lineTo(94+x,58);

//lower arm
b.moveTo(94+x,58);
b.lineTo(92+x,75);
b.stroke();

}

play_arrow

23

6

THE CRANES ARE FLYING – Mikhail Kalatozov, Legleg Difirin,1957

play_arrow

701

27

Trill Guitar Sample ( Lil Peep, Bones, $uicideboy$, Xavier Wolf, XXXTentacion )

play_arrow

35

1

Mobile app for unlimited customers-Tally

play_arrow

687

6

Breaking news OPENER (Videohive.net)

play_arrow

317,659

3.6 тыс

#WorldChildrensDay

play_arrow

6,194

279

Powerpoint presentations the apple way

play_arrow

1,389

9

Horse Walk Green Screen Video

play_arrow

45

3

Como fazer uma base de Arranjos florais (Decoração), para entrada da noiva em um casamento