HTML5 Game - Canvas Animation Friction

  1. HOME
  2. HTML5 Game
  3. Canvas Animation
  4. Friction to reduce velocity

Description

Friction

Demo

ResultView the demo in separate window 

<!doctype html>  
    <html>  
     <head>  
      <style>canvas{border:1px solid red;}</style>  
     </head>  
     <body>  
      <canvas id="canvas" width="400" height="400"></canvas>  
      <script>  
class Ball {  //from  w  ww  . j  a v  a2  s  .c o  m
 constructor(radius) {
  if (radius === undefined) { radius = 40; }  
  
  this.x = 0;  
  this.y = 0;  
  this.radius = radius;  
  this.vx = 0;  
  this.vy = 0;  
  this.rotation = 0;  
  this.scaleX = 1;  
  this.scaleY = 1;  
  this.color = "#ff0000";  
  this.lineWidth = 1;  
}  
  
draw(context) {  
  context.save();  
  context.translate(this.x, this.y);  
  context.rotate(this.rotation);  
  context.scale(this.scaleX, this.scaleY);  
  context.lineWidth = this.lineWidth;  
  context.fillStyle = this.color;  
  context.beginPath();  
  context.arc(0, 0, this.radius, 0, (Math.PI * 2), true);  
  context.closePath();  
  context.fill();  
  context.stroke();  
  context.restore();  
}
}
      window.onload = function () {  
        let canvas = document.getElementById('canvas'),  
            context = canvas.getContext('2d'),  
            ball = new Ball(),  
            vx = Math.random() * 10 - 5,  
            vy = Math.random() * 10 - 5,  
            friction = 0.1;  
      
        ball.x = canvas.width / 2;  
        ball.y = canvas.height / 2;  
      
        (function drawFrame () {  
          window.requestAnimationFrame(drawFrame, canvas);  
          context.clearRect(0, 0, canvas.width, canvas.height);  
      
          let speed = Math.sqrt(vx * vx + vy * vy),  
              angle = Math.atan2(vy, vx);  
      
          if (speed > friction) {  
            speed -= friction;  
          } else {  
            speed = 0;  
          }  
          vx = Math.cos(angle) * speed;  
          vy = Math.sin(angle) * speed;  
          ball.x += vx;  
          ball.y += vy;  
          ball.draw(context);  
        }());  
      };  
      </script>  
     </body>  
    </html>

Related Topic