style body min height 600px Right facing snowman right right eye snowman right button transform translate 4px snowman right left eye display none snowman right mouth transform translate 5px Left facing snowman left right eye display none snowman left left eye snowman left button transform translate 4px snowman left mouth transform translate 5px Rear facing snowman up eye snowman up button snowman up mouth display none style Code below is for presentation only not part of the tutorial br br br button id move down Move Down button br button id move right Move Right button br button id move left Move Left button br button id move up Move Up button br script function Snowman id topPos leftPos if id throw Cannot create a snowman without an ID this settings distance 10 duration 0 1s this move function move direction distance this settings distance duration this settings duration var element this element var topOrLeft direction left direction right left top if direction up direction left distance 1 var elStyle window getComputedStyle element var value elStyle getPropertyValue topOrLeft replace px var destination Number value distance px var oldLoc elStyle getPropertyValue left elStyle getPropertyValue top var newLoc topOrLeft left destination oldLoc 1 oldLoc 0 destination this stylesheet innerHTML this stylesheet innerHTML replace s moved n s this stylesheet innerHTML this element id moved transition all duration linear webkit transition all duration linear moz transition all duration linear o transition all duration linear top newLoc 1 left newLoc 0 element classList remove down right left up element classList add moved direction this element document createElementNS http www w3 org 2000 svg svg this element id id this element classList add snowman this element style height 30px this element style width 30px this element innerHTML circle class head cx 15 cy 7 r 6 stroke black stroke width 1 fill white circle class right eye cx 13 cy 5 r 1 fill black circle class left eye cx 17 cy 5 r 1 fill black circle class mouth cx 15 cy 8 r 1 fill black circle class torso cx 15 cy 21 r 8 stroke black stroke width 1 fill white circle class button cx 15 cy 17 r 1 fill black circle class button cx 15 cy 21 r 1 fill black circle class button cx 15 cy 25 r 1 fill black document body appendChild this element this stylesheet document createElement style this stylesheet id id movement if typeof topPos number topPos px if typeof leftPos number leftPos px this stylesheet innerHTML id position absolute top topPos left leftPos document head appendChild this stylesheet var snowman new Snowman character 50 200 var snowman2 new Snowman character two 10 10 Code below for controlling a specific snowman Grab the buttons var downButton document getElementById move down var rightButton document getElementById move right var leftButton document getElementById move left var upButton document getElementById move up downButton onclick function snowman move down rightButton onclick function snowman move right leftButton onclick function snowman move left upButton onclick function snowman move up console log ready script
linear top newLoc 1 left newLoc 0 element classList remove down right left up element classList add moved direction this element document createElementNS http www w3 org 2000 svg svg this element id id this element classList add snowman this element style height 30px this element style width 30px this element innerHTML circle class head cx 15 cy 7 r 6 stroke black stroke width 1 fill white circle class right eye cx 13 cy 5 r 1 fill black circle class left eye cx 17 cy 5 r 1 fill black circle class mouth cx 15 cy 8 r 1 fill black circle class torso cx 15 cy 21 r 8 stroke black stroke width 1 fill white circle class button cx 15 cy 17 r 1 fill black circle class button cx 15 cy 21 r 1 fill black circle class button cx 15 cy 25 r 1 fill black document body appendChild this element this stylesheet document createElement style this stylesheet id id movement if typeof topPos number topPos px if typeof leftPos number leftPos px this stylesheet innerHTML id position absolute top topPos left leftPos document head appendChild this stylesheet var snowman new Snowman character 50 200 var snowman2 new Snowman character two 10 10 Code below for controlling a specific snowman Grab the buttons var downButton document getElementById move down var rightButton document getElementById move right var leftButton document getElementById move left var upButton document getElementById move up downButton onclick function snowman move down rightButton onclick function snowman move right leftButton onclick function snowman move left upButton onclick function snowman move up console log ready script