拼图(九宫格，十六宫格)

一、思路

　　1、正常顺序的图片显示

　　2、点击开始游戏，随机打乱图片

　　3、图片移动操作

　　4、判断游戏是否结束

二、思考点

　　1、如何判断随机的图片是否可解？

　　怎么证明它的可解性，请参考 https://air20.com/archives/323.html ，我理解的大神们的意思就是，原数组和随机出来的数组的逆序数的奇偶性一致，那么就是可解的。

　　如果原数组是[0,1,2,3,4,5,6,7,8], 算出来的逆序数为 0，那么只要保证随机出来的数组的逆序数为偶数，那么拼图就是可解的。

　　2、如果随机出来的图片不可解，是不是要重新随机，直到它可解？

　　不用，因为又有大神发现，只用调换该数组倒数第二第三个数值，就可以改变该数组逆序数的奇偶性。

　　再调换6和7的位置

三、附源码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>拼图</title><style type="text/css">*{margin: 0;padding: 0;box-sizing: content-box;}.wrap{width: 1000px;height: 800px;background: #EDEDED;}#Img{width: 320px;height: 320px;margin: 0 auto;                                }#Img li{list-style: none;width: 100px;height: 100px;float: left;border: 1px solid #F6F6F6;margin: 1px;    cursor: pointer;background-image: url(img/Penguins.jpg);            background-size:  300px 300px;background-repeat: no-repeat;position: relative;}.start{text-align: center;}</style></head><body><div class="wrap"><div id="Img"><ul></ul></div><div class="start"><select name="" id="select"><option value="3">3*3</option><option value="4">4*4</option></select><button type="button" id="begin">开始</button></div></div><script src="jquery/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">var group = 3,         //分为几组进行排列
                ul = $("#Img ul"),sequence = [],ImgList = [],imgLens,steps;var Puzzle = {initImgOrder : function(){   //正常顺序的图片
                    imgLens = Math.pow(group,2);sequence = [];ul.empty();var size = group * 100 +"px";for (var i = 0; i < imgLens; i++) {                        var y = -((i / group) >>> 0), x = -i % group;ImgList[i+1] = [x,y];var li = '<li style="background-position: '+x*100+'px '+y*100+'px;"></li>';ul.append(li);                        sequence.push(i+1);}$("#Img li").css({"backgroundSize":size+" "+size});},showRandomImg: function(newArr){ul.empty();var size = group * 100 +"px";for (var i in newArr) {                        var item = newArr[i],x = ImgList[item][0],y = ImgList[item][1];var li = '<li data-index="'+item+'" style="background-position: '+x*100+'px '+y*100+'px;" ></li>';ul.append(li);}ul.append('<li id="block" data-index="'+imgLens+'" style="background-image: none;background-color: #fff;"></li>'); //加上空白格
                    $("#Img li").css({"backgroundSize":size+" "+size});},imgMove: function(e){var allLi = ul.find("li"),x = allLi.index($(e)) + 1,                    z = allLi.index($("#block")) + 1;if(x - 1 == z && (x-1) % group != 0){ //如果空白格在左边
                        $(e).after($("#block"));        steps++;}if(x + 1 == z && (x+1) % group != 1){ //如果空白格在右边
                        $("#block").after($(e));steps++;}if(x + group == z && (x+group) < imgLens+1){ //如果空白格在下边    var p = $("#block").prev();$(e).next().before($("#block"));p.after($(e));steps++;}if(x - group == z && (x-group) > 0){ //如果空白格在上边var p = $("#block").next();$(e).prev().after($("#block"));p.before($(e));        steps++;}Puzzle.isGameOver();},isGameOver: function(){   //游戏是否结束var allLi = ul.find("li"),count = 0;for (var i = 0; i < imgLens; i++) {var idx = allLi.eq(i).data().index;if (idx == (i + 1)) {count++;}}if(count == imgLens){alert('u are win! '+steps+' steps in use');Puzzle.initImgOrder();$(".start").show();}},randomImgOrder: function(arr){  //随机打乱图片
                    arr.sort(function () {return 0.5 - Math.random();});var num = Puzzle.reverseCount(arr);/** 检测打乱后是否可解 */if (num % 2 != 0) {/** 不可解，通过调换倒数第二个第三个数值，改变逆序数的奇偶性 */var len = arr.length,t = arr[len-2];arr[len-2] = arr[len-3];arr[len-3] = t;}console.log(arr)return arr;},reverseCount: function(arr){  //计算逆序数var reverseAmount = 0;for (var i = 0; i < imgLens-1; i++) {var current = arr[i];for (var j = i + 1; j < imgLens-1; j++) {var compared = arr[j];if (compared < current) {reverseAmount++;}}}return reverseAmount;}}Puzzle.initImgOrder();$("#select").on('change',function(){var val = $(this).val();if(val == "3"){group = 3;$("#Img").css({"width":"320px","height":"320px"});Puzzle.initImgOrder();}else{group = 4;$("#Img").css({"width":"440px","height":"440px"});                    Puzzle.initImgOrder();}});$("#begin").on('click',function(){$(".start").hide();sequence.splice(imgLens-1, 1); //除开一个空白格var randArr = Puzzle.randomImgOrder(sequence);Puzzle.showRandomImg(randArr);steps = 0;});ul.on('click','li',function(){Puzzle.imgMove(this);});</script></body>
</html>

转载于:https://www.cnblogs.com/slency-ll/p/10282066.html

拼图(九宫格，十六宫格)相关推荐

十六宫格拼图（A*/IDA*）（曼哈顿距离）
传送门迭代加深:通过单纯的深度优先搜索无法找出初始状态到最终状态的最短路径,但是重复进行限制最大深度的深度优先搜索(深度受限搜索)却可以.简单来说,就是在循环执行深度受限搜索的过程中逐步增加限制值l ...
IDA*算法解十六宫格拼图问题
IDA*算法, ID(Iterative Deepening)指的是迭代加深. 它的思想是重复进行限制最大深度的深度优先搜索(此限制从某个最小值遍历到最大值), 也称为深度受限搜索. 一般情况下, 为 ...
汉（海）明码 | “十六宫格法” 破解汉（海）明码相关题目（附软考经典例题）
文章目录一.前言二.奇偶校验码三.海明码概念四.十六宫格法 1.概述 2.原理 3.填写校验位 4.填写数据位 5.填写十六宫格首位五.结语一.前言很多小伙伴在遇到"汉明码&q ...
MFC Windows 程序设计[二十五]之五彩十六宫格(附源码)
MFC Windows 程序设计[二十五]之五彩十六宫格程序之美前言主体运行效果核心代码逻辑分析结束语程序之美前言 MFC是微软公司提供的一个类库(class libraries), ...
MFC Windows 程序设计[三十五]之五彩十六宫格
MFC Windows 程序设计[三十五]之五彩十六宫格程序之美前言主体运行效果核心代码逻辑分析结束语程序之美前言 MFC是微软公司提供的一个类库(class libraries), ...
用H5实现四宫格切换九宫格,再切换十六宫格
废话不多说,直接上代码效果图如下点击右上角按钮,即可切换4宫格,9宫格,16宫格 html部分 <div class="center" ...
vue 1 2 3 4 6 9 16宫格 6宫格（六宫格） 9宫格（九宫格） 16宫格（十六宫格）自定义宫格(样式篇)
直接上图把,如果是你的菜,就点个赞,谢谢. 目录: 我直接在app.vue组件写了.. <template><div class="cell"><di ...
Python拼图游戏源代码，可定制拼图图片，支持多种难度，可九宫格、十六宫格、二十五宫格
配置环境安装pygame模块 pip install pygame 引入资源将照片,添加到resources/pictures路径下照片.jpg格式主函数代码 pintu.py 一个配置文件c ...
webpack4.x+Vue引用mui显示九宫格变六宫格
直接在mui源代码里面粘贴复制grid-default的ul代码,但是我这样子做之后,并不是所期待的三行三列或者两行三列. 原因在于我们的原始html文件最上方,需要添加一项设置: 就是那个第二行, ...
聚划算霸占淘宝“六宫格”
4月9日,手机淘宝App更名为淘宝App,去掉"手机"前缀表明淘宝移动转型进程已经结束,截止到2018年年底,淘宝移动月度活跃用户比一年前增加1.2亿,达到近7亿.4月16日,淘宝 ...

拼图(九宫格，十六宫格)

拼图(九宫格，十六宫格)相关推荐

最新文章

热门文章