我有一个13 x 20矩阵，每个单元格包含一个介于0到300之间的数字。每个数字代表一个不同的图块，因此可以从该矩阵构建 map 。
除此之外，我还有一个“英雄”角色-可移动图片。按下箭头时，它将朝该方向移动。有些瓷砖可以使英雄行走，而有些则不能。为了知道我的英雄可以走到哪里以及不可以走到哪里，我希望他每次 Action 都能使我知道他所在的矩阵中的哪个单元。如果他介于某些单元格之间，我会选择他最常在的单元格(因为例如-如果三分之一的英雄在[2,5]单元格上，其余英雄在[2,6]单元格上，我仍然会说他在[2,6]单元格上。因此，我检查了document.getElementById("man").style.top(其中“man”是我的“hero”的ID)。如果介于98和48之间，则认为该行为0，如果介于99和151之间，则为1行，依此类推，我对document.getElementById("man").style.right进行了相同的操作。一切正常!直到...我复制了文件，然后继续在另一台计算机上对其进行处理。发生了四件事:
到目前为止，
.html文件时，某些平铺图片未显示。我检查了原因-在Chrome上似乎正在寻找其他名称的图片。例如，我有一个名为yellow_grass_round_top_right.bmp的图块图片。在Chrome上，按下检查元素时，似乎正在寻找一个名为þþyellow_grass_round_top_right.bmp的图片，我不知道“the”来自何处，在其他图块上添加了几个“þ”(而不仅仅是两个)。我不知道为什么要在图片名称前加上这些“þ”，并且我仔细检查了一下以确保我没有想象任何东西。 CTRL -七次(!)。在chrome上，它在同一行上，没有任何缩放(放大或缩小)。 CTRL -进行七次编码后，终于能够看到其行上的图块之后，我进行了刷新，可以按照我在第3节中提到的正确和最上面的差异行走，然后根据自己的位置检查我现在所在的单元格代码，然后在Chrome上进行检查，并得到了不同的答案。因此，我认为，不仅位置不同，而且在同一台计算机和屏幕上的不同浏览器上，位置都有差异吗？有没有办法解决这个问题？将其设置为与任何浏览器相同的位置？还是这不可能？ 由于我的代码大约有2600行，因此我认为附加它也无济于事，但是下面是我发现的一些相关代码:
。
英雄的牢房信息
function checkNextRightPos(xx)
{
if((xx<=1246) && (xx>=1200))
return 0;
else if((xx<1200) && (xx>=1150))
return 1;
else if((xx<1150) && (xx>=1100))
return 2;
else if((xx<1100) && (xx>=1050))
return 3;
else if((xx<1050) && (xx>=1000))
return 4;
else if((xx<1000) && (xx>=950))
return 5;
else if((xx<950) && (xx>=900))
return 6;
else if((xx<900) && (xx>=850))
return 7;
else if((xx<850) && (xx>=800))
return 8;
else if((xx<800) && (xx>=750))
return 9;
else if((xx<750) && (xx>=700))
return 10;
else if((xx<700) && (xx>=650))
return 11;
else if((xx<650) && (xx>=600))
return 12;
else if((xx<600) && (xx>=550))
return 13;
else if((xx<550) && (xx>=500))
return 14;
else if((xx<500) && (xx>=450))
return 15;
else if((xx<450) && (xx>=400))
return 16;
else if((xx<400) && (xx>=350))
return 17;
else if((xx<350) && (xx>=295))
return 18;
else if((xx<295) && (xx>=245))
return 19;
else return -1;
}
function checkRightPos()
{
jj=checkNextRightPos(rightPos);
}
function checkNextTopPos(xx)
{
if((xx<=98) && (xx>=46))
return 0;
else if((xx<151) && (xx>=99))
return 1;
else if((xx<203) && (xx>=151))
return 2;
else if((xx<255) && (xx>=203))
return 3;
else if((xx<307) && (xx>=255))
return 4;
else if((xx<359) && (xx>=307))
return 5;
else if((xx<411) && (xx>=359))
return 6;
else if((xx<463) && (xx>=411))
return 7;
else if((xx<515) && (xx>=463))
return 8;
else if((xx<567) && (xx>=515))
return 9;
else if((xx<619) && (xx>=567))
return 10;
else if((xx<671) && (xx>=619))
return 11;
else if((xx<723) && (xx>=671))
return 12;
}
function checkTopPos()
{
ii=checkNextTopPos(topPos);
}
ii表示我所在的行，jj表示该列。
。
从矩阵生成 map
function makeMap()
{
var name="";
for(var i=0; i<shurot; i++)
for(var j=0; j<amudot; j++)
{
name="puzzle"+i+"x"+j;
if(board[i][j]==0)
{
//alert(name);
document.getElementById(name).src="blank.bmp";
}
else if(board[i][j]==1)
{
//alert(name);
document.getElementById(name).src="ground.bmp";
}
else if(board[i][j]==2)
document.getElementById(name).src="tree_1.bmp";
else if(board[i][j]==3)
document.getElementById(name).src="tree_2.bmp";
else if(board[i][j]==4)
document.getElementById(name).src="tree_border.bmp";
else if(board[i][j]==5)
document.getElementById(name).src="forest_1.bmp";
else if(board[i][j]==6)
document.getElementById(name).src="forest_2.bmp";
else if(board[i][j]==7)
document.getElementById(name).src="forest_border.bmp";
else if(board[i][j]==8)
document.getElementById(name).src="cut_tree.bmp";
else if(board[i][j]==9)
document.getElementById(name).src="bush.bmp";
else if(board[i][j]==10)
document.getElementById(name).src="bush_border.bmp";
}
}
这只是代码的一部分(这里不需要写300行，除了数量和图块的差异外，它们几乎都是重复的)。
我有260张名字如下的图片
至
。
可以在以下HTML部分看到它们:
<p style="line-height:0px">
<img src="blank.bmp" width=50 height=52 id="puzzle0x0"><img src="blank.bmp" width=50 height=52 id="puzzle0x1"><img src="blank.bmp" width=50 height=52 id="puzzle0x2"><img src="blank.bmp" width=50 height=52 id="puzzle0x3"><img src="blank.bmp" width=50 height=52 id="puzzle0x4"><img src="blank.bmp" width=50 height=52 id="puzzle0x5"><img src="blank.bmp" width=50 height=52 id="puzzle0x6"><img src="blank.bmp" width=50 height=52 id="puzzle0x7"><img src="blank.bmp" width=50 height=52 id="puzzle0x8"><img src="blank.bmp" width=50 height=52 id="puzzle0x9"><img src="blank.bmp" width=50 height=52 id="puzzle0x10"><img src="blank.bmp" width=50 height=52 id="puzzle0x11"><img src="blank.bmp" width=50 height=52 id="puzzle0x12"><img src="blank.bmp" width=50 height=52 id="puzzle0x13"><img src="blank.bmp" width=50 height=52 id="puzzle0x14"><img src="blank.bmp" width=50 height=52 id="puzzle0x15"><img src="blank.bmp" width=50 height=52 id="puzzle0x16"><img src="blank.bmp" width=50 height=52 id="puzzle0x17"><img src="blank.bmp" width=50 height=52 id="puzzle0x18"><img src="blank.bmp" width=50 height=52 id="puzzle0x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle1x0"><img src="blank.bmp" width=50 height=52 id="puzzle1x1"><img src="blank.bmp" width=50 height=52 id="puzzle1x2"><img src="blank.bmp" width=50 height=52 id="puzzle1x3"><img src="blank.bmp" width=50 height=52 id="puzzle1x4"><img src="blank.bmp" width=50 height=52 id="puzzle1x5"><img src="blank.bmp" width=50 height=52 id="puzzle1x6"><img src="blank.bmp" width=50 height=52 id="puzzle1x7"><img src="blank.bmp" width=50 height=52 id="puzzle1x8"><img src="blank.bmp" width=50 height=52 id="puzzle1x9"><img src="blank.bmp" width=50 height=52 id="puzzle1x10"><img src="blank.bmp" width=50 height=52 id="puzzle1x11"><img src="blank.bmp" width=50 height=52 id="puzzle1x12"><img src="blank.bmp" width=50 height=52 id="puzzle1x13"><img src="blank.bmp" width=50 height=52 id="puzzle1x14"><img src="blank.bmp" width=50 height=52 id="puzzle1x15"><img src="blank.bmp" width=50 height=52 id="puzzle1x16"><img src="blank.bmp" width=50 height=52 id="puzzle1x17"><img src="blank.bmp" width=50 height=52 id="puzzle1x18"><img src="blank.bmp" width=50 height=52 id="puzzle1x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle2x0"><img src="blank.bmp" width=50 height=52 id="puzzle2x1"><img src="blank.bmp" width=50 height=52 id="puzzle2x2"><img src="blank.bmp" width=50 height=52 id="puzzle2x3"><img src="blank.bmp" width=50 height=52 id="puzzle2x4"><img src="blank.bmp" width=50 height=52 id="puzzle2x5"><img src="blank.bmp" width=50 height=52 id="puzzle2x6"><img src="blank.bmp" width=50 height=52 id="puzzle2x7"><img src="blank.bmp" width=50 height=52 id="puzzle2x8"><img src="blank.bmp" width=50 height=52 id="puzzle2x9"><img src="blank.bmp" width=50 height=52 id="puzzle2x10"><img src="blank.bmp" width=50 height=52 id="puzzle2x11"><img src="blank.bmp" width=50 height=52 id="puzzle2x12"><img src="blank.bmp" width=50 height=52 id="puzzle2x13"><img src="blank.bmp" width=50 height=52 id="puzzle2x14"><img src="blank.bmp" width=50 height=52 id="puzzle2x15"><img src="blank.bmp" width=50 height=52 id="puzzle2x16"><img src="blank.bmp" width=50 height=52 id="puzzle2x17"><img src="blank.bmp" width=50 height=52 id="puzzle2x18"><img src="blank.bmp" width=50 height=52 id="puzzle2x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle3x0"><img src="blank.bmp" width=50 height=52 id="puzzle3x1"><img src="blank.bmp" width=50 height=52 id="puzzle3x2"><img src="blank.bmp" width=50 height=52 id="puzzle3x3"><img src="blank.bmp" width=50 height=52 id="puzzle3x4"><img src="blank.bmp" width=50 height=52 id="puzzle3x5"><img src="blank.bmp" width=50 height=52 id="puzzle3x6"><img src="blank.bmp" width=50 height=52 id="puzzle3x7"><img src="blank.bmp" width=50 height=52 id="puzzle3x8"><img src="blank.bmp" width=50 height=52 id="puzzle3x9"><img src="blank.bmp" width=50 height=52 id="puzzle3x10"><img src="blank.bmp" width=50 height=52 id="puzzle3x11"><img src="blank.bmp" width=50 height=52 id="puzzle3x12"><img src="blank.bmp" width=50 height=52 id="puzzle3x13"><img src="blank.bmp" width=50 height=52 id="puzzle3x14"><img src="blank.bmp" width=50 height=52 id="puzzle3x15"><img src="blank.bmp" width=50 height=52 id="puzzle3x16"><img src="blank.bmp" width=50 height=52 id="puzzle3x17"><img src="blank.bmp" width=50 height=52 id="puzzle3x18"><img src="blank.bmp" width=50 height=52 id="puzzle3x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle4x0"><img src="blank.bmp" width=50 height=52 id="puzzle4x1"><img src="blank.bmp" width=50 height=52 id="puzzle4x2"><img src="blank.bmp" width=50 height=52 id="puzzle4x3"><img src="blank.bmp" width=50 height=52 id="puzzle4x4"><img src="blank.bmp" width=50 height=52 id="puzzle4x5"><img src="blank.bmp" width=50 height=52 id="puzzle4x6"><img src="blank.bmp" width=50 height=52 id="puzzle4x7"><img src="blank.bmp" width=50 height=52 id="puzzle4x8"><img src="blank.bmp" width=50 height=52 id="puzzle4x9"><img src="blank.bmp" width=50 height=52 id="puzzle4x10"><img src="blank.bmp" width=50 height=52 id="puzzle4x11"><img src="blank.bmp" width=50 height=52 id="puzzle4x12"><img src="blank.bmp" width=50 height=52 id="puzzle4x13"><img src="blank.bmp" width=50 height=52 id="puzzle4x14"><img src="blank.bmp" width=50 height=52 id="puzzle4x15"><img src="blank.bmp" width=50 height=52 id="puzzle4x16"><img src="blank.bmp" width=50 height=52 id="puzzle4x17"><img src="blank.bmp" width=50 height=52 id="puzzle4x18"><img src="blank.bmp" width=50 height=52 id="puzzle4x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle5x0"><img src="blank.bmp" width=50 height=52 id="puzzle5x1"><img src="blank.bmp" width=50 height=52 id="puzzle5x2"><img src="blank.bmp" width=50 height=52 id="puzzle5x3"><img src="blank.bmp" width=50 height=52 id="puzzle5x4"><img src="blank.bmp" width=50 height=52 id="puzzle5x5"><img src="blank.bmp" width=50 height=52 id="puzzle5x6"><img src="blank.bmp" width=50 height=52 id="puzzle5x7"><img src="blank.bmp" width=50 height=52 id="puzzle5x8"><img src="blank.bmp" width=50 height=52 id="puzzle5x9"><img src="blank.bmp" width=50 height=52 id="puzzle5x10"><img src="blank.bmp" width=50 height=52 id="puzzle5x11"><img src="blank.bmp" width=50 height=52 id="puzzle5x12"><img src="blank.bmp" width=50 height=52 id="puzzle5x13"><img src="blank.bmp" width=50 height=52 id="puzzle5x14"><img src="blank.bmp" width=50 height=52 id="puzzle5x15"><img src="blank.bmp" width=50 height=52 id="puzzle5x16"><img src="blank.bmp" width=50 height=52 id="puzzle5x17"><img src="blank.bmp" width=50 height=52 id="puzzle5x18"><img src="blank.bmp" width=50 height=52 id="puzzle5x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle6x0"><img src="blank.bmp" width=50 height=52 id="puzzle6x1"><img src="blank.bmp" width=50 height=52 id="puzzle6x2"><img src="blank.bmp" width=50 height=52 id="puzzle6x3"><img src="blank.bmp" width=50 height=52 id="puzzle6x4"><img src="blank.bmp" width=50 height=52 id="puzzle6x5"><img src="blank.bmp" width=50 height=52 id="puzzle6x6"><img src="blank.bmp" width=50 height=52 id="puzzle6x7"><img src="blank.bmp" width=50 height=52 id="puzzle6x8"><img src="blank.bmp" width=50 height=52 id="puzzle6x9"><img src="blank.bmp" width=50 height=52 id="puzzle6x10"><img src="blank.bmp" width=50 height=52 id="puzzle6x11"><img src="blank.bmp" width=50 height=52 id="puzzle6x12"><img src="blank.bmp" width=50 height=52 id="puzzle6x13"><img src="blank.bmp" width=50 height=52 id="puzzle6x14"><img src="blank.bmp" width=50 height=52 id="puzzle6x15"><img src="blank.bmp" width=50 height=52 id="puzzle6x16"><img src="blank.bmp" width=50 height=52 id="puzzle6x17"><img src="blank.bmp" width=50 height=52 id="puzzle6x18"><img src="blank.bmp" width=50 height=52 id="puzzle6x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle7x0"><img src="blank.bmp" width=50 height=52 id="puzzle7x1"><img src="blank.bmp" width=50 height=52 id="puzzle7x2"><img src="blank.bmp" width=50 height=52 id="puzzle7x3"><img src="blank.bmp" width=50 height=52 id="puzzle7x4"><img src="blank.bmp" width=50 height=52 id="puzzle7x5"><img src="blank.bmp" width=50 height=52 id="puzzle7x6"><img src="blank.bmp" width=50 height=52 id="puzzle7x7"><img src="blank.bmp" width=50 height=52 id="puzzle7x8"><img src="blank.bmp" width=50 height=52 id="puzzle7x9"><img src="blank.bmp" width=50 height=52 id="puzzle7x10"><img src="blank.bmp" width=50 height=52 id="puzzle7x11"><img src="blank.bmp" width=50 height=52 id="puzzle7x12"><img src="blank.bmp" width=50 height=52 id="puzzle7x13"><img src="blank.bmp" width=50 height=52 id="puzzle7x14"><img src="blank.bmp" width=50 height=52 id="puzzle7x15"><img src="blank.bmp" width=50 height=52 id="puzzle7x16"><img src="blank.bmp" width=50 height=52 id="puzzle7x17"><img src="blank.bmp" width=50 height=52 id="puzzle7x18"><img src="blank.bmp" width=50 height=52 id="puzzle7x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle8x0"><img src="blank.bmp" width=50 height=52 id="puzzle8x1"><img src="blank.bmp" width=50 height=52 id="puzzle8x2"><img src="blank.bmp" width=50 height=52 id="puzzle8x3"><img src="blank.bmp" width=50 height=52 id="puzzle8x4"><img src="blank.bmp" width=50 height=52 id="puzzle8x5"><img src="blank.bmp" width=50 height=52 id="puzzle8x6"><img src="blank.bmp" width=50 height=52 id="puzzle8x7"><img src="blank.bmp" width=50 height=52 id="puzzle8x8"><img src="blank.bmp" width=50 height=52 id="puzzle8x9"><img src="blank.bmp" width=50 height=52 id="puzzle8x10"><img src="blank.bmp" width=50 height=52 id="puzzle8x11"><img src="blank.bmp" width=50 height=52 id="puzzle8x12"><img src="blank.bmp" width=50 height=52 id="puzzle8x13"><img src="blank.bmp" width=50 height=52 id="puzzle8x14"><img src="blank.bmp" width=50 height=52 id="puzzle8x15"><img src="blank.bmp" width=50 height=52 id="puzzle8x16"><img src="blank.bmp" width=50 height=52 id="puzzle8x17"><img src="blank.bmp" width=50 height=52 id="puzzle8x18"><img src="blank.bmp" width=50 height=52 id="puzzle8x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle9x0"><img src="blank.bmp" width=50 height=52 id="puzzle9x1"><img src="blank.bmp" width=50 height=52 id="puzzle9x2"><img src="blank.bmp" width=50 height=52 id="puzzle9x3"><img src="blank.bmp" width=50 height=52 id="puzzle9x4"><img src="blank.bmp" width=50 height=52 id="puzzle9x5"><img src="blank.bmp" width=50 height=52 id="puzzle9x6"><img src="blank.bmp" width=50 height=52 id="puzzle9x7"><img src="blank.bmp" width=50 height=52 id="puzzle9x8"><img src="blank.bmp" width=50 height=52 id="puzzle9x9"><img src="blank.bmp" width=50 height=52 id="puzzle9x10"><img src="blank.bmp" width=50 height=52 id="puzzle9x11"><img src="blank.bmp" width=50 height=52 id="puzzle9x12"><img src="blank.bmp" width=50 height=52 id="puzzle9x13"><img src="blank.bmp" width=50 height=52 id="puzzle9x14"><img src="blank.bmp" width=50 height=52 id="puzzle9x15"><img src="blank.bmp" width=50 height=52 id="puzzle9x16"><img src="blank.bmp" width=50 height=52 id="puzzle9x17"><img src="blank.bmp" width=50 height=52 id="puzzle9x18"><img src="blank.bmp" width=50 height=52 id="puzzle9x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle10x0"><img src="blank.bmp" width=50 height=52 id="puzzle10x1"><img src="blank.bmp" width=50 height=52 id="puzzle10x2"><img src="blank.bmp" width=50 height=52 id="puzzle10x3"><img src="blank.bmp" width=50 height=52 id="puzzle10x4"><img src="blank.bmp" width=50 height=52 id="puzzle10x5"><img src="blank.bmp" width=50 height=52 id="puzzle10x6"><img src="blank.bmp" width=50 height=52 id="puzzle10x7"><img src="blank.bmp" width=50 height=52 id="puzzle10x8"><img src="blank.bmp" width=50 height=52 id="puzzle10x9"><img src="blank.bmp" width=50 height=52 id="puzzle10x10"><img src="blank.bmp" width=50 height=52 id="puzzle10x11"><img src="blank.bmp" width=50 height=52 id="puzzle10x12"><img src="blank.bmp" width=50 height=52 id="puzzle10x13"><img src="blank.bmp" width=50 height=52 id="puzzle10x14"><img src="blank.bmp" width=50 height=52 id="puzzle10x15"><img src="blank.bmp" width=50 height=52 id="puzzle10x16"><img src="blank.bmp" width=50 height=52 id="puzzle10x17"><img src="blank.bmp" width=50 height=52 id="puzzle10x18"><img src="blank.bmp" width=50 height=52 id="puzzle10x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle11x0"><img src="blank.bmp" width=50 height=52 id="puzzle11x1"><img src="blank.bmp" width=50 height=52 id="puzzle11x2"><img src="blank.bmp" width=50 height=52 id="puzzle11x3"><img src="blank.bmp" width=50 height=52 id="puzzle11x4"><img src="blank.bmp" width=50 height=52 id="puzzle11x5"><img src="blank.bmp" width=50 height=52 id="puzzle11x6"><img src="blank.bmp" width=50 height=52 id="puzzle11x7"><img src="blank.bmp" width=50 height=52 id="puzzle11x8"><img src="blank.bmp" width=50 height=52 id="puzzle11x9"><img src="blank.bmp" width=50 height=52 id="puzzle11x10"><img src="blank.bmp" width=50 height=52 id="puzzle11x11"><img src="blank.bmp" width=50 height=52 id="puzzle11x12"><img src="blank.bmp" width=50 height=52 id="puzzle11x13"><img src="blank.bmp" width=50 height=52 id="puzzle11x14"><img src="blank.bmp" width=50 height=52 id="puzzle11x15"><img src="blank.bmp" width=50 height=52 id="puzzle11x16"><img src="blank.bmp" width=50 height=52 id="puzzle11x17"><img src="blank.bmp" width=50 height=52 id="puzzle11x18"><img src="blank.bmp" width=50 height=52 id="puzzle11x19"><br>
<img src="blank.bmp" width=50 height=52 id="puzzle12x0"><img src="blank.bmp" width=50 height=52 id="puzzle12x1"><img src="blank.bmp" width=50 height=52 id="puzzle12x2"><img src="blank.bmp" width=50 height=52 id="puzzle12x3"><img src="blank.bmp" width=50 height=52 id="puzzle12x4"><img src="blank.bmp" width=50 height=52 id="puzzle12x5"><img src="blank.bmp" width=50 height=52 id="puzzle12x6"><img src="blank.bmp" width=50 height=52 id="puzzle12x7"><img src="blank.bmp" width=50 height=52 id="puzzle12x8"><img src="blank.bmp" width=50 height=52 id="puzzle12x9"><img src="blank.bmp" width=50 height=52 id="puzzle12x10"><img src="blank.bmp" width=50 height=52 id="puzzle12x11"><img src="blank.bmp" width=50 height=52 id="puzzle12x12"><img src="blank.bmp" width=50 height=52 id="puzzle12x13"><img src="blank.bmp" width=50 height=52 id="puzzle12x14"><img src="blank.bmp" width=50 height=52 id="puzzle12x15"><img src="blank.bmp" width=50 height=52 id="puzzle12x16"><img src="blank.bmp" width=50 height=52 id="puzzle12x17"><img src="blank.bmp" width=50 height=52 id="puzzle12x18"><img src="blank.bmp" width=50 height=52 id="puzzle12x19"><br>
</p>
我认为这是所有相关的代码，但是如果缺少任何其他内容，而您认为它是相关的，我会添加它(只是不想添加不必要的代码，因为它已经足够长了)。
如果有人能解决我提到的问题之一，我将很高兴听到如何解决这些问题。
谢谢!
最佳答案
获取坐标非常简单:
var node = document.getElementById(someId);
var x = node.offsetLeft;
var y = node.offsetTop;
var width = node.offsetWidth;
var height = node.offsetHeight;
但是，您似乎更想尝试在屏幕上准确设置图块的
x,y坐标。因此，首先将
padding，margin，border以及可能的所有[相关]元素的line-height设置为0。* {
padding: 0;
margin: 0;
border: 0;
line-height: 0;
}
然后，要么绝对定位图像:
<style type='text/css'>
img.tile {
position: absolute;
width: 50px;
height: 52px;
}
</style>
<img class='tile' style='top: 1px; left: 51px;' />
<img class='tile' style='top: 1px; left: 101px;' />
<img class='tile' style='top: 1px; left: 151px;' />
<img class='tile' style='top: 51px; left: 1px;' />
<!-- etc. -->
或将它们放在表格中(禁忌，我知道):
<style type='text/css'>
table.gameboard {
width: 500px;
height: 520px;
}
table.gameboard td {
width: 50px;
height: 52px;
border-spacing: 0px;
border-collapse: collapse;
}
</style>
<table class='gameboard'>
<tr>
<td><img src='whatever.png' /></td>
<td><img src='whatever.png' /></td>
<td><img src='whatever.png' /></td>
<!-- etc. -->
</tr>
<tr>
<td><img src='whatever.png' /></td>
<td><img src='whatever.png' /></td>
<td><img src='whatever.png' /></td>
<!-- etc. -->
</tr>
<!-- etc. -->
</table>
优点:不要只依赖每个图块的预先计算位置。创建引用每个图块节点的真实对象:
function Tile() {
this.node = initalizeHoweverYouWant();
this.contains = function(x, y) {
if (
x >= this.node.offsetLeft
&& x <= (this.node.offsetLeft + this.node.offsetWidth)
&& y >= this.node.offsetTop
&& y <= (this.node.offsetTop + this.node.offsetHeight)
) {
return true;
} else {
return false;
}
}
}
然后是某种
GameBoard对象，它遍历可能的图块，并使用鼠标的x-y坐标在每个图块上调用tile.contains()。您可以在此处添加魔术，即“我可以肯定地确定XY瓷砖XY包含坐标x，y”，或，您实际上可以在将瓷砖添加到板上时创建索引。坦白地说，如果您仅使用300块瓷砖，那么遍历所有300块瓷砖可能不会引起明显的性能问题。