CTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js"></script>
<!-- Because chrome let us not retreive the data locally, insert the json into the window scope -->
<script src="data.js" type="text/javascript"></script>
<script src="js/game.js" type="text/javascript"></script>
<script src="custom.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="title"></div>
</div>
<div id="main">
<div id="image-wrapper">
<div id="stats"></div>
<div id="inventory"></div>
<div id="tag"></div>
<img id="image" width="1000" src="" usemap="#map" />
<div id="image-caption"> </div>
<div id="image-loading"></div>
<div id="fakemap">
<div id="fakemap-inner">
</div>
</div>
<map name="map" id="map"></map>
</div>
<div id="messages"></div>
<div id="responses"></div>
</div>
</div>
<div id="footer"></div>
</body>
</html>
Here is the data.js file
window.game_data = {
"image_width": 800,
"begin_page": "_begin",
"pages": {
"2": {
"image": "images/dragon-2.jpg",
"responses": [
{
"text": "click here",
"href": 3,
"func": null
}
]
},
"3": {
"image": "images/dragon-3.jpg",
"responses": [
{
"text": "click here",
"href": 4,
"func": null
}
]
},
"4": {
"image": "images/dragon-4.jpg",
"responses": [
{
"text": "click",
"href": 5,
"func": null
}
]
},
"5": {
"image": "images/dragon-5.jpg",
"responses": [
{
"text": "End",
"href": null,
"func": null
}
]
},
"_begin": {
"image": "images/dragon-1.jpg",
"responses": [
{
"text": "Click to advance",
"href": 2,
"func": null
}
],
"title_texts": [
{
"text": "Marigold",
"class": null
}
]
}
},
"title": "Demo game",
"vars": []
};