Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
  <title>123</title>
​
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    
    #canvas {
      display: inline-block;
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      border: 0;
      background: #FFF;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
  
  <script>
    var canvas = document.getElementById("canvas");
      function resizeCanvas() {
        canvas.width = canvas.offsetWidth;
        canvas.height = canvas.offsetHeight;
      }
      resizeCanvas();
      addEventListener("resize", resizeCanvas);
    var ctx = canvas.getContext("2d");
    
    var keys = [];
    addEventListener("keydown", function(e) {
      keys[e.keyCode] = true;
    });
    addEventListener("keyup", function(e) {
      keys[e.keyCode] = false;
    });
    
    var gravity = 1500;
    var drag = 0.001;
    var friction = 0.1;
    
    var wall = new function() {
      this.x1 = 100;
      this.x2 = 500;
      this.y1 = 400;
      this.y2 = 600;
    }
    
    var player = new function() {
      this.radius = 20;
      
      this.x = 300;
      this.y = 0;
      
      this.vx = this.vy = 0;
      
      this.ax = this.ay = 0;
      
      function dist(px, py, x1, y1, x2, y2) {
            var dx = x2 - x1;
            var dy = y2 - y1;
            
            var t = ((px - x1) * dx + (py - y1) * dy) / (dx * dx + dy * dy);
  
            if (t > 1)
                t = 1;
            else if (t < 0)
                t = 0;
            
            return Math.sqrt(Math.pow(x1 + dx * t - px, 2) + Math.pow(y1 + dy * t - py, 2));
        }
      
      this.sweep = function(x1, y1, x2, y2, vx, vy) {
            var d0 = dist(this.x, this.y, x1, y1, x2, y2);
            var d1 = dist(this.x + vx, this.y + vy, x1, y1, x2, y2);
            
            if (Math.abs(d0) <= this.radius) return 0;
            
            if (d0 > this.radius && d1 < this.radius) return ((d0 - this.radius) / (d0 - d1));
            
            return 1;
      }
      
      this.update = function() {
            this.vx += this.ax * dt;
            this.vy += this.ay * dt;
            
            this.ax = 0;
            this.ay = 0;
        
        this.ay += gravity;
        
            var velLen2 = (Math.pow(this.vx, 2) + Math.pow(this.vy, 2))
            var velLen = Math.sqrt(velLen2);
            if (velLen > 0) {
                this.ax -= (this.vx / velLen) * velLen2 * drag;
                this.ay -= (this.vy / velLen) * velLen2 * drag;
            }
            
            var vx = (this.vx + this.ax / 2 * dt) * dt;
            var vy = (this.vy + this.ay / 2 * dt) * dt;
            
            var t = this.sweep(wall.x1, wall.y1, wall.x2, wall.y2, vx, vy);
            if (t < 1) console.log(t);
            
            this.x += vx * t;
            this.y += vy * t;
      }
      
      this.render = function() {
        ctx.beginPath();
          ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
          ctx.fillStyle = "#000";
          ctx.fill();
        ctx.closePath();
      }
    }
    
    function update() {
      player.update();
    }
    
    function render() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      player.render();
      
      ctx.beginPath();
      ctx.moveTo(wall.x1, wall.y1);
      ctx.lineTo(wall.x2, wall.y2);
      ctx.stroke();
      ctx.closePath();
    }
    
    var lastLoop, dt;
    function loop() {
      var thisLoop = performance.now();
      if (lastLoop) {
        dt = (thisLoop - lastLoop) / 1000;
        
        update();
        render();
      }
      lastLoop = thisLoop;
      requestAnimationFrame(loop);
    }
    
    loop();
  </script>
</body>
</html>
</body>
</html>
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers