Using data to precisely position images

  1. User interface
    • CSS code that sets images to absolute positioning:
           img {
                position: absolute;
    • Pictures of:
      • Ms. Pacman screen
      • a dot
      • a powerpill
    • A button to trigger the program
    • A <span id="outputID"></span> to hold the output info.
  2. INPUT: When the button is clicked, it first creates a maze object holding the two-dimensional maze arrays
  3. PROCESS: Then the maze object is sent into a function that will process it
    1. It creates a variable to hold an HTML string full of image information, say outputHTML
    2. Then it loops through all the rows of the maze arrays, from 0 to 30
      • And then it uses a nested loop to loop through all the columns of the maze arrays, from 0 to 26
        • We want to add image code to outputHTML that looks a little like this:

          <img style="left: 228px; top: 61px" src="dot.jpg">
        • It calculates the position in pixels:

          var topPixels = ((row * rowHeight) + rowOffset);

          var leftPixels = ((column * columnWidth) + columnOffset);

          var positionStyle = " style='top: "
               + topPixels
               + "px; left: "
               + leftPixels
               + ";'"

        • It takes a look inside the maze object
          • If the dot array at that row and column is one, then it outputs a dot image:

          if ([row][column]==1) {
               outputHTML += "<img "
                    + positionStyle
                    + " src='dot.jpg'>";

            • If the powerpill array at that row and column is one, then it outputs a powerpill image:

          if (mazeObject.pill[row][column]==1) {
               outputHTML += "<img "
                    + positionStyle
                    + " src='powpill.jpg'>";

  4. OUTPUT: It puts positionStyle inside document.getElementById('outputID').innerHTML

Challenge for your future code:

How do you get it so that you would be able to turn off each dot or power pill individually, say, based on their row and column position?