Jquery数独游戏解析(一)-页面布局


Posted in Javascript onNovember 05, 2010

另外最近时间允许的情况下会移植到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 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>

Jquery数独游戏解析(一)-页面布局
Javascript 相关文章推荐
XML+XSL 与 HTML 两种方案的结合
Apr 22 Javascript
常用的javascript function代码
May 23 Javascript
js中通过父级进行查找定位元素
Jun 15 Javascript
JavaScript中判断原生函数检查function是否是原生代码
Sep 09 Javascript
基于jquery css3实现点击动画弹出表单源码特效
Aug 31 Javascript
jQuery中的ready函数与window.onload谁先执行
Jun 21 Javascript
AngularJS 应用身份认证的技巧总结
Nov 07 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
Oct 30 Javascript
vue利用axios来完成数据的交互
Mar 23 Javascript
webpack公共组件引用路径简化小技巧
Jun 15 Javascript
vue项目打包后怎样优雅的解决跨域
May 26 Javascript
vue router 传参获取不到的解决方式
Nov 13 Javascript
TinyMCE 新增本地图片上传功能
Nov 05 #Javascript
jQuery示例收集
Nov 05 #Javascript
jquery 全局AJAX事件使用代码
Nov 05 #Javascript
Jquery ajaxsubmit上传图片实现代码
Nov 04 #Javascript
QUnit jQuery的TDD框架
Nov 04 #Javascript
基于jQuery的仿flash的广告轮播代码
Nov 04 #Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
Nov 02 #Javascript
You might like
PHP 配置文件中open_basedir选项作用
2009/07/19 PHP
getimagesize获取图片尺寸实例
2014/11/15 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
php实现socket推送技术的示例
2017/12/20 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
JavaScript中的异常捕捉介绍
2014/12/31 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
2015/02/13 Javascript
javascript实现简单的鼠标拖动效果实例
2015/04/10 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
2018/02/26 Javascript
修改vue+webpack run build的路径方法
2018/09/01 Javascript
使用Node.js写一个代码生成器的方法步骤
2019/05/10 Javascript
jquery插件懒加载的示例
2020/10/24 jQuery
简单文件操作python 修改文件指定行的方法
2013/05/15 Python
Python中用altzone()方法处理时区的教程
2015/05/22 Python
python实现线程池的方法
2015/06/30 Python
Python绘制七段数码管实例代码
2017/12/20 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
Python查找第n个子串的技巧分享
2018/06/27 Python
Flask框架通过Flask_login实现用户登录功能示例
2018/07/17 Python
django进阶之cookie和session的使用示例
2018/08/17 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
C++:memset ,memcpy和strcpy的根本区别
2013/04/27 面试题
Linux不知道文件后缀名怎么判断文件类型
2012/04/26 面试题
行政专员工作职责
2013/12/22 职场文书
工作人员思想汇报
2014/01/09 职场文书
财务管理专业求职信
2014/06/11 职场文书
学习雷锋月活动总结
2014/07/03 职场文书
走进敬老院活动总结
2014/07/10 职场文书
2014年帮扶工作总结
2014/11/26 职场文书
学生会个人总结范文
2015/02/15 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书
幼儿园2016年感恩节活动总结
2016/04/01 职场文书
Vue-Element-Admin集成自己的接口实现登录跳转
2021/06/23 Vue.js
Win11 Build 21996.1 Dev版怎么样? win11系统截图欣赏
2021/11/21 数码科技
MySQL分布式恢复进阶
2022/07/23 MySQL