Here is the code we adapted in class from the array-based pong implementation we did last week:

<code javascript>
// program: pongobject.tic
// description: simple struct-based pong-like game as a base for breakout
// script: js
//
// You will need 2 foreground tiles created to use this program:
// #257: your paddle segment sprite (which we'll duplicate)
// #258: your ball sprite
//
//////////////////////////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////////////////////////
//
// getRandomDirection() is a function to query the random number
// generator to produce one of -1 or 1, used to set one of the ball
// direction attributes (xdir, ydir).
//
function getRandomDirection()
{
  //////////////////////////////////////////////////////////////////////////
  //
  // The random number generator is not returning a whole number, so
  // we need a routine to strip the decimal places from it.
  //
  var min = Math.ceil(0);
  var max = Math.floor(1);
  var value = Math.floor (Math.random () * (max - min + 1)) + min;

  //////////////////////////////////////////////////////////////////////////
  //
  // Should the generated value be 0, adjust it to -1, to match our
  // desired output of -1 or 1.
  //
  if (value == 0)
  {
    value  = -1;
  }

  return (value);
}

//////////////////////////////////////////////////////////////////////////////
//
// Giving english names to button IDs (easier to remember and read)
//
var left = 2;
var right = 3;

//////////////////////////////////////////////////////////////////////////////
//
// General variables
//
var index = 0;
var screenwidth = 240;
var screenheight = 136;

//////////////////////////////////////////////////////////////////////////////
//
// paddle is a structure that will be packed with tile and
// coordinate data for our player
//
var paddle = {
  tile: 257,
  wide: 2,
  x: 0,
  y: screenheight - 8 - 5,
};
paddle.x = (screenwidth / 2) - ((8 * paddle.wide) / 2);

//////////////////////////////////////////////////////////////////////////////
//
// ball is a structure that will be packed with tile and
// coordinate data for the missile
//
var ball = {
  tile: 258,
  wide: 1,
  x: 0,
  y: (screenheight - (screenheight / 3)),
  xdir: getRandomDirection(),
  ydir: getRandomDirection(),
};
ball.x = (screenwidth / 2) - ((8 * ball.wide) / 2);

function TIC()
{
  cls(0);

  //////////////////////////////////////////////////////////////////////////
  //
  // Check to see if the left arrow is being pressed
  //
  if (btn (left) == true)
  {
    //////////////////////////////////////////////////////////////////////
    //
    // Adjust the x position of the paddle by decrementing it
    //
    paddle.x = paddle.x - 1;

    //////////////////////////////////////////////////////////////////////
    //
    // Bounds check: see if that recent movement moved us off the
    // left side of the screen (x-axis position of 0). If we have,
    // reset the x coordinate of the paddle to 0.
    //
    if (paddle.x <  0)
    {
      paddle.x  = 0;
    }
  }

  //////////////////////////////////////////////////////////////////////////
  //
  // Check to see if the left right arrow is being pressed
  //
  if (btn (right) == true)
  {
    //////////////////////////////////////////////////////////////////////
    //
    // Adjust the x position of the paddle by incrementing it
    //
    paddle.x = paddle.x + 1;

    //////////////////////////////////////////////////////////////////////
    //
    // Bounds check: see if that recent movement moved us off the
    // right side of the screen (x-axis position of 240). If we have,
    // reset the x coordinate of the paddle to a position such that it
    // is bumping against the right side of the screen.
    //
    // This requires some calculations, since tiles are 8 pixels wide,
    // and we are doubling up our display of the paddle tiles (so 16);
    // that means, since coordinates of sprites are referenced from a
    // top-left perspective, we take the screen width (240) and then
    // subtract our total sprite width (16 for a double wide)
    //
    if (paddle.x >  (screenwidth - (8 * paddle.wide)))
    {
      paddle.x  = screenwidth - (8 * paddle.wide);
    }
  }

  //////////////////////////////////////////////////////////////////////////
  //
  // Display the paddle, compensating for width of desired sprite
  //
  for (index = 0; index < paddle.wide; index++)
  {
    spr (paddle.tile, paddle.x+(index*8), paddle.y, 0);
  }

  //////////////////////////////////////////////////////////////////////////
  //
  // Move ball along its current path (determined by xdir
  // and ydir current states)
  //
  ball.x = ball.x + (1 * ball.xdir);
  ball.y = ball.y + (1 * ball.ydir);

  //////////////////////////////////////////////////////////////////////////
  //
  // Bounds checking for the ball: left side of screen: reflect
  // it and send it in the opposite direction.
  //
  if (ball.x < 0)
  {
    ball.xdir = 1;
  }

  //////////////////////////////////////////////////////////////////////////
  //
  // Bounds checking for the ball: right side of screen: reflect
  // it and send it in the opposite direction.
  //
  if (ball.x + (8 * ball.wide) > screenwidth)
  {
    ball.xdir = -1;
  }

  //////////////////////////////////////////////////////////////////////////
  //
  // Bounds checking for the ball: top of screen: reflect
  // it and send it in the opposite direction.
  //
  if (ball.y < 0)
  {
    ball.ydir = 1;
  }

  //////////////////////////////////////////////////////////////////////////
  //
  // Loss for player: paddle misses ball and ball leaves the
  // bottom of the screen. Reset ball to starting position.
  //
  if (ball.y + (8 * ball.wide) > screenheight)
  {
    //////////////////////////////////////////////////////////////////////
    //
    // Same code as above: reset ball to its starting point
    //
    ball.x = (screenwidth / 2) - ((8 * ball.wide) / 2);
    ball.y = screenheight - (screenheight / 3);

    //////////////////////////////////////////////////////////////////////
    //
    // Same code for initializing xdir and ydir above: obtain
    // a random choice of -1 or 1
    //
    ball.xdir = getRandomDirection();
    ball.ydir = getRandomDirection();
  }

  //////////////////////////////////////////////////////////////////////////
  //
  // Collision detection: is the top of the paddle coming into
  // contact with the ball? Check and react accordingly (reflect
  // the ball away).
  //
  // This requires the use of a compound condition in our if(),
  // as we need to check both x and y axis within the range of
  // the paddle to determine if we have a hit.
  //
  if ((ball.y+(8*ball.wide) >= paddle.y)     &&   // ball on y-plane
    (ball.x >= (paddle.x - (8*ball.wide)))   &&   // left side
    (ball.x <= (paddle.x + (8*paddle.wide))) &&   // right side
    (ball.y <= (paddle.y + 8)))                   // bottom
  {
    //////////////////////////////////////////////////////////////////////
    //
    // Place ball above the paddle
    //
    ball.y = paddle.y - 8;

    //////////////////////////////////////////////////////////////////////
    //
    // Reflect the ball away
    //
    ball.ydir = -1;
  }

  //////////////////////////////////////////////////////////////////////////
  //
  // Display the ball sprite
  //
  spr (ball.tile, ball.x, ball.y, 0);
}
</code>