12-游戏区域

选择背景色：黄橙洋红淡粉水蓝草绿白色选择字体：宋体黑体微软雅黑楷体选择字体大小：小中大特恢复默认

游戏区域是一个15×15的网格，每个网格是32×32的图片。总共有225个图片，宽度和高度都是480像素。每次开始新游戏的时候，所有的对象将被随机摆放在网格中。playField[]数组由15行、15列的元素组成。只需通过playField[row][col]就可以很容易地访问所有的225个图片。

首先，在playField数组的每一个位置上放置道路图片。然后，随机放置所有墙体图片（墙体图片将在playField数组中取代一部分道路图片的位置）。

接下来，随机放置所有的坦克图片。与墙体图片不同，坦克图片不会在playField数组中取代道路图片。相反地，它们会被放入一个命名为enemy的数组中。为了确保玩家和目标不会和敌方坦克放置在同一个位置，还要创建另一个名为items的数组。

items也是一个二维数组，有15行和15列。这个数组可以被想象为游戏区域的第2层数据。与playField数组不同，这个数组仅仅用于确保在构建游戏区域的过程中，不会将两个对象（玩家、敌人或目标）放置在同一个位置。此处必须使用这个办法，因为还没有将玩家和敌人对象加入到playField数组中。

一旦放置完敌人，就把玩家随机放置在一个没有被敌人和墙体占用的位置。最后，将目标放置在一个没有被玩家、墙体和敌方坦克占用的位置。

相关代码位于createPlayFiled()函数中。如果读者想查看代码，参见9.3.12节。

所有游戏区域相关的数据都将存储在应用程序作用域范围的变量中。

//游戏区域
var playField = [];
var items = [];
var xMin = 0;
var xMax = 480;
var yMin = 0;
var yMax = 480;

为了创建游戏区域，游戏代码需要知道每种类型图片的最大值。这些值也是应用程序作用域范围的变量。

var wallMax = 25;
var playerMax = 1;
var enemyMax = 20;
var goalMax = 1;