In the past few classes, we have been building and optimizing a pong game with various programming facilities, namely arrays and structs.

Here, we will continue that specific exploration, taking our struct-based code and adding in code for displaying and processing blocks in our game, turning pong into more of a breakout game.

We will start this from a blank slate. You will want to:

• open up TIC-80
• clear out the sample/demo code (CTRL-a then backspace or delete)
• go into the sprite editor:
  • select foreground sprites
    • in #257: draw an 8×4 paddle tile, going from edge to edge, and only using the top 4 rows of the tile
    • in #258: in the top left of the tile, draw a 2×2 ball tile
    • in #259: from the top left of the tile, draw a 7×4 brick tile (using only the first 4 rows)
• proceed back to the code editor to input the code

The first thing you will want to place in your TIC-80 code editor is the top header (switching us to js mode) and the supporting getRandomNumber() function used for determining a random ball direction. You can copy and paste the following into TIC-80:

// program: brkoutjs.tic
// description: breakout-style struct-based pong-like game
// script: js
//
// You will need 3 foreground tiles created to use this program:
//
// #257: your paddle segment sprite (8x4, top left of 8x8 tile)
// #258: your ball sprite (2x2, top left of 8x8 tile)
// #259: your block sprite (7x4, top left of 8x8 tile)
//
//////////////////////////////////////////////////////////////////////////////
 
//////////////////////////////////////////////////////////////////////////////
//
// 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);
}