manifest文件
首行内容是硬性规定的，之后的清单包含了要缓存的HTML、JavaScript及CSS样式表文件。再之后，是每个游戏对应的JavaScript文件及GoogleMaps静态地图：
CACHEMANIFEST
尽管GoogleMaps地图由动态URL调用，其结果图像仍被保存在离线存储中，以便无互联网连接时仍可正确加载。图显示了3个游戏已经成功载人程序缓存中。
游戏的JavaScript函数
案例中的HTML代码或许比较无聊，JavaScript部分可就有意思得多。
宁波网站建设此前提过的window.onload函数将新对象game初始化为click2tick的类型，并调用此对象的init函数：
window.onload=干unction(){vargame=newclick2tick();game.init();}；为了保持JS代码的灵活性，我们把整个game函数包裹成一个库(Gamelib)，以便所有函数都能作为对象被调用：
(function(){varGameLib=function(){varelem={};varimage,canvas,context;//exposeobjectwindow.click2tick=GameLib:
}());
在代码的倒数第二行，window对象被指定为GameLib类，并命名为click2tick。此类的init函数负责载人现有游戏、初始化canvas元素，并开始第一个游戏。
代码清单GameLib库
this.init=function(){
//buildcame-selectionpulldownvaro='
for(vari=0；i〈gamedata.length;i++){o+=addOpt(i,gamedata[i].title);getrselGame'^.innerHTML=o;~get('selCame').options.selectedlndex=0;"get('selGame').onchange=function(){startGame(this.value；;}；//de千ineemptyimageusedformaplaterimage=newImage();canvas=document.querySelector("CANVAS");context=canvas.getContext('2d*);canvas.onclick=function(evt){checkPosition(evt);}；startGame(o);
你可能还是第一次见到函数addOptOSjetO。这是两个辅助函数，addOpt()用来将字符串组装为一个新的option元素，_get0提供对位于DOM树中元素的有效访问(通过它们的ID)。ID为selGame的HTML元素包含所有游戏的选择列表，此列表的第一个元素索引设为selectedlndex=0。若选择了此列表中的其他选项，函数startGame会通过这个新值被激活。
鼠标点击事件的事件句柄被指派给canvas元素，并调用checkPosition函数。接下来让我们开始第一个游戏。
鉴于GameLib中的许多函数被设计成用来保证游戏合理运行，而且并非直接与Web储存或离线缓存连接，我们在这里就不进行深人讨论了。若你还是觉得好奇，可以参考JavaScript库click2tick.js中的源代码。但是和本章更为相关的是涉及到localStorage存储接口的JavaScript代码，在保存游戏时我们需要用到它：
//storebasicdatainlocalStorage,addhostnameIIandtimestampvarts=newDate().getTime();
varid="click2tick_"+game.store.gid+"_"+ts;game.store.hostname=location.hostnamejgame.store.ts=ts;
localStorage.setlten(id,DSON.stringify(game.store));为确保localStorage键的唯一性，它们由前缀字符串(dick2tick)、游戏ID(game.store.gid)及时间戳(ts)组成，彼此之间由下划线连接。
game.store结构中的所有结果被保存为JS0N字符串，下面的代码是游戏结束时8个问题答对了5个的值。该条目的键为click2tick_:
{Mgid":"1","game":"DowntownParis",
"questions":8,correct":5,"percentH:63,
"hostname":"htnils.komplett.cc","ts":时间戳为0年1月1日至今以毫秒为单位的时间。鉴于这些值被保存在localStorage中，你可以在用户重新尝试游戏时给予相关反馈：
//getcollecteddatavargamesdone=[];varmax_percent=0;for(vari=0;i〈locaIStorage.length;i++){varkey=localStorage.Key(i);if(key.substrine(0,9)=="click2tick"){varitem=N.parse(localStoraee.getItem(key));if(item.gid==game.store.gid)\games_donepusn(item);maxpercent=Mathmax(maxpercent,item.percent);//showcollecteddatavars='
if(gamesdone.length==0){
s+='Youhavenotplayedthisgamebefore.
else{
s+='Youhaveplayedthisgame'+
(games_done.length+l)+'times〈br〉';s+*'Yourbesthitratetillnow:'+max_percent+"%\n";_get(_localStorage’)innerHTML=s;for循环遍历localStorage中的所有项，并检查这些键是否以字符串click2tick开头。这个设计保证了同一网站下被其他程序保存在localStorage的元素能被忽略。
本文由乐华网络编辑，转载请注明出处
宁波网站建设www.leseo.net
