Jquery数独游戏解析（一）-页面布局

 

上周发布了‘jquery开发的数独游戏’，下载量很多评论的人很少。近期会将主要的开发思路整理出来与大家交流，非常希望与大家通过这个例子共同探讨和学习。
另外最近时间允许的情况下会移植到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控制动态生成，后续会有解释。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<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>




image
posted @   申健  阅读(654)  评论(1)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
点击右上角即可分享
微信分享提示
AI IDE Trae