jQuery制作可自定义大小的拼图游戏


Posted in Javascript onMarch 30, 2015

我把大小限制在了3-10之间,实在闲的,或者有自虐倾向的可以试试改下。。
本来准备弄图片上去的,还没弄..

pintu.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>拼图</title>
<style type="text/css">
#pt_main{
  margin:0 auto;
  border:2px solid #000;}
#menu{
  text-align:center;}
#pt_main div{
  padding:0px;
  margin:0px;
  float:left;
  line-height:200px;
  font-size:100px;
  text-align:center;}
#pt_main div:hover{
  cursor:pointer;}
.hui{
  background:#CCC;}
</style>
 
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
//div边框宽度
var border_w=2;
//div大小
var size=50;
//是否过关
var st=false;
//背景图片地址(功能还没写)
var imgurl='';
//灰色块的位置
var hui=0;
//游戏宽高
var width=3;
var height=3;
$(function(){
  init();
});
//判断两个数字能不能交换
function ut_jh(a,b){
  if(Math.abs(a-b)==width){
    return true;
  }
  if(Math.abs(a-b)==1&& ut_line(a,b,width) ){
    return true;
  }
  return false;
}
//判断两个数字是否在同一行
function ut_line(a,b,width){
  if(parseInt(a/width)==parseInt(b/width)){
    return true;
  }else{
    return false;  
  }
}
//生成可交换的集合(可与灰色块交换的集合)
function ut_sc(a){
  //最多为4个
  var li=new Array();
  var i=0;
  if(a-width>=0){
    li[i++]=a-width;
  }
  if(a+width<=width*height-1){
    li[i++]=a+width;  
  }
  if(ut_line(a,a-1,width) && a-1>=0){
    li[i++]=a-1;  
  }
  if(ut_line(a,a+1,width) && a+1<=width*height-1){
    li[i++]=a+1;  
  }
  //alert(a+'-length:'+li.length)
  return li;
}
//块的点击事件
function pt_click(){
  if(!st){
    return false;
  }
  //点击块的索引
  var index=get().index($(this));
   
  if(ut_jh(hui,index)){
    jh(hui,index);
     
    //判断是否过关
    pd();
  }
   
   
}
//两块交换
function jh(hui_,index_){
    //alert(hui+1+","+(index_+1));
    var list=get();//所有块
    var h=list.eq(hui_);//灰色块
    var d=list.eq(index_);//点击的块
     
    //交换样式
    h.removeClass();
    d.addClass('hui');
    h.html(d.html());
    d.html('');
    hui=index_;
     
    //交换各自属性
    tg=h.attr('tg');
    h.attr('tg',d.attr('tg'));
    d.attr('tg',tg);
}
 
function init(){
  //不能太小...
  if(width<3||height<3){
    return false;  
  }
  hui=width*height-1;
  var pp=$("#pt_main");
  pp.html('');
  //创建并初始化
  var k=width*size+border_w*width*2;
  var g=height*size+border_w*height*2;
  pp.css({'width':k,'height':g});
  for(i=0;i<width*height;i++){
    var n=$("<div>"+(i+1)+"</div>");  
    n.css({'width':size,
      'height':size,
      border:border_w+'px solid #000',
      lineHeight:size+'px',
      fontSize:parseInt(size/3)+'px'
    });
    if(imgurl!=''){
     
    }
    pp.append(n);
    //alert(i)
     
  }
  get().last().html('');
  get().last().addClass('hui');
  get().on('click',pt_click);
   
  //为每个块附加属性,记录当前的值
  $("#pt_main div").each(function(index, element) {
    $(element).attr('tg',index);
  });
   
   
  dl();
  st=true;
}
//判断是否通过(当每个块的值与自身的下标对应)
function pd(){
  var b=true;
  get().each(function(index, element) {
    if($(element).attr('tg')!=index){
      b=false;
      return false;
    }
     
  });
  if(b){
    st=false;
    alert("恭喜过关!");
    return true;
  }else{
    return false;
  }
}
//获取集合
function get(){
  return $("#pt_main div");
}
//打乱
function dl(){
  //打乱次数
  var count=width*width*width;
   
  for(i =0;i<count;i++){
    //可交换集合
    var li=ut_sc(hui);
    var num=parseInt((li.length)*Math.random());
    jh(hui,li[num]);
  }
   
}
//初始化按钮的点击事件
function csh(){
  var dxv=$('#dx').val();
  if(!parseInt(dxv)){
    alert('请输入3-10之间的数字');
    $('#dx').val('');
    return false;
  }
  var v=parseInt(dxv);
  if(v<3||v>10){
    alert('请输入3-10之间的数字');
    $('#dx').val('');
    return false;
  }
  width=v;
  height=v;
  init();
}
</script>
</head>
 
<body>
<div id='menu'>
  大小:<input id='dx' style="text-align:center;width:40px;"/>
  <button onclick="csh()">初始化</button>
  <button onclick="init()">刷新</button>
</div>
<div id="pt_main">
 
</div>
 
</body>
</html>

以上就是本文给大家分享的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
日历查询的算法 如何计算某一天是星期几
Dec 12 Javascript
上传图片js判断图片尺寸和格式兼容IE
Sep 01 Javascript
详解javascript事件冒泡
Jan 09 Javascript
js H5 canvas投篮小游戏
Aug 18 Javascript
vue2.0实现分页组件的实例代码
Jun 22 Javascript
Vue实现virtual-dom的原理简析
Jul 10 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
May 12 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
Aug 08 Javascript
微信小程序当前时间时段选择器插件使用方法详解
Dec 28 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
Mar 06 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
Apr 14 Javascript
如何利用JavaScript编写更好的条件语句详解
Aug 10 Javascript
JS实现向表格中动态添加行的方法
Mar 30 #Javascript
JS实现向表格行添加新单元格的方法
Mar 30 #Javascript
JS实现控制表格行文本对齐的方法
Mar 30 #Javascript
JS实现控制表格行内容垂直对齐的方法
Mar 30 #Javascript
JS实现控制表格内指定单元格内容对齐的方法
Mar 30 #Javascript
JS实现控制表格单元格垂直对齐的方法
Mar 30 #Javascript
JavaScript动态改变表格单元格内容的方法
Mar 30 #Javascript
You might like
php实现可用于mysql,mssql,pg数据库操作类
2014/12/13 PHP
php替换字符串中间字符为省略号的方法
2015/05/04 PHP
PHP5.0 TIDY_PARSE_FILE缓冲区溢出漏洞的解决方案
2018/10/14 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
2013/03/05 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
javascript 3d 逐侦产品展示(核心精简)
2014/03/26 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
2014/09/10 Javascript
JS实现的通用表单验证插件完整实例
2015/08/20 Javascript
浅谈jQuery中ajaxPrefilter的应用
2016/08/01 Javascript
AngularJS包括详解及示例代码
2016/08/17 Javascript
JavaScript编码风格指南(中文版)
2016/08/26 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
2017/08/16 Javascript
跨域请求两种方法 jsonp和cors的实现
2018/11/11 Javascript
Node.js实现简单管理系统
2019/09/23 Javascript
浅谈Vue中render中的h箭头函数
2019/11/07 Javascript
JS实现简单移动端鼠标拖拽
2020/07/23 Javascript
分享Python字符串关键点
2015/12/13 Python
Python判断列表是否已排序的各种方法及其性能分析
2016/06/20 Python
Python中二维列表如何获取子区域元素的组成
2017/01/19 Python
详解python调度框架APScheduler使用
2017/03/28 Python
python 连接各类主流数据库的实例代码
2018/01/30 Python
Python微信操控itchat的方法
2019/05/31 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
如何用Python进行时间序列分解和预测
2021/03/01 Python
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
2013/01/09 HTML / CSS
波兰灯具、照明和LED购物网站:Lampy.pl
2019/03/11 全球购物
Shell如何接收变量输入
2012/09/24 面试题
九年级体育教学反思
2014/01/23 职场文书
2014幼儿园中班工作总结
2014/11/10 职场文书
教师廉洁自律个人总结
2015/02/10 职场文书
求职自我评价范文
2015/03/09 职场文书
2015年安全生产月活动总结
2015/03/26 职场文书
信贷客户经理岗位职责
2015/04/09 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书