This week only. Pastebin PRO Accounts Christmas Special! Don't miss out!Want more features on Pastebin? Sign Up, it's FREE!
Public Pastes
Guest

Untitled

By: a guest on Dec 11th, 2014  |  syntax: None  |  size: 4.06 KB  |  views: 163  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1.  
  2. <script>
  3. window.addEventListener("load", function () {
  4.   var canvasElement = document.createElement("canvas");
  5.  
  6.   canvasElement.width = 500;
  7.   canvasElement.height = 500;
  8.  
  9.   canvasElement.style.display = "block";
  10.   canvasElement.style.margin = "auto";
  11.  
  12.   document.body.appendChild(canvasElement);
  13.  
  14.   var canvasContext = canvasElement.getContext("2d");
  15.  
  16.   var circle = {x: 0, y: 0, vX: 0, vY: 0, radius: 32};
  17.   var lines = [{x: 240, y: 100, x2: 350, y2: 350},
  18.                 {x: 260, y: 100, x2: 150, y2: 350}];
  19.   var mouse = {x: 0, y: 0};
  20.  
  21.   window.requestAnimationFrame(loop);
  22.  
  23.   document.addEventListener("mousemove", function () {
  24.                 var canvasBound = canvasElement.getBoundingClientRect();
  25.                                
  26.                 mouse.x = event.clientX - canvasBound.left;
  27.     mouse.y = event.clientY - canvasBound.top;
  28.   });
  29.  
  30.   var keys = [];
  31.  
  32.   document.addEventListener("keydown", function () {
  33.     keys[event.keyCode] = true;
  34.   });
  35.  
  36.   document.addEventListener("keyup", function () {
  37.     keys[event.keyCode] = false;
  38.   });
  39.  
  40.   for (var i = 0; i < lines.length; i++) {
  41.     var dX = lines[i].x2 - lines[i].x, dY = lines[i].y2 - lines[i].y;
  42.     var length = Math.sqrt(dX * dX + dY * dY);
  43.    
  44.     lines[i].vX = dX / length;
  45.     lines[i].vY = dY / length;
  46.    
  47.     lines[i].nX = -dY / length;
  48.     lines[i].nY = dX / length;
  49.   }
  50.  
  51.   function loop() {
  52.     if (keys[37]) {
  53.       circle.vX -= 0.2;
  54.     }
  55.    
  56.     if (keys[38]) {
  57.       circle.vY -= 0.2;
  58.     }
  59.    
  60.     if (keys[39]) {
  61.       circle.vX += 0.2;
  62.     }
  63.    
  64.     if (keys[40]) {
  65.       circle.vY += 0.2;
  66.     }
  67.    
  68.     circle.vX *= 0.96;
  69.     circle.vY *= 0.96;
  70.    
  71.     circle.x += circle.vX;
  72.     circle.y += circle.vY;
  73.    
  74.     for (var i = 0; i < lines.length; i++)
  75.       collide(circle, lines[i]);
  76.    
  77.     canvasContext.clearRect(0, 0, 500, 500);
  78.    
  79.     canvasContext.strokeStyle = "blue";
  80.     for (var i = 0; i < lines.length; i++) {
  81.       canvasContext.strokeStyle = "blue";
  82.       canvasContext.beginPath();
  83.         canvasContext.moveTo(lines[i].x, lines[i].y);
  84.         canvasContext.lineTo(lines[i].x2, lines[i].y2);
  85.       canvasContext.closePath();
  86.       canvasContext.stroke();
  87.      
  88.       canvasContext.strokeStyle = "green";
  89.       canvasContext.beginPath();
  90.         canvasContext.moveTo(lines[i].x, lines[i].y);
  91.         canvasContext.lineTo(lines[i].x + lines[i].nX * 20, lines[i].y + lines[i].nY * 20);
  92.       canvasContext.closePath();
  93.       canvasContext.stroke();
  94.     }
  95.    
  96.     canvasContext.fillStyle = "red";
  97.     canvasContext.beginPath();
  98.       canvasContext.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI, false);
  99.     canvasContext.closePath();
  100.     canvasContext.fill();
  101.    
  102.     window.requestAnimationFrame(loop);
  103.   }
  104.  
  105.   function collide(circle, line) {
  106.     var side = Math.sign((line.x2 - line.x) * (circle.y - line.y) - (line.y2 - line.y) * (circle.x - line.x));
  107.     var dist = Math.abs((circle.x - line.x) * line.nX + (circle.y - line.y) * line.nY);
  108.     var s1 = Math.sign((circle.x - line.x) * line.vX + (circle.y - line.y) * line.vY);
  109.     var s2 = Math.sign((circle.x - line.x2) * line.vX + (circle.y - line.y2) * line.vY);
  110.    
  111.     if (dist < circle.radius) {
  112.       if (s1 != s2) {
  113.         circle.x += side * line.nX * (circle.radius - dist);
  114.         circle.y += side * line.nY * (circle.radius - dist);
  115.       }
  116.     }
  117.    
  118.     if (s1 == s2) {
  119.       var nDist, cX, cY;
  120.       if (s1 === 1) {
  121.         cX = line.x2 - circle.x;
  122.         cY = line.y2 - circle.y;
  123.         nDist = Math.sqrt(cX * cX + cY * cY);
  124.        
  125.         if (nDist < circle.radius) {
  126.           circle.x += cX * (nDist - circle.radius) / nDist;
  127.           circle.y += cY * (nDist - circle.radius) / nDist;
  128.         }
  129.       } else if (s2 === -1) {
  130.         cX = line.x - circle.x;
  131.         cY = line.y - circle.y;
  132.         nDist = Math.sqrt(cX * cX + cY * cY);
  133.        
  134.         if (nDist < circle.radius) {
  135.           circle.x += cX * (nDist - circle.radius) / nDist;
  136.           circle.y += cY * (nDist - circle.radius) / nDist;
  137.         }
  138.       }
  139.     }
  140.   }
  141. });
  142. </script>
clone this paste RAW Paste Data