CODEWITHSUNDEEP
javascripthtmlanimation
shemjay
shemjay

Reputation: 124

Animating a walk cycle using only Javascript and HTML

I'm working on a project for a friend and he wants a pure walk cycle with only HTML/JS (no CSS). So I've tried to work it out but the image only shows up on the webpage.

It doesn't move when I press any buttons or anything at all.

Please show me where I went wrong. I'm used to using HTML and CSS but this is my first JS so I don't know many terms.

How it appears in the website:

enter image description here

My code (HTML + JS):

<!DOCTYPE html>
<html>
    <head>
        <title>Javascript Animation</title>
    
        <script language="Javascript">
            <!-- 
            var walker = new Array(6);
            var curWalker = 0;
            var startWalking;
            for(var i=0; i<6; i++) {
                walker[i] = new Image();
                walker[i].src = "walker"+i+".png";
            }
    
            function marathon() {
                if(curWalker == 5) curWalker == 0;
                else ++curWalker;
                document.animation.src = walker[curWalker].src;
            }
            -->
        </script>
    </head>
    
    <body>
        <p><img src="walk1.png" name="animation"> </p>
    
        <form>
            <input type="button" name="walk" value="walk" onclick="startWalking=setInterval('marathon(),100);">
            <input type="button" name="stop" value="stop" onclick="clearsetInterval(startwalking);">
        </form>
    </body>
</html>

Upvotes: 1

Views: 1658

Answers (1)

Roberto Caboni
Roberto Caboni

Reputation: 7490

Here it is how I did it get to work (I had to build my simple images with Paint in order to use them in the animation):

<html>
    <head>
        <title>Javascript Animation</title>
    </head>

    <body>
        <p><img src="walker1.png" id="animation"> </p>

        <form>
            <input type="button" name="walk" value="walk" onclick="startWalking=setInterval(marathon,100);">
            <input type="button" name="stop" value="stop" onclick="clearInterval(startWalking);">
        </form>

        <script>
            var walker = [];
            var curWalker = 0;
            var startWalking;
            for(var i=0; i<6; i++) {
                walker[i] = new Image();
                walker[i].src = "walker"+i+".png";
            }

            function marathon() {
                if(curWalker == 5)
                    curWalker = 0;
                else
                    ++curWalker;
                document.getElementById("animation").src = walker[curWalker].src;
            }
        </script>
    </body>
</html>

I had to correct several typos/mistakes:

  1. Put the JS just before the </body> closing tag
  2. The first paramether of setInterval() must be a function name, so it must be marathon (you had 'marathon(); note that leading single quote)
  3. In order to get the image to be substituted it is better to access the element though Id instead of name attribute. So I changed the image to <img src="walker1.png" id="animation"> (animation is now the Id) and accessed it through document.getElementById("animation")

Now the animation starts... but stops to the last image instead of restarting to the first.

  1. That was because you used to check the curWalker variable instead of performing an assignment: I put curWalker = 0; instead of curWalker == 0;

Almost there. The loop is complete, but the stop button doesn't work. Two typos are preventing this to work:

  1. clearsetInterval doesn't exist. The function to be called is clearInterval
  2. Javascript is a case sensitive language. You use startwalking variable as a parameter, but the correct variable name is startWalking. So you have to correct the onclick event writing clearInterval(startWalking); instead of clearsetInterval(startwalking);

Your animation is now complete.

Note: as correctly noted by @Mike 'Pomax' Kamermans, nowadays you can avoid the use of onclick as you can attach events to the document (such as "click") by using document.addEventListener.

Upvotes: 2

Related Questions