Pong

How to play

Left player :

Right player :

How does it work

//Player Class
var Player = function(name, x, y, keyUp, keyDown){
  var me = this;
  this.name = name;

  this.x = x;
  this.y = y;
  this.width = 5;
  this.height = 50;
  
  this.up = keyUp;
  this.down = keyDown;
  this.dir = 0;
  
  this.score = 0;
  
  document.addEventListener('keydown', function(e){
    if(e.keyCode == me.up){
      me.dir = 1;
    }
  
    if(e.keyCode == me.down){
      me.dir = -1;
    }
  });
  
  document.addEventListener('keyup', function(e){
    if(e.keyCode == me.up || e.keyCode == me.down){
      me.dir = 0;
    }
  });
};

//Ball Class
var Ball = function(x, y){
  this.x = x;
  this.y = y;
  this.height = 5;
  this.width = 5;
  
  this.vitesse = 2;
  var angle = Math.random()*360;
  var rad = angle*(Math.PI / 180);
  this.dirx = Math.cos(rad)*this.vitesse;
  this.diry = Math.sin(rad)*this.vitesse;

  this.bounce = function(a, accel){
    this.vitesse+=accel;
    angle = (a-angle)%360;
    rad = angle*(Math.PI / 180);
    this.dirx = Math.cos(rad)*this.vitesse;
    this.diry = Math.sin(rad)*this.vitesse;
  };
};

//Scene Class
var Scene = function(width, height){
  var me = this;
  this.width = width;
  this.height = height;
  
  var canvas = window.document.getElementById("canvas");
  canvas.width = this.width;
  canvas.height = this.height;
  
  var c = canvas.getContext("2d");
  c.fillStyle="#000000";

  //Adding player to the scene.
  var players = [];
  this.addPlayer = function(player){
    players.push(player);
  };
  
  this.addPlayers = function(player){
    for(var i=0; i me.height){
        player.y = me.height-player.height;
      }
    }
    
    //Balls positions
    for(var y=0; y me.width){
        for(var z=0; z= ball.x && ball.x >= p.x-Math.abs(ball.dirx*2)-5){
            if(p.y+p.height >= ball.y && ball.y-ball.height >= p.y){
              var diff = (ball.y+(ball.height/2))-(p.y+(p.height/2));
              diff = diff*45/(p.height/2);
              console.log(diff);
              ball.bounce(180+diff, 0.5);
            } else {
              balls.splice(y, 1);
              
              var score = "";
              for(var a=0; a me.height){
        ball.bounce(360, 0);
      }
    }

    anim = window.requestAnimationFrame(draw);
  };
  
  //Launching the game
  this.launch = function(){
    scene.addBall(new Ball(scene.width/2, scene.height/2));
    draw();
  };
};

//Game init
var scene = new Scene(500, 300);
scene.addPlayers([
  new Player('Player 1', 0, scene.height/2-15, 90, 83),
  new Player('Player 2', scene.width-5, scene.height/2-15, 38, 40)
]);
scene.launch();