Jquery數獨游戲解析（一）-頁面布局

更新時間：2010年11月05日 14:55:09 作者：

上周發(fā)布了‘jquery開發(fā)的數獨游戲’，下載量很多評論的人很少。近期會將主要的開發(fā)思路整理出來與大家交流，非常希望與大家通過這個例子共同探討和學習。

另外最近時間允許的情況下會移植到html5，暫定名稱為H5sukudo主要目的也是練手。

body的代碼如下，頁面主體使用main層來控制尺寸，main中包含兩個層:canvas和tools，分別用來承載數獨表格和輔助信息。tools層中嵌套了logo,level,lefts,timer,leftsg,btns,err共七個層，分別用來承載LOGO、游戲難度、剩余空格數、已用時間、剩余空格數明細、按鈕和錯誤提示信息。tools層中的樣式寫在default.css樣式文件中。canvas層、level層、lefts層、timer層、leftsg層、err層的內容由jquery控制動態(tài)生成，后續(xù)會有解釋。

復制代碼代碼如下:

 
<body onselectstart="return false" oncopy="return false" oncut="return false"> 
<center> 
<div id="main" style="width: 720px; height: 550px;"> 
<div id="canvas" style='width: 540px; height: 540px; float: left'> 
</div> 
<div id="tools"> 
<div id="logo"> 
JSUKUDO 
</div> 
<div id="level"> 
Level: 
</div> 
<div id="lefts"> 
</div> 
<div id="timer"> 
Timer: 
</div> 
<div id="leftsg"> 
</div> 
<div id="btns"> 
<input type='button' value='Easy' onclick="$(g.canvas).gensukudo(2);$('#level').html('LEVEL:'+$(this).val());"> 
<br /> 
<input type='button' value='Medium' onclick="$(g.canvas).gensukudo(3);$('#level').html('LEVEL:'+$(this).val());"> 
<br /> 
<input type='button' value='Hard' onclick="$(g.canvas).gensukudo(4);$('#level').html('LEVEL:'+$(this).val());"> 
<br /> 
<input type='button' value='Restart' style="display: none;" onclick="$('#SukudoTable').fadeOut(500);$('.c').each(function(){if(this.num()!=0)$(this).setempty().check();});$('#SukudoTable').fadeIn(500);"> 
<br /> 
<br /> 
<b><a href="#" onclick="$(g.canvas).unblock().block({ message: gameintruce, css: {width:'480px', border: '3px solid #a00' } });"> 
GameIntroduce</a> <a href="#" onclick="$(g.canvas).unblock().block({ message: aboutgame, css: {width:'400px', border: '3px solid #a00' } });"> 
AboutSoftware</a> </b> 
</div> 
<div id="err"> 
</div> 
</div> 
</center> 
</body> 