如何加载带有图像链接的XML文件以用于2D JavaScript数组？

Question

I have been working on a little project in my free time sporadically since June. It is an open source clone of SimTower with original, higher resolution graphics I have made.

At first, I made a webpage that loaded a bunch of images into a 2D array to make a pretty picture that one could scroll through. The main problem then was that certain images (the ones for lobbies) that were supposed to repeat until they reached the edge did not work correctly (because the space given for them is not equal to a multiple of their width and in the future the player will need to be able to draw lobbies with 1 tile-width accuracy).

I decided that the code I was using for loading images into an array could not be reused once I add a simulation and animations so I decided to put the information for the rooms and lobbies into separate XML files that should be loaded by JavaScript to gather the information (price and picture being what matters at the moment).

One problem I have run into is that when trying to load the page with all the data created locally is that all 3 major browsers (Firefox, Chrome, and IE11) throw me error messages about not being able to open files using Http requests. I figured out how to get it to load in chrome by allowing local files to access other files in the same directory.

Once I find out how to load XML files with JavaScript (both online and offline), I will need to figure out how to put the right data in the right place (at the moment, I just want the picture of the rooms to show up in the correct tiles and for their price to be deducted from the budget once placed).

In short this is what I need help with first is this:

Making use of the data within the XML files (what images to use at various times and what the stats should be) that have been loaded (I figured out how to load the XML offline by changing the property of the chrome shortcut).

EDIT: I figured out how to get Chrome to work with letting offline files read other files in the same directory but I need help with the rest (utilizing the data and image links in the XML into the web page). I am practicing with a table first.

I made a JSFiddle but I don't know how much good it will do: http://jsfiddle.net/AzemOcram/4uqz1na0/2/

Here is the XML file I have made:

<?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>

Answer 1

In Chrome you can not load files offline using AJAX unless you start the browser with a special option like --allow-file-access-from-files . See this issue , closed with "won't fix" .