var sx = 250, sy = 330, sw = 40, sh = 20, sv=0
var bx = 250, by = 100, bw = 10, bh = 10, vx=2, vy=4 
var dt=20, timer
function onMouseDown(e){
  if (e.pageX<sx&&sx>0) sv=-5
  else if (e.pageX>sx+sw&&sx+sw<600) sv=5
  else sv = 0
}
function paint(ctx){
  // "BALL"
  ctx.fillStyle="black"
  ctx.fillRect(bx,by,bw,bh) // Ball wird weggezeichnet
  ctx.fillStyle="red"
  if (bx>=600-bw||bx≤0) vx = -vx // linker oder rechter Rand
  if (by≤0) vy = -vy // oberen Rand getroffen
  if (by>330&&bx>sx&&bx<sx+sw) vy=-vy // Schläger getroffen
  if (by>350) window.clearInterval(timer) // rausgefallen
  bx += vx; by += vy; // Ball bewegt sich
  ctx.fillRect(bx,by,bw,bh) // und wird neugezeichnet
  // "SCHLÄGER"
  if (sv!=0){ // nur neuzeichnen, wenn Bewegung vorhanden
  ctx.fillStyle="black"
  ctx.fillRect(sx,sy,sw,sh) // Schläger wegzeichnen
  if (sx>600-sw){ // am rechten Rand anhalten
    sx=600-sw; sv=0;
  } else if (sx<0){ // am linken Rand anhalten
    sx=0
    sv=0
  } else sx += sv // oder weiterbewegen
    ctx.fillStyle="white"
    ctx.fillRect(sx,sy,sw,sh) // neuzeichnen
  }
}

var canvas=document.getElementById("playGround");
var ctx   =canvas.getContext("2d");
// Szene einmal vorzeichnen...
sv=1
paint(ctx)
sv=0
canvas.addEventListener("mousedown",onMouseDown,false) // auf Maus reagieren
timer=window.setInterval("paint(ctx)",dt) // Schleife immer wieder durchlaufen