如何加载带有图像链接的 XML 文件，以便在 2D JavaScript 数组中使用

自六月以来，我一直在空闲时间零星地做一个小项目。它是SimTower的开源克隆，具有我制作的原始，更高分辨率的图形。

起初，我制作了一个网页，将一堆图像加载到2D数组中，以制作可以滚动浏览的漂亮图片。当时的主要问题是某些图像（大厅的图像）应该重复直到到达边缘，但无法正常工作（因为为它们提供的空间不等于其宽度的倍数，将来玩家将需要能够以 1 格宽度的精度绘制大厅）。

一旦我添加了模拟和动画，我用于将图像加载到数组中的代码就无法重用，所以我决定将房间和大厅的信息放入单独的XML文件中，这些文件应该由JavaScript加载以收集信息（价格和图片是目前最重要的）。

遇到的一个问题是，当尝试加载包含本地创建的所有数据的页面时，所有 3 种主要浏览器（Firefox、Chrome 和 IE11）都会向我抛出有关无法使用 Http 请求打开文件的错误消息。我想出了如何通过允许本地文件访问同一目录中的其他文件来使其在 chrome 中加载。

发现如何使用JavaScript加载XML文件（在线和离线），我就需要弄清楚如何将正确的数据放在正确的位置（目前，我只想将房间的图片显示在正确的瓷砖中，并且一旦放置，它们的价格就会从预算中扣除）。

简而言之，这是我首先需要帮助的是：

利用已加载的XML文件中的数据（在不同时间使用哪些图像以及统计信息应该是什么）（我想出了如何通过更改chrome快捷方式的属性来离线加载XML）。

编辑：我想出了如何让Chrome让离线文件读取同一目录中的其他文件，但我需要其余的帮助（利用XML中的数据和图像链接进入网页）。我先用桌子练习。

我做了一个JSFiddle，但我不知道它会有多大好处：http://jsfiddle.net/AzemOcram/4uqz1na0/2/

这是我制作的XML文件：

