victorcastelan
7/4/2013 - 2:49 PM

Colision

Colision

Colision.html
content_copyfile_download
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Collision 3D</title>
    <link rel="stylesheet" href="../include/style.css">
  </head>
  <body>
   
    <canvas id="canvas" width="400" height="400"></canvas>

    <script src="js/utils.js"></script>
    <script src="js/ball3d.js"></script>
    <script>
    window.onload = function () {
      var canvas = document.getElementById('canvas'),
          context = canvas.getContext('2d'),
          balls = [],
          numBalls = 20,
          fl = 250,
          vpX = canvas.width / 2,
          vpY = canvas.height / 2,
          top = -200,
          bottom = 200,
          left = -200,
          right = 200,
          back = 200,
          front = -200;

      for (var ball, i = 0; i < numBalls; i++) {
        ball = new Ball3d(15);
        ball.xpos = Math.random() * 400 - 200;
        ball.ypos = Math.random() * 400 - 200;
        ball.zpos = Math.random() * 400 - 200;
        ball.vx = Math.random() * 5 - 1;
        ball.vy = Math.random() * 5 - 1;
        ball.vz = Math.random() * 5 - 1;
        balls.push(ball);
      }

      function move (ball) {
        ball.xpos += ball.vx;
        ball.ypos += ball.vy;
        ball.zpos += ball.vz;
        
        if (ball.xpos + ball.radius > right) {
          ball.xpos = right - ball.radius;
          ball.vx *= -1;
        } else if (ball.xpos - ball.radius < left) {
          ball.xpos = left + ball.radius;
          ball.vx *= -1;
        }
        if (ball.ypos + ball.radius > bottom) {
          ball.ypos = bottom - ball.radius;
          ball.vy *= -1;
        } else if (ball.ypos - ball.radius < top) {
          ball.ypos = top + ball.radius;
          ball.vy *= -1;
        }
        if (ball.zpos + ball.radius > back) {
          ball.zpos = back - ball.radius;
          ball.vz *= -1;
        } else if (ball.zpos - ball.radius < front) {
          ball.zpos = front + ball.radius;
          ball.vz *= -1;
        }
        if (ball.zpos > -fl) {
          var scale = fl / (fl + ball.zpos);
          ball.scaleX = ball.scaleY = scale;
          ball.x = vpX + ball.xpos * scale;
          ball.y = vpY + ball.ypos * scale;
          ball.visible = true;
        } else {
          ball.visible = false;
        }
      }

      function checkCollision (ballA, i) {
        for (var ballB, dx, dy, dz, dist, j = i + 1; j < numBalls; j++) {
          ballB = balls[j];
          dx = ballA.xpos - ballB.xpos;
          dy = ballA.ypos - ballB.ypos;
          dz = ballA.zpos - ballB.zpos;
          dist = Math.sqrt(dx * dx + dy * dy + dz * dz);
          if (dist < ballA.radius + ballB.radius) {
            ballA.color = "#0000ff";
            ballB.color = "#0000ff";
          }
        }
      }

      function zSort (a, b) {
        return (b.zpos - a.zpos);
      }
      
      function draw (ball) {
        if (ball.visible) {
          ball.draw(context);
        }
      }

      (function drawFrame () {
        window.requestAnimationFrame(drawFrame, canvas);
        context.clearRect(0, 0, canvas.width, canvas.height);
        
        balls.forEach(move);
        balls.forEach(checkCollision);
        balls.sort(zSort);
        balls.forEach(draw);
      }());
    };
    </script>
  </body>
</html>