%%@ style/css
<style>
  #playingArea{
    position: absolute;
    top: 100;
    left: 100;
    border: 1px solid black;
    width: 500;
    height: 500;
    background-color: rgb(192,192,192);
  }
%%@ paddle / style
  #paddle{
    position: absolute;
    top: 470;
    left: 228;
    width: 64;
    height: 16;
  }
%%@ ball / style
  #ball{
    position: absolute;
    top: 4;
    left: 200;
    width: 16;
    height: 16;
  }
%%@ score / style
  #score{
    position: absolute;
    top: 486;
    left: 0;
    width: 500;
    height: 14;
    font-size: 10pt;
    color: white;
    background-color: rgb(32,128,64);
  }
</style>
%%@ script
<script language="JavaScript">
//get info, process data, update screen objects
  //instance vars
  var ball;
  var paddle;
  var score;
//@ initial speeds
  var dx = 6;
  var dy = 6;
  var currentScore = 0;
  var timer;
  //set initial conditions for ball and paddle
  var paddleLeft = 228;
  var ballLeft = 200;
  var ballTop = 4;

//@ init
  
  function init(){
    //instantiate HTML object instance vars
    ball = document.getElementById('ball');
    paddle = document.getElementById('paddle');
    score = document.getElementById('score');
    //register key listener with document object
    document.onkeydown = keyListener;
    //start the game loop
    start();
  }

//@ listen / key code(s)
  
  function keyListener(e){
    if(!e){
      //for IE
      e = window.event;
    }
    if(e.keyCode==37 && paddleLeft > 0){
      //keyCode 37 is left arrow
      paddleLeft -= 4;
      paddle.style.left = paddleLeft + 'px';
    }
    if(e.keyCode==39 && paddleLeft < 436){
      //keyCode 39 is right arrow
      paddleLeft += 4;
      paddle.style.left = paddleLeft + 'px';
    }
    //FYI - keyCode 38 is up arrow, keyCode 40 is down arrow
  }

//@ game loop
  
  function start(){
    //game loop
    detectCollisions();
    render();
    difficulty();
    
//@ end conditions
    if(ballTop < 470){
      //still in play - keep the loop going
      timer = setTimeout('start()',50);
    }
    else{
      gameOver();
    }
  }

//@ collision(s)
  
  function detectCollisions(){
    //just reflect the ball on a collision
    //a more robust engine could change trajectory of ball based
    //on where the ball hits the paddle
    if(collisionX())
      dx = dx * -1;
    if(collisionY())
      dy = dy * -1;
  }

//@ collision X
  
  function collisionX(){
    //check left and right boundaries
    if(ballLeft < 4 || ballLeft > 480)
      return true;
    return false;
  }

//@ collision Y
  
  function collisionY(){
    //check if at top of playing area
    if(ballTop < 4)
      return true;
    //check to see if ball collided with paddle
    if(ballTop > 450){
      if(ballLeft > paddleLeft && ballLeft < paddleLeft + 64)
        return true;
    }
    return false;
  }

//@ render and move
  
  function render(){
    moveBall();
    updateScore();
  }
  
//@ move ball
  function moveBall(){
    ballLeft += dx;
    ballTop += dy;
    ball.style.left = ballLeft;
    ball.style.top = ballTop;
  }

//@ score
  
  function updateScore(){
    currentScore += 5;
    score.innerHTML = 'Score: ' + currentScore;
  }
  
  function difficulty(){
    //as the game progresses, increase magnitude of the vertical speed
    if(currentScore % 1000 == 0){
      if(dy > 0)
        dy += 1;
      else
        dy -= 1;
    }
  }

//@ game over
  
  function gameOver(){
    //end the game by clearing the timer, modifying the score label
    clearTimeout(timer);
    score.innerHTML += "  Game Over";
    score.style.backgroundColor = 'rgb(128,0,0)';
  }
</script>
%%@ onload

 <script>function page() { init(); }</script>
 <script>function slide() { init(); }</script>

%%@ div(s) / the playground

 <div id="playingArea">
<div id="paddle">
  <img src="local/assets/js/paddle.gif">
</div>
<div id="ball">
  <img src="local/assets/js/ball.gif">
</div>
<div id="score">
  Score: 0
</div>
 </div>