一个简单的JS拼图游戏

最新推荐文章于 2024-04-28 18:16:44 发布

zhuolei123

最新推荐文章于 2024-04-28 18:16:44 发布

阅读量4.2k

点赞数 1

分类专栏：技术分享

本文链接：https://blog.csdn.net/zhuolei123/article/details/8582294

版权

技术分享专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一天在手机上玩吸血鬼日记的拼图游戏，就心血来潮的想自己来用JS实现一个，代码如下：

<!doctype>
<html>
<head>
<meta charset="utf-8"/>
<title>拼图游戏</title>
<style>
	.containor{border:1px solid #999;position:absolute;background-color:#ffffff;}
	.kuai{float:left;cursor:pointer;position:relative;}
</style>
<script>
	var Game = function(){
		this.option = {
			id : "",
			url : ""
		};
		this.last = null;
		this.row = undefined;
		this.col = undefined;
		this.enabled = true;
		this.init = function(row,col){
			var _this = this;
			_this.row = row;
			_this.col = col;
			//内部方法，等图片下载完了再执行
			function loadui(game,img){
				var main = document.getElementById(game.option.id);
				if(main==null){
					return;
				}
				main.style.width = img.width;
				main.style.height = img.height;
				var height = main.clientHeight/row;
				var width = main.clientWidth/col;
				var arr = [];
				var tmpI = 0;
				for(var i=0;i<row;i++){
					for(var j=0;j<col;j++){
						var posLeft = -width*j;
						var posTop = -height*i;
						arr.push('<div class="kuai" index="'+tmpI+'" style="width:'+width+'px;height:'+height+'px;background:url('+game.option.url+') '+posLeft+'px '+posTop+'px"></div>');
						tmpI++;
					}
				}
				main.innerHTML = arr.join("");
				var list = main.getElementsByTagName("div");
				game.random(list); //随机打乱顺序
				game.click(list); //绑定click事件
			}
			var img = new Image();
			img.src = this.option.url;
			if(img.width==0){
				img.onload = function(){
					loadui(_this,img);
				}
			}else{
				loadui(_this,img);
			}
		};
		this.random = function(list){
			var len = list.length;
			var m = Math;
			//打乱顺序
			for(var i=0;i<len/2;i++){
				var rNum1 = parseInt(m.random()*len);
				var rNum2 = parseInt(m.random()*len);
				var r1Obj = list[rNum1];
				var r2Obj = list[rNum2];
				r1Obj.parentNode.insertBefore(r1Obj,r2Obj);
			}
			this.last = list[len-1]; //记下它
			this.last.style.visibility = "hidden";
		};
		this.click = function(list){
			var len = list.length;
			var game = this;
			for(var i=0;i<len;i++){
				list[i].newIndex = i;
				list[i].onclick = function(){
					if(!game.enabled){
						return false;
					}
					var index = this.getAttribute("index");
					var newIndex = this.newIndex;
					var col = game.col;
					var lObj,rObj,tObj,bObj; //分别表示点击元素的左边、右边、上边、下边的相邻元素
					if(newIndex-1>=0){
						lObj = list[newIndex-1];
					}
					if(newIndex+1<len){
						rObj = list[newIndex+1];
					}
					if(newIndex-col>=0){
						tObj = list[newIndex-col];
					}
					if(newIndex+col<len){
						bObj = list[newIndex+col];
					}
					var math = Math;
					/*
						条件3：判断点击的这个元素和不可见元素是否是在同一行
					*/
					if(rObj && rObj.style.visibility=="hidden" && math.ceil((newIndex+1)/game.col) == math.ceil((rObj.newIndex+1)/game.col)){ //向右移
						var tmpIndex = this.newIndex;
						this.newIndex = rObj.newIndex;
						rObj.newIndex = tmpIndex;
						rObj.parentNode.insertBefore(rObj,this);
					}else if(lObj && lObj.style.visibility=="hidden" && math.ceil((newIndex+1)/game.col) == math.ceil((lObj.newIndex+1)/game.col)){ //向左移
						var tmpIndex = this.newIndex;
						this.newIndex = lObj.newIndex;
						lObj.newIndex = tmpIndex;
						lObj.parentNode.insertBefore(this,lObj);			
					}else if(bObj && bObj.style.visibility=="hidden"){ //向下移
						var tmpIndex = this.newIndex;
						bObj.parentNode.insertBefore(bObj,list[tmpIndex+1]);
						bObj.parentNode.insertBefore(this,list[bObj.newIndex]);
						bObj.parentNode.insertBefore(list[bObj.newIndex],this);
						this.newIndex = bObj.newIndex;
						bObj.newIndex = tmpIndex;
					}else if(tObj && tObj.style.visibility=="hidden"){ //向上移
						var tmpIndex = this.newIndex;
						tObj.parentNode.insertBefore(this,list[tObj.newIndex]);
						tObj.parentNode.insertBefore(tObj,list[tmpIndex]);
						tObj.parentNode.insertBefore(list[tmpIndex],tObj);
						this.newIndex = tObj.newIndex;
						tObj.newIndex = tmpIndex;
					}
					if(game.isSuccess(list)){
						game.enabled = false; //已经成功！停止游戏
						alert("恭喜你完成任务！");
						game.last.style.visibility = "visible";
						game.animate(game.last,{
							opacity : 0
						},{
							opacity : 1
						},500);
					}
				}
			}
		};
		this.animate = function(elt,p1,p2,speed){
			
		};
		this.isSuccess = function(list){
			var len = list.length;
			var bl = true;
			for(var i=0;i<len;i++){
				var o = list[i];
				if(o.newIndex!=o.getAttribute("index")){
					bl = false;
					break;
				}
			}
			return bl;
		};
	}
	onload = function(){
		var game1 = new Game();
		game1.option = {
			id : "main1",
			url : "http://www.baby611.com/pic/091225/5/1240011761148288374.jpg"
		}
		game1.init(3,3);//3行3列的拼图难度
		var game2 = new Game();		
		game2.option = {
			id : "main2",
			url : "http://www.baby611.com/pic/091225/5/12400118722758062555.jpg"
		}
		game2.init(3,3);
	};
</script>
</head>
<body>
	<div id="main1" class="containor">
		
	</div>
	<div id="main2" class="containor" style="left:650px;">
		
	</div>
</body>
</html>

上面是初始化了2个游戏窗口，不需要的话，可以不初始化game2

zhuolei123

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
一个简单的JS拼图游戏

一天在手机上玩吸血鬼日记的拼图游戏，就心血来潮的想自己来用JS实现一个，代码如下：拼图游戏 .containor{border:1px solid #999;position:absolute;background-color:#ffffff;} .kuai{float:left;cursor:pointer;position:relative;} var Game = f
复制链接

扫一扫