HTML5 Game - Canvas Animation Simple Friction

Introduction

On each frame, speed on x and speed on y become 80% or 90% of what they were on previous frame.

Demo

<!doctype html>  
<html>  
 <head>  
  <style>canvas{border:1px solid red;}</style>  
 </head>  //from  w  ww  .j ava  2  s  . c  o m
 <body>  
  <canvas id="canvas" width="400" height="400"></canvas>  
  <script>  
class Ball {  
 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 =10,  
        vy = 10;  
  
    ball.x = canvas.width / 2;  
    ball.y = canvas.height / 2;  
  
    (function drawFrame () {  
  
      window.requestAnimationFrame(drawFrame, canvas);  
      context.clearRect(0, 0, canvas.width, canvas.height);  
  friction = 0.9;   
      vx *= friction;  
      vy *= friction;  
    if (Math.abs(vx) > 0.001) {  
      vx *= friction;  
      ball.x += vx;  
    }  

      ball.x += vx;  
      ball.y += vy;  
      ball.draw(context);  
       }());  
     };  
     </script>  
    </body>  
   </html>

HTML5 Game - Canvas Animation Simple Friction

Introduction

Demo

Related Topic