标题:
Tile 地图
[打印本页]
作者:
浮生宛若寄
时间:
2006-1-9 20:09
依然用上次的两幅图。
计有:
镂空战场 - 1
地图 - 1 尺寸为 960 * 960
使用 Photoshop 的 ImageReady 套件把地图裁切为 48 * 48 的格子，共计 20 * 20 = 400 个。定义好切片的名字，从 1 - 400。
我们把用户看到的战场部分，也即镂空的空白，叫做取景框。
由于使用格子模式，这次要移动地图的话实际上是更换格子所使用的图片，所以取景框不需要移动。
取景框内有 13 * 7 = 91 个格子，由于数量太多，现通过循环生成。
for(var i = 0; i < 13; i++)
{
for(var j = 0; j < 7; j ++)
{
var div = document.
createElement
("div");
div.style.position = "absolute";
mapFrame.
appendChild
(div); // 增加到取景框
div.style.left = i * 48;
div.style.top = j * 48;
div.style.width = 48;
div.style.height = 48;
div.style.backgroundColor = "red"; // 红之
}
}
这段代码运行之后会动态创建 13 * 7 个格子，安放于取景框内，填满整个取景框。
HTML 代码请嗣后下载。
作者:
浮生宛若寄
时间:
2006-1-9 20:48
欲让地图能漫游，挂上类似昨天的鼠标事件就可以了。
今天的事件处理交给格子自己完成。在创建格子的时候，为格子编写鼠标处理函数。
形如：
if(j == 0){
div.onmousemove=function() {
offY --;
drawMap();
}
}
这时地图已经可以漂移了。
作者:
浮生宛若寄
时间:
2006-1-9 20:57
最后，加入触边界检查代码。
由于 div.style.backgroundImage 使用的 url 方式速度太慢，改用 img 标记实现。
整个程序连同切割好的图片都在附件内。
项目以后要用的地图，和这个差别并不大。唯需要增加预读图片的能力，改进鼠标移动事件的处理，以及进一步的封装。
附件:
tiled_map.rar
(2006-1-9 20:57, 416.34 K) / 该附件被下载次数 223
http://xycq.org.cn/forum/attachment.php?aid=11474
作者:
金圭子
时间:
2006-1-10 01:33
如果完全照搬的话，还可以增加鼠标变形功能…………
不过现在滑动的好快………………
看了看代码，完全用++和--来实现啊。这样本机么太快，网上如果预读效果差了么太慢。
而且没必要做到1象素1象素的位移啊
加个setTimeout，然后把一次移动的象素加多点（甚至可以一次跳动一格）这样可以么？
作者:
浮生宛若寄
时间:
2006-1-10 19:59
是的。鼠标移动正需要这样改进。
欢迎光临 轩辕春秋文化论坛 (http://xycq.org.cn/forum/)
Powered by Discuz! 5.0.0
附件:
tiled_map.rar (2006-1-9 20:57, 416.34 K) / 该附件被下载次数 223