快捷導(dǎo)航

Jquery數(shù)獨(dú)游戲解析（一）-頁(yè)面布局

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

上周發(fā)布了‘jquery開(kāi)發(fā)的數(shù)獨(dú)游戲’，下載量很多評(píng)論的人很少。近期會(huì)將主要的開(kāi)發(fā)思路整理出來(lái)與大家交流，非常希望與大家通過(guò)這個(gè)例子共同探討和學(xué)習(xí)。

另外最近時(shí)間允許的情況下會(huì)移植到html5，暫定名稱(chēng)為H5sukudo主要目的也是練手。

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

復(fù)制代碼代碼如下:

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