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);
}

Next up, let us create some variables that will help us on our way (copy and paste this, below the code pasted in the previous section):

//////////////////////////////////////////////////////////////////////////////
//
// Giving english names to button IDs (easier to remember and read)
//
var left = 2;
var right = 3;
 
//////////////////////////////////////////////////////////////////////////////
//
// Screen variables
//
var screenwidth = 240;
var screenheight = 136;

Should be familiar stuff. These variables are essentially text labels we will use to avoid hardcoding constants in our code.

The item we will have direct control over, the paddle is used to deflect the ball from going off the bottom of the screen:

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

A change from the previous code: the wide property is no longer in units of tiles, but instead pixels. In this case, the paddle will be initialized to a width of 24 pixels (effectively 3 tile-widths). This value should be a multiple of 8 for best outcome.

Once our struct is created, we will re-initialize its x coordinate, using the set paddle width. We could not have done this originally, since x and wide were being created and did not exist yet.

The ball represents the main agent of action in the game: its movements, or specifically, its eventual collisions will create the progress experienced in the game.

Just as with paddle, the ball struct needs to be created and initialized, as follows:

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

A new addition, the brick, will provide the infrastructure for other on-screen items that can be interacted with (namely, the ball coming into collision with them).

But before we do all that, we need to create that basic brick template, just as we did with paddle and ball, only here with the intent of later replicating it many times over:

//////////////////////////////////////////////////////////////////////////////
//
// brick is a structure that will be packed with tile and coordinate
// data for the on-screen blocks the missile (ball) can hit
//
var brick = {
  tile: 259,
  wide: 8,
  x: 0,
  y: 0,
  visible: true,
};