Here is a copy of the pong code we wrote in class. A few modifications have been made from the version we ended up running in class:

• code has been commented
• sprite wideness has been implemented
  • one of the array elements
  • a for loop implemented for paddle sprite display (based on paddle width)
• instead of hard-coding numbers, calculate them based on screen size
  • two variables, screenwidth and screenheight, were created to store screen dimensions.
• starting ball direction and reset ball direction is now random
  • custom function getRandomDirection() created to handle the random choosing of the direction
• the collision detection box is now aware of the bottom of the paddle

Code can be copied and pasted into a TIC-80 code editor (probably want to clear out the existing demo code).

Note the assumed tiles that need to be present (#257 and #258)

// program: pong.tic
// description: simple 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);
}
 
//////////////////////////////////////////////////////////////////////////////
//
// paddle[] and ball[] are arrays that will be packed with tile and
// coordinate data
//
var paddle = [];
var ball = [];
 
//////////////////////////////////////////////////////////////////////////////
//
// Giving english names to the paddle/ball array element positions;
// the name indicating the content of that array element.
//
var tile = 0;
var x = 1;
var y = 2;
var xdir = 3;
var ydir = 4;
var wide = 5;
 
//////////////////////////////////////////////////////////////////////////////
//
// 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;
 
//////////////////////////////////////////////////////////////////////////////
//
// Initialize paddle[] array, using equations instead of fixed values
// where possible
//
paddle[tile] = 257;
paddle[wide] = 2;
paddle[x] = (screenwidth / 2) - ((8 * paddle[wide]) / 2);
paddle[y] = screenheight - 8 - 5;
 
//////////////////////////////////////////////////////////////////////////////
//
// Initialize ball[] array, using equations istead of fixed values
// where possible
//
ball[tile] = 258;
ball[wide] = 1;
ball[x] = (screenwidth / 2) - ((8 * ball[wide]) / 2);
ball[y] = screenheight - (screenheight / 3);
ball[xdir] = getRandomDirection();
ball[ydir] = getRandomDirection();
 
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 * wide)))
    {
      paddle[x]  = screenwidth - (8 * wide);
    }
  }
 
  //////////////////////////////////////////////////////////////////////////
  //
  // Check to see if the left right arrow is being pressed
  //
  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);
}