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.67 KB  |  views: 5  |  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.   document.body.appendChild(canvasElement);
  10.  
  11.   var canvasContext = canvasElement.getContext("2d");
  12.  
  13.   var circle = {x: 0, y: 0, vX: 0, vY: 0, radius: 32};
  14.   var rectangles = [{x: 200, y: 120, width: 32, height: 32},
  15.                     {x: 200, y: 162, width: 32, height: 32},
  16.                     {x: 200, y: 204, width: 32, height: 32},
  17.                     {x: 200, y: 78, width: 32, height: 32}];
  18.   var mouse = {x: 0, y: 0};
  19.  
  20.   window.requestAnimationFrame(loop);
  21.  
  22.   document.addEventListener("mousemove", function () {
  23.                 var canvasBound = canvasElement.getBoundingClientRect();
  24.                                
  25.                 mouse.x = event.clientX - canvasBound.left;
  26.     mouse.y = event.clientY - canvasBound.top;
  27.   });
  28.  
  29.   var keys = [];
  30.  
  31.   document.addEventListener("keydown", function () {
  32.     keys[event.keyCode] = true;
  33.   });
  34.  
  35.   document.addEventListener("keyup", function () {
  36.     keys[event.keyCode] = false;
  37.   });
  38.  
  39.   function loop() {
  40.     if (keys[37]) {
  41.       circle.vX -= 0.2;
  42.     }
  43.    
  44.     if (keys[38]) {
  45.       circle.vY -= 0.2;
  46.     }
  47.    
  48.     if (keys[39]) {
  49.       circle.vX += 0.2;
  50.     }
  51.    
  52.     if (keys[40]) {
  53.       circle.vY += 0.2;
  54.     }
  55.    
  56.     circle.x += circle.vX;
  57.     circle.y += circle.vY;
  58.    
  59.     circle.vX *= 0.96;
  60.     circle.vY *= 0.96;
  61.    
  62.     for (var i = 0; i < rectangles.length; i++)
  63.       collide(circle, rectangles[i]);
  64.    
  65.     canvasContext.clearRect(0, 0, 500, 500);
  66.    
  67.     canvasContext.fillStyle = "blue";
  68.     for (var i = 0; i < rectangles.length; i++)
  69.       canvasContext.fillRect(rectangles[i].x, rectangles[i].y, rectangles[i].width, rectangles[i].height);
  70.    
  71.     canvasContext.fillStyle = "red";
  72.     canvasContext.beginPath();
  73.       canvasContext.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI, false);
  74.     canvasContext.closePath();
  75.     canvasContext.fill();
  76.    
  77.     window.requestAnimationFrame(loop);
  78.   }
  79.  
  80.   function collide(circle, rectangle) {
  81.     var cols = [];
  82.    
  83.     cols[0] = circle.x < rectangle.x; //leftOfCA
  84.     cols[1] = circle.x >= rectangle.x + rectangle.width; //rightOfCB
  85.    
  86.     cols[2] = circle.y < rectangle.y; //topOfCA
  87.     cols[3] = circle.y >= rectangle.y + rectangle.height; //bottomOfCB
  88.    
  89.     cols[4] = (circle.x + circle.radius) < rectangle.x; //leftOfA
  90.     cols[5] = (circle.x - circle.radius) >= rectangle.x + rectangle.width; //rightOfB
  91.    
  92.     cols[6] = (circle.y + circle.radius) < rectangle.y; //topOfA
  93.     cols[7] = (circle.y - circle.radius) >= rectangle.y + rectangle.height; //bottomOfB
  94.    
  95.     if (cols[0] && !(cols[1] || cols[2] || cols[3] || cols[4] || cols[5] || cols[6] || cols[7])) {
  96.       circle.x = rectangle.x - circle.radius;
  97.       circle.vX = 0;
  98.       return;
  99.     }
  100.    
  101.     if (cols[1] && !(cols[0] || cols[2] || cols[3] || cols[4] || cols[5] || cols[6] || cols[7])) {
  102.       circle.x = rectangle.x + rectangle.width + circle.radius;
  103.       circle.vX = 0;
  104.       return;
  105.     }
  106.    
  107.     if (cols[2] && !(cols[1] || cols[0] || cols[3] || cols[4] || cols[5] || cols[6] || cols[7])) {
  108.       circle.y = rectangle.y - circle.radius;
  109.       circle.vY = 0;
  110.       return;
  111.     }
  112.    
  113.     if (cols[3] && !(cols[1] || cols[2] || cols[0] || cols[4] || cols[5] || cols[6] || cols[7])) {
  114.       circle.y = rectangle.y + rectangle.height + circle.radius;
  115.       circle.vY = 0;
  116.       return;
  117.     }
  118.    
  119.     var dist = {x: 0, y: 0, length: 0};
  120.    
  121.     if (cols[0] && cols[2] && !(cols[1] || cols[3] || cols[4] || cols[5] || cols[6] || cols[7])) {
  122.       dist.x = circle.x - rectangle.x;
  123.       dist.y = circle.y - rectangle.y;
  124.     }
  125.    
  126.     if (cols[1] && cols[2] && !(cols[0] || cols[3] || cols[4] || cols[5] || cols[6] || cols[7])) {
  127.       dist.x = circle.x - (rectangle.x + rectangle.width);
  128.       dist.y = circle.y - rectangle.y;
  129.     }
  130.    
  131.     if (cols[0] && cols[3] && !(cols[1] || cols[2] || cols[4] || cols[5] || cols[6] || cols[7])) {
  132.       dist.x = circle.x - rectangle.x;
  133.       dist.y = circle.y - (rectangle.y + rectangle.height);
  134.     }
  135.    
  136.     if (cols[1] && cols[3] && !(cols[0] || cols[2] || cols[4] || cols[5] || cols[6] || cols[7])) {
  137.       dist.x = circle.x - (rectangle.x + rectangle.width);
  138.       dist.y = circle.y - (rectangle.y + rectangle.height);
  139.     }
  140.    
  141.     dist.length = Math.sqrt(dist.x * dist.x + dist.y * dist.y);
  142.    
  143.     if (dist.length !== 0 && dist.length < circle.radius) {
  144.       circle.x += dist.x * (circle.radius - dist.length) / dist.length;
  145.       circle.y += dist.y * (circle.radius - dist.length) / dist.length;
  146.     }
  147.   }
  148. });
  149. </script>
clone this paste RAW Paste Data