I made a game board 10 x 10 with interacting color elimination.
I use an array to first define the grid. Below creates an array with 100 object slots.
SAMPLE: Game at http://apps.facebook.com/AnotherGrid/ Just login to play and see the grid in action. This array generates 1000 grids for my game dynamicly.
<?php
$lvl = array(
/* row0 */' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ',
/* row1 */' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ',
/* row2 */' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ',
/* row3 */' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ',
/* row4 */' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ',
/* row5 */' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ',
/* row6 */' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ',
/* row7 */' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ',
/* row8 */' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ',
/* row9 */' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '
);
?>
then i used:
foreach ($lvl as $key => $value) {
echo '<div class="grid" id="'.$key.'"onclick="null">'.$value.'</div>';
}
to write the grid, and used CSS to define display: inline-block to each div.
For positioning of each is based on the position of the array object. < div id="0" > would be the very first square upto 99.
<?php
$lvl = array(
/* row0 */'black', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ',
/* row1 */' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ',
/* row2 */' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ',
/* row3 */' ', ' ', ' ', ' ', 'yellow', ' ', ' ', ' ', ' ', ' ',
/* row4 */' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ',
/* row5 */' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ',
/* row6 */' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ',
/* row7 */' ', ' ', ' ', 'blue', ' ', ' ', ' ', 'green', ' ', ' ',
/* row8 */' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ',
/* row9 */' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '
);
?>