Click to add the dots!

Using data to precisely position images

1. User interface
   • CSS code that sets images to absolute positioning:
     <style>
     img {
          position: absolute;
     }
<style>
   • 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 (mazeObject.dot[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?