js拼图游戏

啃火龙果的兔子
于 2023-11-14 11:31:23 发布
阅读量7.6k
点赞数
分类专栏：开发DEMO Javascript 文章标签： javascript 开发语言 ecmascript
本文链接：https://blog.csdn.net/qq_43592064/article/details/134395425
版权
开发DEMO 同时被 2 个专栏收录
144 篇文章 1 订阅
订阅专栏
Javascript
33 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>拼图游戏</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
			}
			.main{
				width: 1200px;
				height: 600px;
				margin: 30px auto;
			}
			.main >div{
				float: left;
			}
			.left{
				width: 200px;
				overflow-x: hidden;
			}
			.right{
				width: 1000;
				height: 100%;
			}
			.right-img{
				width: 900px;
				margin: 50px;
			}
			.right ul{
				margin-left: 50px;
				margin-top: 50px;
				position: relative;
			}
			.right li{
				width: 50px;
				height: 50px;
				border: 1px solid black;
				cursor: pointer;
				position: absolute;
				transition: all 1s;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="left">
				<input type="file" accept="image/*"/><br>
				<img src="" alt="" style="margin-top: 40px;width: 200px;">
				<button onclick="fun1(this)" style="display: none;">开始拼图</button>
				
			</div>
			<div class="right">
				
			</div>
		</div>
	</body>
	<script>
		const param = 50;
		// 切成的图片大小
		const randomNum = 40;
		// 随机位置 图片的个数
		$('.left >input').change(function(e){
			let imageFile = e.target.files[0];
			$('.left >img').attr('src',getObjectURL(imageFile));
			
			$('.right').html('<img src="" alt="" class="right-img">');
			$('.right >img').attr('src',getObjectURL(imageFile));
			
			if($('.right >img').attr('src')){
				$('.left button').css('display','block');
			}
		});
		
		 //建立一可存取到file的url
		 function getObjectURL(file) {
		     var url = null;
		     if (window.createObjectURL != undefined) { // basic
		         url = window.createObjectURL(file);
		     } else if (window.URL != undefined) { // mozilla(firefox)
		         url = window.URL.createObjectURL(file);
		     } else if (window.webkitURL != undefined) { // webkit or chrome
		         url = window.webkitURL.createObjectURL(file);
		     }
		     return url;
		 }
		
		function fun1(ele){
			let v = $(ele).parent().children('img').attr('src');
			if(v === ''){
				alert('请上传图片！');
				return;
			}
			let img_obj = $('.right img');
			let img_w = parseInt(img_obj.css('width')),img_h = parseInt(img_obj.css('height'));
			let count_w = parseInt(img_w/param),count_h = parseInt(img_h/param);
			let _str = '';
			for(let i=0;i<count_h;i++){
				for(let j=0;j<count_w;j++){
					_str += `
					<li index='${i},${j}' onclick='fun2(this,${count_w})'></li>
					`;
				}
			}
			
			let randomPosArr = [];
			let randomMap = {},map2 = {};
			let countSum = count_w * count_h;
			// 小图片的总数
			let i = 0;
			while(i < randomNum){
				let pos = Math.floor(Math.random() * countSum);
				// 0 ~ 179
				let x = pos%count_w,y=Math.floor(pos/count_w);
				let pos_str = `${y},${x}`;
				if(randomMap[pos_str] === undefined){
					randomMap[pos_str] = true;
				}else{
					continue;
				}
				
				let num;
				while(true){
					num = Math.floor(Math.random() * randomNum);
					// 向下取整 0 ~ randomNum - 1 
					if(map2[num] === undefined){
						map2[num] = true;
						break;
					}
				}
				
				randomPosArr.push([y,x,num]);
				i ++;
			}
			
			console.log(randomPosArr);
			let posMap = {};
			for(let i=0;i<randomNum;i++){
				let pos_y = randomPosArr[i][0],pos_x = randomPosArr[i][1],index = randomPosArr[i][2];
				let pos_str = `${pos_y},${pos_x}`;
				let pos3 = randomPosArr[index];
				let pos_str2 = `${pos3[0]},${pos3[1]}`;
				posMap[pos_str] = pos_str2;
			}
			
			_str = `<ul>${_str}<ul>`;
			$('.right').html(_str);
			$('.right ul').css('width',count_w*(param+2)+'px');
			$('.right ul li').each((index,ele)=>{
				$(ele).css({
					'backgroundPositionX': -(index%count_w) * param + 'px',
					'backgroundPositionY': -parseInt(index/count_w) * param + 'px',
					'backgroundImage':`url(${v})`,
					'backgroundSize':`${img_w}px ${img_h}px`,
					'top': parseInt(index/count_w) * param + 'px',
					'left': (index%count_w) * param + 'px'
				});
			});
			
			let liObj = document.querySelectorAll('.right ul li');

			let obj2 = {};
			for(let key in posMap){
				let value = posMap[key];
				let arr1 = key.split(','),arr2=value.split(',');
				let index1 = parseInt(arr1[1]) + parseInt(arr1[0]) * count_w,
					index2 = parseInt(arr2[1]) + parseInt(arr2[0]) * count_w;
				// index2='${j+count_w*i}'
				$(liObj[index1]).attr('index2',value);
				obj2[index1] = {
					'top':$(liObj[index2]).css('top'),
					'left':$(liObj[index2]).css('left'),
				};
			}
			
			for(let index in obj2){
				$(liObj[index]).css({
					'top':obj2[index]['top'],
					'left':obj2[index]['left']
				});
			}
			
			$('.left button').css('display','none');
		}
		
		
		function fun2(ele,v){
			let index = $(ele).attr('index'), index2 = $(ele).attr('index2');
			if(index2 === undefined || index2 === ''){
				alert('无需操作！');
				return;
			}
			// index2 当前位置
			else{
				let obj = fun3(index2);
				// console.log(obj);
				if(obj !== null){
					let _index2 = obj.attr('index2'),_arr2 = obj.attr('index').split(',');
					$(ele).attr('index2',_index2);
					obj.attr('index2','');
					// obj 已经回到原始位置，去掉index2属性中的值
					let _arr1 = _index2.split(',');
					
					obj.css({
						'top': parseInt(_arr2[0]) * param + 'px',
						'left': parseInt(_arr2[1]) * param + 'px'
					});
					
					$(ele).css({
						'top': parseInt(_arr1[0]) * param + 'px',
						'left': parseInt(_arr1[1]) * param + 'px'
					});
					
					if(fun4()){
						setTimeout(function(){
							alert('拼图成功！');
						},2000);
					}
				}
			}
		}
		
		
		function fun3(index2){
			let ans = null;
			$('.right ul li').each(function(index,ele){
				let index3 = $(ele).attr('index');
				if(index3 === index2){
					ans = $(ele);
				}
			});
			return ans;
		}
		
		function fun4(){
			let eles = document.querySelectorAll('.right ul li');
			let ans = true;
			$(eles).each(function(index,ele){
				let v = $(ele).attr('index2');
				if(v && v != $(ele).attr('index')){
					ans = false;
				}
			})
			
			return ans;
		}
	</script>
</html>