html5 jquery 拼图游戏

引用:http://www.douban.com/note/159200656/

研究方向 jquery html5 css3

<!DOCTYPE html>
<head>
<meta charset=UTF-8>
<title>豆瓣</title>
<style type="text/css">
body{line-height:1;width:960px;margin:0px auto;font-family:Arial, Helvetica, sans-serif;background-color:#660000;}
ul,ol,dl { list-style-type:none; }
table { border-collapse:collapse; border-spacing:0; }
em { font-style:normal; }
img { border:0; }
.clear { clear:both; overflow:hidden; font-size:0; height:0; line-height:0; }
.hidden { display:none; }
header{border:solid 2px #ccc;margin:10px;text-align:center;width:960px;height:100px;padding:10px;}
header h1{font-size:20px;}
fieldset{margin:10px 10px;float:right;width:285px;height:240px;}
.cls { width:100px; height:85px; float:left;z-index:1;}
article{border:2px #000 solid;padding:10px;margin:10px;width:960px;height:320px;clear:both;}
section{border:5px #000 solid;position:absolute;margin:10px;line-height:0px;width:600px;height:255px;}
.section2{border:5px #000 solid;position:relative;margin:10px;line-height:0px;width:600px;height:255px;margin:10px 70px;}
.tijiao{margin:0px 150px 50px 100px;}
.a{float:right;border-width:1px 0; border-color:#bbb; border-style:solid;}
.b{height:22px; border-width:0 1px; border-color:#bbb; border-style:solid; margin:0 -1px; background:#e3e3e3; position:relative; float:right;}
.c{line-height:10px; color:#; background:#f9f9f9; border-bottom:2px solid #eeeeee;}
.d{padding:0 8px; line-height:22px;font-size:16px; color:#000000; clear:both; margin-top:-12px; cursor:pointer;}
button,.btn {border:#666 1px solid;padding:2px;width:60px;filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
figure{border:2px #000 solid;padding:10px;margin:10px;width:960px;height:299px;clear:both;}				
</style>

</head>
<body>
<header> 
        <h1>玩拼图!赢大奖!</h1> 
		
</header>
  <div style="display:none"> 
		<audio id="sourcevid" autoplay="true" loop> 
			<source src="BigBuckBunny_640x360.mp4" type="audio/mp4"/> 
			<source src="BigBuckBunny_640x360.ogv" type="audio/ogg"/> 
		</audio> 
 </div> 
<article>
<section>
    		<a href="" title="Contra dolor" rel="external"><img src="p1.jpg" alt="" /></a>
</section>
     
     <fieldset>
	   <legend>游戏规则</legend>
				<p>
					1、玩家需要按左边给出的样品图片,拖动右下方的图片进行拼图<br/>
                    2、在限定时间内将拼图完成,则能观看电影,赢大奖<br/>
				</p>
	</fieldset> 
</article>
<article>
<div class="section2">	
<div class="cls" id="2"><img  src="2.jpg" /></div>
<div class="cls" id="3"><img  src="3.jpg" /></div>
<div class="cls" id="1"><img  src="1.jpg" /></div>
<div class="cls" id="5"><img  src="5.jpg" /></div>
<div class="cls" id="7"><img  src="7.jpg" /></div>
<div class="cls" id="9"><img  src="9.jpg" /></div>
<div class="cls" id="10"><img  src="10.jpg" /></div>
<div class="cls" id="16"><img  src="16.jpg" /></div>
<div class="cls" id="13"><img  src="13.jpg" /></div>
<div class="cls" id="11"><img  src="11.jpg" /></div>
<div class="cls" id="12"><img  src="12.jpg" /></div>
<div class="cls" id="14"><img  src="14.jpg" /></div>
<div class="cls" id="15"><img  src="15.jpg" /></div>
<div class="cls" id="17"><img  src="17.jpg" /></div>
<div class="cls" id="18"><img  src="18.jpg" /></div>
<div class="cls" id="4"><img  src="4.jpg" /></div>
<div class="cls" id="6"><img  src="6.jpg" /></div>
<div class="cls" id="8"><img  src="8.jpg" /></div>
</div>
<div class="tijiao">
<div class="a" onClick="fn_check()">
<div class="b">
   <div class="c">&nbsp;&nbsp;</div>
   <div class="d">提交</div>
</div>
</div>
</div>
<input id="btnSubmit" type="button" value="提交" onclick="fn_check()" class="btn" />
 
</article>

<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script>

var $DragDom;
var $ReplaceDom;//定义两个全局变量 $表示全局变量
$(".cls").each(function(i, obj)
{
	$(this).attr('draggable', 'true');//定义可拖动
	$(this).bind("dragstart", function(e)//绑定开始时间
	{
		$DragDom = $(this);// 读取携带的参数到变量中去
		return true;
	});

	$(this).bind('dragover', function(ev) //绑定元素在目标元素中移动事件
	{
            ev.stopPropagation();
            ev.preventDefault();//把默认的事件去掉
            return false;
    });

	$(this).bind("drop", function(e)//绑定元素落在目标元素中事件
	{
		$ReplaceDom = $(this);读取落在目标元素的参数到变量中去
		
		fn_replace();		//replace
		fn_check();			//

	
		return false;
	});
});



function fn_replace()
{
	
	var drag_url = $DragDom.find("img:first").attr("src");//找到被拖元素的img的src
	var drag_id = $DragDom.attr("id");//  找到被拖元素第一个img的id
	var replace_url = $ReplaceDom.find("img:first").attr("src");//找到目标元素的img的src
	var replace_id = $ReplaceDom.attr("id");//  找到目标元素的img的src

	$ReplaceDom.find("img:first").attr("src", drag_url);//交换url
	$ReplaceDom.attr("id", drag_id);//交换id

	$DragDom.find("img:first").attr("src", replace_url);//交换url
	$DragDom.attr("id", replace_id);//交换url
};

function fn_check()
{
	var sort = true;//默认是排序的
	var div = [];//读取数组,读取每张图片到数组中去
	$(".cls").each(function(i, obj)
	{
		div.push($(obj));
	});

	for(var i=0; i<div.length; i++)//循环遍历
	{
		if(i + 1 != div[i].attr("id"))//因为id是1,i从0开始。。。
		{
			sort = false;
			break;
		};
	}

	if(sort == true)
	{
		alert("对了");
	}
	else
	{
		alert("错了");
	}
};
</script>

</body>
</html>

你可能感兴趣的:(jquery)