Tile 地图 - WEB三国 - 设计与修改 - 轩辕春秋文化论坛 20周年


	浮生宛若寄


	忠信伯宁武军节度使

组别	节度使
级别	破贼校尉
功绩	61
帖子	74
编号	55707
注册	2005-12-21

#1

发表于 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 代码请嗣后下载。

[广告] 《精忠报国岳飞传完整版》火热发布


	浮生宛若寄


	忠信伯宁武军节度使

组别	节度使
级别	破贼校尉
功绩	61
帖子	74
编号	55707
注册	2005-12-21

#2

发表于 2006-1-9 20:48 资料文集短消息只看该作者

欲让地图能漫游，挂上类似昨天的鼠标事件就可以了。

今天的事件处理交给格子自己完成。在创建格子的时候，为格子编写鼠标处理函数。
形如：

if(j == 0){
div.onmousemove=function() {
offY --;
drawMap();
}
}

这时地图已经可以漂移了。

[广告] 真诚支持说岳，携手共创辉煌


	浮生宛若寄


	忠信伯宁武军节度使

组别	节度使
级别	破贼校尉
功绩	61
帖子	74
编号	55707
注册	2005-12-21

#3

发表于 2006-1-9 20:57 资料文集短消息只看该作者

最后，加入触边界检查代码。

由于 div.style.backgroundImage 使用的 url 方式速度太慢，改用 img 标记实现。

整个程序连同切割好的图片都在附件内。

项目以后要用的地图，和这个差别并不大。唯需要增加预读图片的能力，改进鼠标移动事件的处理，以及进一步的封装。

附件: tiled_map.rar (2006-1-9 20:57, 416.34 K)
该附件被下载次数 224

[广告] 《精忠报国岳飞传完整版》火热发布


	金圭子


	白衣伯爵中大夫 ★

组别	白衣卿相
级别	征西将军
好贴	4
功绩	265
帖子	4926
编号	27961
注册	2004-12-16

#4

发表于 2006-1-10 01:33 资料文集短消息只看该作者

如果完全照搬的话，还可以增加鼠标变形功能…………
不过现在滑动的好快………………

看了看代码，完全用++和--来实现啊。这样本机么太快，网上如果预读效果差了么太慢。
而且没必要做到1象素1象素的位移啊

加个setTimeout，然后把一次移动的象素加多点（甚至可以一次跳动一格）这样可以么？

[广告] 《精忠报国岳飞传完整版》火热发布


	浮生宛若寄


	忠信伯宁武军节度使

组别	节度使
级别	破贼校尉
功绩	61
帖子	74
编号	55707
注册	2005-12-21

#5

发表于 2006-1-10 19:59 资料文集短消息只看该作者

是的。鼠标移动正需要这样改进。

[广告] 《精忠报国岳飞传完整版》火热发布