Ayuda con bugs en PONG (html5<canvas> + javascript)

Pues bueno, soy nuevo en el foro, y pues, programando apenas llevo unos 6 meses, todo lo que se es de manera autodidacta, y esta es la segunda 'aplicacion' web que hago, ya antes habia visto muy poco de html y muuuuy pero muy poco de js, ahora ya eh avanzado mas y se de js, css, php(muy poco), c++, pascal(tambien muy poco), y me defiendo un poco en lo que a logica se refiere.

Los problemas que me faltan por solucionar en este juego es que la forma en que bajan y suben las barras se ve muy 'mecanico', no hay alguna manera hacerlo un poco mas dinamico?, tambien, cuando se deja presionada alguna tecla para bajar una de las dos barras o subirla, si el otro jugador presiona una tecla, la del primer jugador deja de moverse, y quisiera saber si se puede hacer una funcion que haga que se aprieten dos teclas al mismo tiempo.
Y otra cosa, despues de varios golpes la pelota se hace demasiado rapida(avanza con una cantidad muy grande de pixeles) y aunque se tope con alguna de las barras, la pelota se sigue de filo y pues se dá como punto para el contrincante, y quisiera saber si existe una forma para que no 'avance' de tantos pixeles, porque le intento bajar la cantidad y el juego se ve demasiado lento...

El codigo de la pagina es la siguiente, ahora solo lo eh testeado en chrome, la verdad no se si funcione en ff o en opera...

Código

<html>
<head></head>
<body bgcolor="black">
<canvas id="a" style="position:absolute;left:0px;top:0px;"></canvas>
<script type="text/javascript">
	var numtema = 0;
	var tema = {colorbola:['rgb(200,0,200)','rgb(0,0,0)','rgb(200,0,50)'],
				colorbarra:['rgb(50,200,20)','rgb(0,0,255)','rgb(255,240,20)'],
				texto:['rgb(255,255,255)','rgb(0,0,0)','rgb(255,255,255)'],
				fondo:['rgb(0,0,0)','rgb(255,255,255)','rgb(0,0,255)'],
				fondofiltro:['rgba(0,0,0,.25)','rgba(255,255,255,.25)','rgba(0,0,255,.25)']};
	var filtro=true;
	var pause=false;
	var velocidad = 15;
	var bola = {x:window.innerWidth/2,y:window.innerHeight/2};
	var vel = {x:(Math.random()*(velocidad*2))-velocidad,y:(Math.random()*(velocidad*2))-velocidad};
	var barra = {p1:0,p2:0};
	var score = {p1:0,p2:0};
 
	var canvas=document.getElementById('a');
	var ctx;
	if(canvas && canvas.getContext){
		ctx = canvas.getContext('2d');
		ini();
	}
	function ini(){
		window.addEventListener('resize', ResizeW, false);
		setInterval( pong, 1000/30);
		ResizeW();
	}
	function pong(e){
	if(pause){}
	else{
		ctx.fillStyle = filtro?tema.fondofiltro[numtema]:tema.fondo[numtema];
		ctx.beginPath();
		ctx.fillRect(5,0,window.innerWidth-5,window.innerHeight);
		ctx.closePath();
		ctx.fill();
		ctx.fillStyle = tema.fondo[numtema];
		ctx.beginPath();
		ctx.fillRect(0,0,5,window.innerHeight);
		ctx.closePath();
		ctx.fill();
		ctx.fillStyle = tema.fondo[numtema];
		ctx.beginPath();
		ctx.fillRect(window.innerWidth-5,0,window.innerWidth,window.innerHeight);
		ctx.closePath();
		ctx.fill();
 
		ctx.fillStyle = tema.texto[numtema];
		ctx.font = '15px""';
		ctx.fillText("Controles",50,30);
		ctx.fillText("P1: arriba=w abajo=s",50,45);
		ctx.fillText("P2: arriba=8 abajo=2",50,60);
		ctx.fillText("Nueva bola= n",50,75);
		ctx.fillText("Desenfoque por movimiento= f",50,90);
		ctx.fillText("Temas +=derecha, -=izquierda",50,105);
		ctx.fillText("Pause= p",50,120);
		ctx.font = '35px""';
		ctx.fillText(score.p1+" || "+ score.p2 ,(window.innerWidth/2)-30,30);
 
		ctx.fillStyle = tema.colorbarra[numtema];
		ctx.beginPath();
		ctx.fillRect(0,barra.p1,5,150);
		ctx.closePath();
		ctx.fill();
		ctx.fillStyle = tema.colorbarra[numtema];
		ctx.beginPath();
		ctx.fillRect(window.innerWidth-5,barra.p2,5,150);
		ctx.closePath();
		ctx.fill();
 
		ctx.fillStyle = tema.colorbola[numtema];
		ctx.beginPath();
		ctx.arc(bola.x,bola.y,15,0,2*Math.PI,false);
		ctx.closePath();
		ctx.fill();
 
		if(bola.x>0 && bola.x<window.innerWidth-1){
		vel.x=(((bola.x<20) && ((bola.y>barra.p1)&&(bola.y<barra.p1+150))) || (bola.x>window.innerWidth-20&& ((bola.y>barra.p2)&&(bola.y<barra.p2+150))))?vel.x*-1.15:vel.x;
		vel.y=(bola.y<15 || bola.y>window.innerHeight-15)?-vel.y:vel.y;
		if(vel.x<-28)vel.x=-27;
		if(vel.x>28)vel.x=30;
		bola.x+=vel.x;
		bola.y+=vel.y;
		if(bola.x<1)score.p2++;
		if(bola.x>window.innerWidth-1)score.p1++;
		}
		else{
			bola.x=-30;
			bola.y=-30;
		}
		}
	}
	function ResizeW(e){
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
	}
	document.onkeydown = function (event){
		var keycode = (window.event||event).keyCode;
		switch(keycode){
			case 87: //p1 arriba
			barra.p1-=45;
			barra.p1<0?(barra.p1=0):(barra.p1=barra.p1);
			break;
			case 83: //p1 abajo
			barra.p1+=45;
			barra.p1+90>window.innerHeight?(barra.p1=window.innerHeight-90):barra.p1=barra.p1;
			break;
			case 104: //p2 arriba
			barra.p2-=45;
			barra.p2<0?(barra.p2=0):(barra.p2=barra.p2);
			break;
			case 98:  //p2 abajo
			barra.p2+=45;
			barra.p2+90>window.innerHeight?(barra.p2=window.innerHeight-90):(barra.p2=barra.p2);
			break;
			case 80: //pause
			pause=pause?false:true;
			break;
			case 70: //filtro
			filtro=filtro?false:true;
			break;
			case 78: //nueva bola
			vel = {x:(Math.random()*(velocidad*2))-velocidad,y:(Math.random()*(velocidad*2))-velocidad};
			bola = {x:window.innerWidth/2,y:window.innerHeight/2};
			break;
			case 37: //tema--
			numtema==0?(numtema=2):numtema--;
			break;
			case 39: //tema++
			numtema==2?(numtema=0):numtema++;
			break;		
			default:
			break;			
		}
	}
</script>
</body>
</html>

Quizá se pueda optimizar mucho, pero primero quiero terminarlo asi y ya despues acortarlo....

Se aceptan criticas constructivas