Facebook
From 123, 3 Years ago, written in Plain Text.
Embed
Download Paste or View Raw
Hits: 234
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
  5. <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
  6.  
  7. <style>
  8.  
  9.     canvas{border:1px solid red;}
  10. </style>
  11.  
  12. <script>
  13.     $(function(){
  14.  
  15.         var canvas=document.getElementById("canvas");
  16.         var c=canvas.getContext("2d");
  17.  
  18.                 //draw labirynt
  19.                 var xZero=0;
  20.         var yZero=0;
  21.                 var cW = canvas.width;
  22.         var cH = canvas.height;
  23.                 var count = 20;
  24.                 var xW =cW/count;
  25.        
  26.                 var xH =cH/count;
  27.                 var halfH = cH/2;
  28.             for(i=0; i<count; i++){
  29.                        
  30.                         c.beginPath();
  31.             xZero += xW;
  32.             yZero += xH;
  33.                         var rand = Math.floor(Math.random() * 400) + yZero  
  34.             cH -= xH;
  35.             c.moveTo(xZero, yZero);
  36.             c.lineTo(xZero, rand);
  37.             c.stroke();
  38.                         c.moveTo(xZero, rand + 20);
  39.             c.lineTo(xZero, cH);
  40.             c.stroke();
  41.            
  42.             }
  43.         // set the dynamic outside the loop
  44.                
  45.                  
  46.         var dynamic = 10;
  47.         var speedX = 5;
  48.         var speedY = 5;
  49.         var x = 0;
  50.         var y = 0;
  51.  
  52.          //loop function
  53.         function loop(){
  54.  
  55.             // change dynamic
  56.            x += speedX;
  57.            y += speedY;
  58.  
  59.             // stop the the animation if it runs out-of-canvas
  60.             if (x>canvas.width || y>canvas.height){
  61.                 speedX = speedX * (-1);
  62.                 speedY = speedY * (-1);
  63.             }
  64.  
  65.            // clear the canvas for this loop's animation
  66.           // c.clearRect(0,0,canvas.width,canvas.height);
  67.           // c.fillStyle = '#87CEEB';
  68.  
  69.            // draw
  70.           // c.beginPath();
  71.           // c.arc(x,y, 10, 0, Math.PI*2, false);
  72.           // c.fill();
  73.            
  74.             //draw labirynt
  75.            
  76.          
  77.         }
  78.         var myTimer=setInterval(loop,20);      
  79.  
  80.     }); // end $(function(){});
  81. </script>
  82.  
  83. </head>
  84.  
  85. <body>
  86.     <canvas id="canvas" width=1400 height=600></canvas>
  87. </body>
  88. </html>