Jquery数独游戏解析（一）-页面布局
nnj 2010-11-05
另外最近时间允许的情况下会移植到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控制动态生成，后续会有解释。
body的代码如下，页面主体使用main层来控制尺寸，main中包含两个层:canvas和tools，分别用来承载数独表格和辅助信息。tools层中嵌套了logo,level,lefts,timer,leftsg,btns,err共七个层，分别用来承载LOGO、游戏难度、剩余空格数、已用时间、剩余空格数明细、按钮和错误提示信息。tools层中的样式写在default.css样式文件中。canvas层、level层、lefts层、timer层、leftsg层、err层的内容由jquery控制动态生成，后续会有解释。
代码如下：
<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> 
相关推荐
xiaohuli 0喜欢 / 0评论 2020-05-18
冰蝶 0喜欢 / 0评论 2020-05-07
csdnYF 0喜欢 / 0评论 2020-02-19
csdnYF 0喜欢 / 0评论 2020-02-16
zh000 0喜欢 / 0评论 2013-05-10
wangjie 0喜欢 / 0评论 2020-01-07
sdbxpjzq 0喜欢 / 0评论 2019-12-06
vipiter 0喜欢 / 0评论 2019-11-04
红壶吃猬队 0喜欢 / 0评论 2019-11-04
84483065 0喜欢 / 0评论 2016-04-28
贱贱的梦想 0喜欢 / 0评论 2017-10-15
aSuncat 0喜欢 / 0评论 2019-06-29
WinerChopin 0喜欢 / 0评论 2018-10-28
二毛妮子 0喜欢 / 0评论 2017-10-15
FruitHardCandy 0喜欢 / 0评论 2016-09-19
zhuakuang0 0喜欢 / 0评论 2019-06-28
handsomezsc 0喜欢 / 0评论 2016-04-28
涓涓溪流 0喜欢 / 0评论 2016-02-08
王景迁 0喜欢 / 0评论 2015-11-20
切慕溪水 0喜欢 / 0评论 2014-09-29
未子涵 0喜欢 / 0评论 2019-06-26
淡风wisdon大大 0喜欢 / 0评论 2013-11-04
gentlemanhua 0喜欢 / 0评论 2019-06-19
buttonChan 0喜欢 / 0评论 2013-05-29
yibawuqing 0喜欢 / 0评论 2019-06-21
hlfsunshine 0喜欢 / 0评论 2013-01-29
SuiKaSan的自学室 0喜欢 / 0评论 2012-11-07
badroot 0喜欢 / 0评论 2019-06-20
xinxing00 0喜欢 / 0评论 2016-04-18
红壶吃猬队 0喜欢 / 0评论 2019-06-20
xzw 0喜欢 / 0评论 2019-06-20
zhuzhu侠 0喜欢 / 0评论 2009-06-22
每天积累一点点 0喜欢 / 0评论 2011-06-24
淡风wisdon大大 0喜欢 / 0评论 2011-04-01
jhzhao 0喜欢 / 0评论 2013-11-20
guizhongyun 0喜欢 / 0评论 2012-07-08
tcxingdechen 0喜欢 / 0评论 2011-08-29
baoLidanyang 0喜欢 / 0评论 2013-06-30
daianna 0喜欢 / 0评论 2008-11-09
email 0喜欢 / 0评论 2012-03-19
wangjun0 0喜欢 / 0评论 2019-01-07
第三直播室 0喜欢 / 0评论 2018-11-26
sabuliduo 0喜欢 / 0评论 2018-11-05
相信未来 0喜欢 / 0评论 2016-06-13
keyijing 0喜欢 / 0评论 2019-04-23
88417615 0喜欢 / 0评论 2014-01-07
cuteyDan 0喜欢 / 0评论 2013-02-22
前端档案 0喜欢 / 0评论 2013-10-16
phpsir 0喜欢 / 0评论 2016-03-19