第一次的那种通过 Clip 实现的地图,要摆放小兵易如反掌。我们可以把小兵和图片放在同一个层内
<div>
<小兵>
<地图>
</div>
这种方式不便于以后的数据处理,且图片一大时,占的开销大,传输慢,所以我们依然按格子的办法。
地图实际上有纵横两个方向,第一关的地图为 20 * 20 格。
小兵占领一个格子,所以小兵的字段应有 x,y 两个。
另外,小兵有它的图标,记为 icon 字段。
此外,小兵显示为一个图片,为了便于图片代表的小兵和内存里的小兵访问便捷,我们定义一个字段为图片,名字依然称 div。
所以,小兵定义如下:
// 定义兵类型
function Soldier(x,y,icon)
{
this.x = x;
this.y = y;
this.icon = icon;
var div = document.createElement("img");
div.style.position = "absolute";
div.src = "./images/" + this.icon;
mapFrame.appendChild(div);
this.div = div;
}
增加一个绘制小兵的方法,把所有位于显示区域的小兵绘制出来。
程序见附件。