拼图游戏

这个游戏前前后后加起来我也不知道具体用了几天的时间，从昨天开始写的，今儿下午完工，还是有缺陷的，慢慢来吧。我是用单元格实现图片分割的，此处有个地方值得注意的是，单元格的生成中间是有缝隙的，二平涂游戏每个模块之间是没有缝隙的，所以在设置单元格的CSS样式时，需要使用 border-collapse:collapse;限制缝隙的产生。使用background-position:-px -px;定位实现每个单元格中的各个部分的图片。这个定位是由一定的规律的，不过也挺简单的，慢慢摸索就出来了。增加一个button,绑定事件后，点击按钮，拼图乱序，乱序是让其对应的图片的定位改变。然后实现，点击空白图片周围的任意一张图片实现互换单元格的背景图片定位的值。慢慢调试。我在乱序的时候卡了好久，还有在点今后图片的定位值变换也卡了。最后附上我的代码。代码很不成熟，欢迎各位大佬指出不足之处。当然我的不足很多，但是像记录一下。嘻嘻~~

html代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery.js"></script>
<link rel="stylesheet" href="CSS/pingtu.css">
<script src="js/pingtu.js"></script>
</head>
<body>
<table class="tab">
		<tr>
			<td class="t11"></td>
			<td class="t12"></td>
			<td class="t13"></td>
			<td class="t14"></td>
		</tr>
		<tr>
			<td class="t21"></td>
			<td class="t22"></td>
			<td class="t23"></td>
			<td class="t24"></td>
		</tr>
		<tr>
			<td class="t31"></td>
			<td class="t32"></td>
			<td class="t33"></td>
			<td class="t34"></td>
		</tr>
		<tr>
			<td class="t41"></td>
			<td class="t42"></td>
			<td class="t43"></td>
			<td class="t44"></td>
		</tr>
	</table>
<input id="btn" type="button" value="开始"/><br/>
<input id="btn2" type="button" value="拼图完成"/>
</body>
</html>

CSS代码

.tab{
	border-collapse:collapse;
}
.t11{
	width:105px;
	height:126px;
	border:1px solid red;
	background-image: url(../img/pingtu.jpg);
	background-repeat:no-repeat;
}
.t12{
	width:105px;
	height:126px;
	border:1px solid red;
	background-image: url(../img/pingtu.jpg);
	background-position:-105px 0px;
	background-repeat:no-repeat;
}
.t13{
	width:105px;
	height:126px;
	border:1px solid red;
	background-image: url(../img/pingtu.jpg);
	background-position:-210px 0px;
	background-repeat:no-repeat;
}
.t14{
	width:105px;
	height:126px;
	border:1px solid red;
	background-image: url(../img/pingtu.jpg);
	background-position:-315px 0px;
	background-repeat:no-repeat;
}
.t21{
	width:105px;
	height:126px;
	border:1px solid red;
	background-image: url(../img/pingtu.jpg);
	background-position:0px -126px;
	background-repeat:no-repeat;
}
.t22{
	width:105px;
	height:126px;
	border:1px solid red;
	background-image: url(../img/pingtu.jpg);
	background-position:-105px -126px;
	background-repeat:no-repeat;
}
.t23{
	width:105px;
	height:126px;
	border:1px solid red;
	background-image: url(../img/pingtu.jpg);
	background-position:-210px -126px;
	background-repeat:no-repeat;
}
.t24{
	width:105px;
	height:126px;
	border:1px solid red;
	background-image: url(../img/pingtu.jpg);
	background-position:-315px -126px;
	background-repeat:no-repeat;
}
.t31{
	width:105px;
	height:126px;
	border:1px solid red;
	background-image: url(../img/pingtu.jpg);
	background-position:0px -252px;
	background-repeat:no-repeat;
}
.t32{
	width:105px;
	height:126px;
	border:1px solid red;
	background-image: url(../img/pingtu.jpg);
	background-position:-105px -252px;
	background-repeat:no-repeat;
}
.t33{
	width:105px;
	height:126px;
	border:1px solid red;
	background-image: url(../img/pingtu.jpg);
	background-position:-210px -252px;
	background-repeat:no-repeat;
}
.t34{
	width:105px;
	height:126px;
	border:1px solid red;
	background-image: url(../img/pingtu.jpg);
	background-position:-315px -252px;
	background-repeat:no-repeat;
}
.t41{
	width:105px;
	height:126px;
	border:1px solid red;
	background-image: url(../img/pingtu.jpg);
	background-position:0px -378px;
	background-repeat:no-repeat;
}
.t42{
	width:105px;
	height:126px;
	border:1px solid red;
	background-image: url(../img/pingtu.jpg);
	background-position:-105px -378px;
	background-repeat:no-repeat;
}
.t43{
	width:105px;
	height:126px;
	border:1px solid red;
	background-image: url(../img/pingtu.jpg);
	background-position:-210px -378px;
	background-repeat:no-repeat;
}
.t44{
	width:105px;
	height:126px;
	border:1px solid red;
	background-image: none;
	background-repeat:no-repeat;
}

JS代码

$(function() {
	$("#btn").on("click",function() {
		
		var arr = [ "0px 0px", "-105px 0px", "-210px 0px","-315px 0px", 
					"0px -126px", "-105px -126px","-210px -126px", "-315px -126px",
					"0px -252px","-105px -252px", "-210px -252px","-315px -252px", 
					"0px -378px", "-105px -378px","-210px -378px"];
		
		var $ts = [ $(".t11"), $(".t12"), $(".t13"), $(".t14"),
					$(".t21"), $(".t22"), $(".t23"), $(".t24"),
					$(".t31"), $(".t32"), $(".t33"), $(".t34"),
					$(".t41"), $(".t42"), $(".t43"), $(".t44")];
		
		var num = parseInt(Math.random() * 15);
		var nums = [];
		for (var i = 0; i < 15; i++) {
			while(true) {
				if (nums.indexOf(num) < 0) {
					nums.push(num);
					break;
				}else{
					num = parseInt(Math.random() * 15);
				}
			}
			$ts[i].css("background-position",arr[num]);
		}
		var $tds = $(".tab td");
		var index;
		$tds.on("click", function() {
		  var s=$(this).attr("class");
		  for(var i=0;i<16;i++){
			  if($ts[i].attr("class")==s){
				  index=i;
				  break;
			  }
		  }
		  var top=index-4;
		  var down=index+4;
		  var left=index-1;
		  var right=index+1;
		  var arr2=[top,down,left,right];
		  var n=[3,7,11];
		  var m=[4,8,12];
		  for(var j=0;j<arr2.length;j++){
			  if(arr2[j]>15||arr2[j]<0)continue;
			     if($ts[arr2[j]].css("background-image")=="none"){
			    	 if((n.indexOf(arr2[j])>0&&m.indexOf(index)>0)||
			    		( m.indexOf(arr2[j])>0&&n.indexOf(index)>0)){
			    	 }else{
			    		 var s= $ts[index].css("background-position");
						  $ts[index].css("background-image","none");
						  $ts[arr2[j]].css("background-image","url(img/pingtu.jpg)");
						  $ts[arr2[j]].css("background-position",s);
			    	 }
			  }
		  }
		});
		$("#btn2").on("click",function(){
			for(var k=0;k<16;k++){
				if($ts[k].css("background-position")!=arr[k]){
					alert("没成功！");
					break;
				}else if(k==15){
					alert("成功！");
				}
			}
			
		});
	});
});

记录我的敲代码的青涩时代--拼图游戏

拼图游戏

html代码

CSS代码

JS代码

猜你喜欢