我制作了一个具有交互消色功能的 10 x 10 游戏板。
我首先使用一个数组来定义网格。下面创建一个包含 100 个对象槽的数组。
示例:http://apps.facebook.com/AnotherGrid/ 上的游戏只需登录即可玩并查看运行中的网格。该数组为我的游戏动态生成 1000 个网格。
<?php
$lvl = array(
/* row0 */' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ',
/* row1 */' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ',
/* row2 */' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ',
/* row3 */' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ',
/* row4 */' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ',
/* row5 */' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ',
/* row6 */' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ',
/* row7 */' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ',
/* row8 */' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ',
/* row9 */' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '
);
?>
然后我用了:
foreach ($lvl as $key => $value) {
echo '<div class="grid" id="'.$key.'"onclick="null">'.$value.'</div>';
}
编写网格,并使用 CSS 定义 display: inline-block 到每个 div。
对于每一个的定位都是基于数组对象的位置。 将是第一个到 99 的正方形。
<?php
$lvl = array(
/* row0 */'black', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ',
/* row1 */' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ',
/* row2 */' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ',
/* row3 */' ', ' ', ' ', ' ', 'yellow', ' ', ' ', ' ', ' ', ' ',
/* row4 */' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ',
/* row5 */' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ',
/* row6 */' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ',
/* row7 */' ', ' ', ' ', 'blue', ' ', ' ', ' ', 'green', ' ', ' ',
/* row8 */' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ',
/* row9 */' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '
);
?>