Pong Game with HTML5 Canvas

Here the simple code Pong Game with HTML5 Canvas

<div style="text-align:center;">
<canvas id="myCanvas" width="600" height="400" style="border:1px solid #000000;"></canvas>
</div>
<script>
var ky1=0,ky2=0,px=0,py=0,vx=0,vy=0,scorekiri=0,scorekanan=0;
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var lastMouse={x:0,y:0};
var pressedState=false;

ky1=ky2=Math.round(0.5*c.height)-30;

function drawGame(){
 //draw background
 ctx.beginPath();
 ctx.rect(0, 0,c.width,c.height);
 ctx.fillStyle = "black";
 ctx.fill();

 //draw middle line
 ctx.beginPath();
 ctx.moveTo(Math.round(0.5*c.width),0);
 ctx.lineTo(Math.round(0.5*c.width),c.height);
 ctx.strokeStyle = "white";
 ctx.lineWidth = 5;
 ctx.setLineDash([8,3]);
 ctx.stroke();

 //draw kotak 1
 ctx.beginPath();
 ctx.rect(0,ky1,20,60);
 ctx.fillStyle = "white";
 ctx.fill();

 //draw kotak 2
 ctx.beginPath();
 ctx.rect(c.width-20,ky2,20,60);
 ctx.fillStyle = "white";
 ctx.fill();
 
 //draw bola
 if(px>-20 && py>-20 && px<c.width+20 && py<c.height+20){
  ctx.beginPath();
  ctx.arc(px,py,10,0, 2 * Math.PI);
  ctx.fillStyle = "white";
  ctx.fill();
 }else{
  if(px<0)scorekiri++;
  if(px>c.width)scorekanan++;
  newVelocity();
 }
 
 ctx.font = "30px Arial";
 ctx.textAlign = "center";
 ctx.fillText(scorekanan,Math.round(0.25*c.width), 50);
 ctx.fillText(scorekiri,Math.round(0.75*c.width), 50);
  
 moveNewPosition();
 requestAnimationFrame(drawGame);
}

function newVelocity()
{
 vx=-3+Math.round(Math.random()*8);
 
 if(vx==0)newVelocity();
 
 vy=((Math.random()*5<3)?-1:1)*Math.round(Math.sqrt(9-vx*vx));
 
 if(vy==0)newVelocity();

 px=Math.round(0.5*c.width);
 py=Math.round(0.5*c.height);
}

function moveNewPosition(){
 if(py<10)vy*=-1;
 if(py>c.height-10)vy*=-1;
 
 if(px<(20+10)){
  if(py>ky1-10 && py<ky1+60+10){
   if(py>ky1 && py<ky1+60){    
    px=(20+10);
    vx*=-1;
   }else{    
    vy*=-1;
    if(py<ky1)py=ky1-10;
    if(py>ky1+60)py=ky1+60+10;
   }
  }
 }
 
 if(px>(c.width-(20+10))){
  if(py>ky2-10 && py<ky2+60+10){
   if(py>ky2 && py<ky2+60){    
    px=(c.width-(20+10));
    vx*=-1;
   }else{    
    vy*=-1;
    if(py<ky2)py=ky2-10;
    if(py>ky2+60)py=ky2+60+10;
   }
  }
 }

 px+=vx;
 py+=vy;
}

var requestAnimationFrame =  
        window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        function(callback) {
          return setTimeout(callback, 100);
        };

newVelocity();
drawGame();


window.addEventListener("keydown", moveSomething, false);

// React to touch events on the canvas
c.addEventListener('touchstart',touchDown,false);
c.addEventListener('touchmove',touchXY,false);
window.addEventListener('touchcancel',touchUp,false);
c.addEventListener("touchend",touchUp,false);
c.addEventListener("touchleave",touchUp,false);

function getTouchPos(canvas,evt,id,lastm) {
 if (!evt) var evt = event;
 if(evt.touches) {
  var touch = evt.touches[id];
  return {
   x:touch.pageX-touch.target.offsetLeft,
   y:touch.pageY-touch.target.offsetTop
  }
 }
 return lastm;
}

function touchDown(evt){
 lastMouse = getTouchPos(c,evt,0,lastMouse);
}

function touchXY(evt) {
 evt.preventDefault();
 if(pressedState){
  if(lastMouse.x<0.5*c.width){
   ky1+=30;
   if(ky1<lastMouse.y){
    var k=ky1+10;
    if(k>lastMouse.y){
     ky1=lastMouse.y;
    }else{
     ky1=k;
    }
   }else if(ky1>lastMouse.y){    
    var k=ky1-10;
    if(k<lastMouse.y){
     ky1=lastMouse.y;
    }else{
     ky1=k;
    }
   }
   ky1-=30;
  }else{
   ky2+=30;
   if(ky2<lastMouse.y){
    var k=ky2+10;
    if(k>lastMouse.y){
     ky2=lastMouse.y;
    }else{
     ky2=k;
    }
   }else if(ky2>lastMouse.y){    
    var k=ky2-10;
    if(k<lastMouse.y){
     ky2=lastMouse.y;
    }else{
     ky2=k;
    }
   }
   ky2-=30;
  }
 }
 lastMouse = getTouchPos(c,evt,0,lastMouse);
 pressedState=true;
}

function touchUp(evt){  
 pressedState=false;
}

function moveSomething(e) {
    switch(e.keyCode) {
        case 81:
            if(ky1>0)ky1-=10;
            break;
        case 65:
            if(ky1<c.height-60)ky1+=10;
            break;
        case 38:
            if(ky2>0)ky2-=10;
            break;
        case 40:
            if(ky2<c.height-60)ky2+=10;
            break;  
    }   
}    

</script>

Download the code can be downloaded at here