<?xml version="1.0" encoding="utf-8"?>
<Room ID="Large Office">
<Type>Office</Type>
<Name>Large Office</Name>
<Name_Plural>Large Offices</Name_Plural>
<Cost>1200000</Cost>
<PaymentFrequency>monthly</PaymentFrequency>
<PaymentAmount_VeryLow>1100</PaymentAmount_VeryLow>
<PaymentAmount_Low>2200</PaymentAmount_Low>
<PaymentAmount_Average>3300</PaymentAmount_Average>
<PaymentAmount_High>4400</PaymentAmount_High>
<PaymentAmount_VeryHigh>5500</PaymentAmount_VeryHigh>
<TileWidth>10</TileWidth>
<TileHeight>1</TileHeight>
<DestructionCost>100</DestructionCost>
<CanBeDestroyed>True</CanBeDestroyed>
<Variant>
<Occupant>Empty</Occupant>
<Description>A large office room that you may lease out to companies. If demand for offices is low you can always advertise.</Description>
<dayImage>largeOffice-0-day-0.png</dayImage>
<nightImage>largeOffice-0-night-0.png</nightImage>
<Population>0</Population>
<Resource> 
<Electricity>-6</Electricity>
<Water>0</Water>
<Garbage>0</Garbage>
</Resource>
<CleaningNeeds>None</CleaningNeeds>
<CleaningFrequency>None</CleaningFrequency>
<CleaningDay>None</CleaningDay>
<TenantSoundSet>emptyrooms</TenantSoundSet>
</Variant>
<Variant>
<Occupant>1</Occupant>
<Description>A meeting room.</Description>
<dayImage>largeOffice-1-dayoccupied-0.png</dayImage>
<nightImage>largeOffice-1-nightoccupied-0.png</nightImage>
<Population>5</Population>
<Resource> 
<Electricity>-10</Electricity>
<Water>3</Water>
<Garbage>2</Garbage>
</Resource>
<CleaningNeeds>Recommended</CleaningNeeds>
<CleaningFrequency>Weekly</CleaningFrequency>
<CleaningDay>Sat</CleaningDay>
<TenantSoundSet>ConferenceRoom</TenantSoundSet>
</Variant>
<Variant>
<Occupant>2</Occupant>
<Description>A meeting room.</Description>
<dayImage>largeOffice-3-dayoccupied-0.png</dayImage>
<nightImage>largeOffice-3-nightoccupied-0.png</nightImage>
<Population>6</Population>
<Resource> 
<Electricity>-10</Electricity>
<Water>3</Water>
<Garbage>2</Garbage>
</Resource>
<CleaningNeeds>Recommended</CleaningNeeds>
<CleaningFrequency>Weekly</CleaningFrequency>
<CleaningDay>Sat</CleaningDay>
<TenantSoundSet>ConferenceRoom</TenantSoundSet>
</Variant>
<Variant>
<Occupant>3</Occupant>
<Description>A meeting room.</Description>
<dayImage>largeOffice-4-dayoccupied-0.png</dayImage>
<nightImage>largeOffice-4-nightoccupied-0.png</nightImage>
<Population>7</Population>
<Resource> 
<Electricity>-12</Electricity>
<Water>4</Water>
<Garbage>2</Garbage>
</Resource>
<CleaningNeeds>Recommended</CleaningNeeds>
<CleaningFrequency>Weekly</CleaningFrequency>
<CleaningDay>Sat</CleaningDay>
<TenantSoundSet>ConferenceRoom</TenantSoundSet>
</Variant>
<Variant>
<Occupant>4</Occupant>
<Description>A meeting room.</Description>
<dayImage>largeOffice-5-dayoccupied-0.png</dayImage>
<nightImage>largeOffice-5-nightoccupied-0.png</nightImage>
<Population>6</Population>
<Resource> 
<Electricity>-10</Electricity>
<Water>3</Water>
<Garbage>2</Garbage>
</Resource>
<CleaningNeeds>Recommended</CleaningNeeds>
<CleaningFrequency>Weekly</CleaningFrequency>
<CleaningDay>Sat</CleaningDay>
<TenantSoundSet>ConferenceRoom</TenantSoundSet>
</Variant>
<Variant>
<Occupant>5</Occupant>
<Description>A large office room that has been leased out to companies. Very productive. Try to keep them satisfied.</Description>
<dayImage>largeOffice-6-dayoccupied-0.png</dayImage>
<nightImage>largeOffice-6-nightoccupied-0.png</nightImage>
<Population>5</Population>
<Resource> 
<Electricity>-10</Electricity>
<Water>2</Water>
<Garbage>5</Garbage>
</Resource>
<CleaningNeeds>Recommended</CleaningNeeds>
<CleaningFrequency>Weekly</CleaningFrequency>
<CleaningDay>Weekdays</CleaningDay>
<TenantSoundSet>Office</TenantSoundSet>
</Variant>
<Variant>
<Occupant>6</Occupant>
<Description>A large office room that has been leased out to companies. Very productive. Try to keep them satisfied.</Description>
<dayImage>largeOffice-7-dayoccupied-0.png</dayImage>
<nightImage>largeOffice-7-nightoccupied-0.png</nightImage>
<Population>5</Population>
<Resource> 
<Electricity>-10</Electricity>
<Water>2</Water>
<Garbage>5</Garbage>
</Resource>
<CleaningNeeds>Recommended</CleaningNeeds>
<CleaningFrequency>Weekly</CleaningFrequency>
<CleaningDay>Weekdays</CleaningDay>
<TenantSoundSet>Office</TenantSoundSet>
</Variant>
<Variant>
<Occupant>7</Occupant>
<Description>A large office room that has been leased out to companies. Very productive. Try to keep them satisfied.</Description>
<dayImage>largeOffice-8-dayoccupied-0.png</dayImage>
<nightImage>largeOffice-8-nightoccupied-0.png</nightImage>
<Population>5</Population>
<Resource> 
<Electricity>-10</Electricity>
<Water>2</Water>
<Garbage>5</Garbage>
</Resource>
<CleaningNeeds>Recommended</CleaningNeeds>
<CleaningFrequency>Weekly</CleaningFrequency>
<CleaningDay>Weekdays</CleaningDay>
<TenantSoundSet>Office</TenantSoundSet>
</Variant>
<Variant>
<Occupant>8</Occupant>
<Description>A large office room that has been leased out to companies. Very productive. Try to keep them satisfied.</Description>
<dayImage>largeOffice-9-dayoccupied-0.png</dayImage>
<nightImage>largeOffice-9-nightoccupied-0.png</nightImage>
<Population>5</Population>
<Resource> 
<Electricity>-10</Electricity>
<Water>2</Water>
<Garbage>5</Garbage>
</Resource>
<CleaningNeeds>Recommended</CleaningNeeds>
<CleaningFrequency>Weekly</CleaningFrequency>
<CleaningDay>Weekdays</CleaningDay>
<TenantSoundSet>Office</TenantSoundSet>
</Variant>
<Variant>
<Occupant>9</Occupant>
<Description>A large office room that has been leased out to companies. Very productive and high tech. Try to keep them satisfied.</Description>
<dayImage>largeOffice-10-dayoccupied-0.png</dayImage>
<nightImage>largeOffice-10-nightoccupied-0.png</nightImage>
<Population>5</Population>
<Resource> 
<Electricity>-12</Electricity>
<Water>2</Water>
<Garbage>3</Garbage>
</Resource>
<CleaningNeeds>Recommended</CleaningNeeds>
<CleaningFrequency>Weekly</CleaningFrequency>
<CleaningDay>Weekdays</CleaningDay>
<TenantSoundSet>Office</TenantSoundSet>
</Variant>
<Variant>
<Occupant>10</Occupant>
<Description>A meeting room.</Description>
<dayImage>largeOffice-11-dayoccupied-0.png</dayImage>
<nightImage>largeOffice-11-nightoccupied-0.png</nightImage>
<Population>5</Population>
<Resource> 
<Electricity>-10</Electricity>
<Water>3</Water>
<Garbage>2</Garbage>
</Resource>
<CleaningNeeds>Recommended</CleaningNeeds>
<CleaningFrequency>Weekly</CleaningFrequency>
<CleaningDay>Sat</CleaningDay>
<TenantSoundSet>ConferenceRoom</TenantSoundSet>
</Variant>
<Variant>
<Occupant>11</Occupant>
<Description>A large office room that has been leased out to companies. Very productive and high tech. Try to keep them satisfied.</Description>
<dayImage>largeOffice-12-dayoccupied-0.png</dayImage>
<nightImage>largeOffice-12-nightoccupied-0.png</nightImage>
<Population>5</Population>
<Resource> 
<Electricity>-12</Electricity>
<Water>2</Water>
<Garbage>3</Garbage>
</Resource>
<CleaningNeeds>Recommended</CleaningNeeds>
<CleaningFrequency>Weekly</CleaningFrequency>
<CleaningDay>Weekdays</CleaningDay>
<TenantSoundSet>Office</TenantSoundSet>
</Variant>
</Room>