var script = document.createElement('script');
script.src = 'http://code.jquery.com/jquery-1.11.0.min.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
(function(window, document, undefined) { 
    window.onload = init;
    function init() {
        var canvas = document.getElementById("mapcanvas");
        var c = canvas.getContext("2d");
        var myTimer;
    
        // set the dynamic outside the loop
        var dynamic = 10;
    
        //loop function
        function loop() {
    
            // change dynamic
            //dynamic = dynamic * 1.1;
            x = dynamic;
            y = dynamic;
            
            //if we've reached the end, change direction
            
        
            // stop the the animation if it runs out-of-canvas
            if (x > canvas.width || y > canvas.height) {
                //c.clearRect(0, 0, canvas.width, canvas.height);
                clearInterval(myTimer);
            }
    
            // clear the canvas for this loop's animation
            //c.clearRect(0, 0, canvas.width, canvas.height);
            c.fillStyle = '#87CEEB';
    
            // draw
            c.beginPath();
            c.fillRect(x, y, 10, 10);
            c.fill();
        }
    
        $("#startbtn").click(function(){ dynamic=10; myTimer=setInterval(loop,20); });
    }
})(window, document, undefined);

@@ -406,21 +406,49 @@
 yTimer;%0A
+        var blockSize = 10;%0A
     %0A
-
         
@@ -499,21 +499,38 @@
 var 
-dynamic = 10;
+it1 = -1;%0A        var it2 = -1
 %0A   
@@ -577,24 +577,121 @@
 on loop() %7B%0A
+            it1 = it1+1%0A            if(it1 %25 96 == 0)%7B%0A                it2 = it2+1%0A            %7D%0A
     %0A       
@@ -768,23 +768,29 @@
     x = 
-dynamic
+it1*blockSize
 ;%0A      
@@ -799,23 +799,29 @@
     y = 
-dynamic
+it2*blockSize
 ;%0A      
@@ -989,45 +989,16 @@
 if (
-x %3E canvas.width %7C%7C y %3E canvas.height
+it2 %3E 54
 ) %7B%0A

Update script.js