Getting Started Part Two
This is Part Two of the Getting Started Tutorial. You should complete those steps before continuing here!.
  1. Let's make the asteroid move and bounce off the borders of our Game Window.

  2. Make the asteroid move by adding the Direction, Velocity, and FrameSpeed tags so that your markup looks like below. Direction signifies an angle from 0 to 359 where 0 is to the page's right. Velocity signifies the number of pixels that the sprite moves each timer tick. FrameSpeed signifies how often the sprite's animation frame is incremented (in this case once every three timer ticks).

    <cc1:SpriteExtender ID="SpriteExtender1" runat="server" GameWindowControlId="GameWindowExtender1" TargetControlID="Image1" FrameCount="8" FramesPerRow="8" FrameWidth="35" FrameHeight="35" ImageUrl="images/asteroid.gif" Direction="0" Velocity="5" FrameSpeed="3" ></cc1:SpriteExtender>



  3. Add some JavaScript code to set up an event handler that fires whenever a sprite collides with the border of the game window, and to change the sprite's direction:

    <script language="javascript">

     

        var _gameWindow;

      

        // register our initialization function to execute

        Sys.Application.add_load(onPageLoad);

     

        function onPageLoad()

        {

            // set up our handler for border collisions

            _gameWindow = $find("GameWindowExtender1");

            _gameWindow.add_borderCollision(borderCollisionHandler);

        }

     

        function borderCollisionHandler(gw, args)

        {

            sprAsteroid = args;

            var direction = _gameWindow.get_BorderCollisionDirection(sprAsteroid) * 45;   

            var newDirRandomness = Math.floor(Math.random()*60);

            var newDirection = (direction + 150 + newDirRandomness) % 360;

            sprAsteroid.set_Direction(newDirection);

        }

    </script>

     


  4. Run your application. You should see the asteroid animated like below: