Moving a snake across a page

In this math problem the student encounters in Fish Lake, two brothers set out for camp. One walks south and sees 8 snakes, 2 of which are rattlesnakes. The other walks north and sees 4 snakes, 1 of which is a rattlesnake. In a previous post, I showed how to create a gif of a snake moving. Now, I want that gif to move across the page. When it gets mostly across the page, I want it to stop because I want the player to be able to see the number of snakes on a page when deciding what fraction are rattlesnakes.

Here is the entire script to make the snake move. You can use it to make any gif move across any page. To have it move left to right instead of right to left, just change the first statement in the snakeMove function to be

 foo2.style.left = parseInt(foo2.style.left) - 1 + 'px';

Okay, so, here we go with the code …

First, you need jQuery because I am going to use both

$(document).ready(function ()

and

  $("#snake1").attr("src", "snake2.gif");

The link to jQuery must come before I use these functions. Also, there is a reason we use local jQuery but that is another post. In short, our games are used in many locations with unreliable Internet so having all of the libraries hosted locally is desirable. Okay, for the rest, read the comments in the code.

<script type=”text/javascript” src=”../javascript/jquery-1.11.0.min.js”></script>
<script type=”text/javascript”>

// WRAPS ALL CODE IN A FUNCTION THAT WILL ONLY EXECUTE WHEN THE DOCUMENT IS READY ;
// THIS PREVENTS ERRORS WHEN A FUNCTION MIGHT BE CALLED ON AN ELEMENT THAT IS NOT YET LOADED IN THE PAGE;
 
    $(document).ready(function () {

        // SNAKE ANIMATION ;

  // INITIALIZES A VARIABLE THAT WILL BE AVAILABLE TO ALL FUNCTIONS WITHIN THE DOCUMENT READY SCOPE ;
        var foo2 ; 

     // FUNCTION THAT MOVES THE SNAKE ;
      
        function snakeMove() {
           // parseInt is a lovely function that strips everything but integer data ; 
           // Below, we get the left position of the foo2 object and add 1px to it ;
             
            foo2.style.left = parseInt(foo2.style.left) + 1 + 'px';

            // CREATES A VARIABLE LOCAL TO THIS FUNCTION AND ;
            // GIVES IT THE VALUE OF THE CURRENT LEFT POSITION ;
            var bob2 = parseInt(foo2.style.left);

            //STOPS THE SNAKE MOVING ONCE IT IS 700PX FROM THE LEFT OF THE SCREEN ;
            // THE TIMEOUT FUNCTION DOES NOT EXECUTE THEN ;
  // THE IMAGE IS CHANGED FROM A MOVING GIF TO A SINGLE IMAGE BECAUSE THE SNAKE IS NOW STOPPED ;
            if (bob2 > 700) {
                $("#snake1").attr("src", "snake2.gif");
                return;

            }
            
            // IF LESS THAN 700 PX FROM THE LEFT, THE FUNCTION CALLS ITSELF AFTER 20 MILLISECONDS ;
            // THE SNAKE WILL BE MOVED 1 PX AND THEN THE WHOLE THING GOES AROUND AGAIN ;
            setTimeout(function () {

                snakeMove();
            }
                    , 20); // call snakeMove in 20msec
        }

        // THIS IS THE FUNCTION THAT STARTS IT OFF;
        // ASSIGN ANY ELEMENT YOU WANT MOVED HERE BY USING THE ID ;
        function initSnake() {
            foo2 = document.getElementById('snake1'); // get the "foo2" object
            foo2.style.left = '200px'; // set its initial position to 0px
            snakeMove(); // start animating
        }
        // END SNAKE ANIMATION ;

        // THIS CALLS THE INITSNAKE FUNCTION. IT WILL BE EXECUTED WHEN THE DOCUMENT IS READY;
        initSnake();

    });


</script>

So, there you have it. How to move a gif across a screen. Next post, I’ll talk about the css and html involved . This is just one part of one math problem in the Fish Lake game. You can buy the game on our website here:

or on Amazon.