html九宫格布局代码（九宫格拼图·求此问题解法~~思路~代码都可~~就是关于其还原算法的·急~在线等~多谢哈）

本文目录

• 九宫格拼图·求此问题解法~~思路~代码都可~~就是关于其还原算法的·急~在线等~多谢哈
• hbuilderx输入什么出现九宫格
• java 写一个九宫格的代码!不用很复杂,实现了基本的功能就行! 谢谢大家!我自己写的都晕了
• 九宫格方法图解
• 一个九宫格用hHTML和CSS怎么制作每个格子都有不同颜色
• 写一个关于九宫格的html代码,当鼠标指向外围表格任一数字全部显示为该指向的数字,指向中间数字5保持原状
• 如何用div+css建一个分离的’九宫格布局

九宫格拼图·求此问题解法~~思路~代码都可~~就是关于其还原算法的·急~在线等~多谢哈

***隐藏网址***

在一个3×3的九宫中有1－8这8个数及一个空格随机的摆放在其中的格子里，如图1－1所示。现在要求实现这个问题：将其调整为如图1－1右图所示的形式。调整的规则是：每次只能将与空格（上、下、或左、右）相邻的一个数字平移到空格中。试编程实现这一问题的求解。
（图1－1）
二、题目分析：
这是人工智能中的经典难题之一，问题是在3×3方格棋盘中，放8格数，剩下的没有放到的为空，每次移动只能是和相邻的空格交换数。程序自动产生问题的初始状态，通过一系列交换动作将其转换成目标排列（如下图1－2到图1－3的转换）。
（图1－2） （图1－3）
该问题中，程序产生的随机排列转换成目标共有两种可能，而且这两种不可能同时成立，也就是奇数排列和偶数排列。可以把一个随机排列的数组从左到右从上到下用一个一维数组表示，如上图1－2我们就可以表示成｛8，7，1，5，2，6，3，4，0｝其中0代表空格。
在这个数组中我们首先计算它能够重排列出来的结果，公式就是：
∑（F（X））＝Y，其中F（X）
是一个数前面比这个数小的数的个数,Y为奇数和偶数时各有一种解法。（八数码问题是否有解的判定 ）
上面的数组可以解出它的结果。
F（8）＝0；
F（7）＝0；
F（1）＝0；
F（5）＝1；
F（2）＝1；
F（6）＝3；
F（3）＝2；
F（4）＝3；
Y＝0＋0＋0＋1＋1＋3＋2＋3＝10
Y＝10是偶数，所以其重排列就是如图1－3的结果，如果加起来的结果是奇数重排的结果就是如图1－1最右边的排法。
三、算法分析
求解方法就是交换空格（0）位置，直至到达目标位置为止。图形表示就是：
（图3－1）
要想得到最优的就需要使用广度优先搜索，九宫的所以排列有9！种，也就是362880种排法，数据量是非常大的，使用广度搜索，需要记住每一个结点的排列形式，要是用数组记录的话会占用很多的内存，可以把数据进行适当的压缩。使用DWORD形式保存，压缩形式是每个数字用3位表示，这样就是3×9＝27个字节，由于8的二进制表示形式1000，不能用3位表示，使用了一个小技巧就是将8表示为000，然后用多出来的5个字表示8所在的位置，就可以用DWORD表示了。用移位和或操作将数据逐个移入，比乘法速度要快点。定义了几个结果来存储遍历到了结果和搜索完成后保存最优路径。
类结构如下：
class CNineGird
{
public:
struct PlaceList
{
DWORD Place;
PlaceList* Left;
PlaceList* Right;
};
struct Scanbuf
{
DWORD Place;
int ScanID;
};
struct PathList
{
unsigned char Path;
};
private:
PlaceList *m_pPlaceList;
Scanbuf *m_pScanbuf;
RECT m_rResetButton;
RECT m_rAutoButton;
public:
int m_iPathsize;
clock_t m_iTime;
UINT m_iStepCount;
unsigned char m_iTargetChess;
unsigned char m_iChess;
HWND m_hClientWin;
PathList *m_pPathList;
bool m_bAutoRun;
private:
inline bool AddTree(DWORD place , PlaceList*& parent);
void FreeTree(PlaceList*& parent);
inline void ArrayToDword(unsigned char *array , DWORD & data);
inline void DwordToArray(DWORD data , unsigned char *array);
inline bool MoveChess(unsigned char *array , int way);
bool EstimateUncoil(unsigned char *array);
void GetPath(UINT depth);
public:
void MoveChess(int way);
bool ComputeFeel();
void ActiveShaw(HWND hView);
void DrawGird(HDC hDC , RECT clientrect);
void DrawChess(HDC hDC , RECT clientrect);
void Reset();
void OnButton(POINT pnt , HWND hView);
public:
CNineGird();
~CNineGird();
};
计算随机随机数组使用了vector模板用random_shuffle（，）函数来打乱数组数据，并计算目标结果是什么。代码：
void CNineGird::Reset()
{
if(m_bAutoRun) return;
vector vs;
int i;
for (i = 1 ; i 《 9 ; i ++)
vs.push_back(i);
vs.push_back(0);
random_shuffle(vs.begin(), vs.end());
random_shuffle(vs.begin(), vs.end());
for ( i = 0 ; i 《 9 ; i ++)
{
m_iChess;
}
if (!EstimateUncoil(m_iChess))
{
unsigned char array = {1,2,3,8,0,4,7,6,5};
memcpy(m_iTargetChess , array , 9);
}
else
{
unsigned char array = {1,2,3,4,5,6,7,8,0};
memcpy(m_iTargetChess , array , 9);
}
m_iStepCount = 0;
}
数据压缩函数实现：
inline void CNineGird::ArrayToDword(unsigned char *array , DWORD& data)
{
unsigned char night = 0;
for ( int i = 0 ; i 《 9 ; i ++)
{
if (array == 8)
{
night = (unsigned char)i;
break;
}
}
array = 0;
data = 0;
data = (DWORD)((DWORD)array 《《 26 |
(DWORD)array 《《 20 |
(DWORD)array 《《 14 |
(DWORD)array 《《 8 |
(DWORD)array 《《 5 | night);
array = 8;
}
解压缩时跟压缩正好相反，解压代码：
inline void CNineGird::DwordToArray(DWORD data , unsigned char *array)
{
unsigned char chtem;
for ( int i = 0 ; i 《 9 ; i ++)
{
chtem = (unsigned char)(data 》》 (32 - (i + 1) * 3) & 0x00000007);
array = chtem;
}
chtem = (unsigned char)(data & 0x0000001F);
array = 8;
}
由于可扩展的数据量非常的大，加上在保存的时候使用的是DWORD类型，将每一步数据都记录在一个排序二叉树中，按从小到大从左到有的排列，搜索的时候跟每次搜索将近万次的形式比较快几乎是N次方倍，把几个在循环中用到的函数声明为内联函数，并在插入的时候同时搜索插入的数据会不会在树中有重复来加快总体速度。二叉树插入代码：
inline bool CNineGird::AddTree(DWORD place , PlaceList*& parent)
{
if (parent == NULL)
{
parent = new PlaceList();
parent-》Left = parent-》Right = NULL;
parent-》Place = place;
return true;
}
if (parent-》Place == place)
return false;
if (parent-》Place 》 place)
{
return AddTree(place , parent-》Right);
}
return AddTree(place , parent-》Left);
}
计算结果是奇数排列还是偶数排列的代码：
bool CNineGird::EstimateUncoil(unsigned char *array)
{
int sun = 0;
for ( int i = 0 ; i 《 8 ; i ++)
{
for ( int j = 0 ; j 《 9 ; j ++)
{
if (array != 0)
{
if (array == i +1 )
break;
if (array 《 i + 1)
sun++;
}
}
}
if (sun % 2 == 0)
return true;
else
return false;
}
移动到空格位的代码比较简单，只要计算是否会移动到框外面就可以了，并在移动的时候顺便计算一下是不是已经是目标结果，这是用来给用户手工移动是给与提示用的，代码：
inline bool CNineGird::MoveChess(unsigned char *array , int way)
{
int zero , chang;
bool moveok = false;
for ( zero = 0 ; zero 《 9 ; zero ++)
{
if (array == 0)
break;
}
POINT pnt;
pnt.x = zero % 3;
pnt.y = int(zero / 3);
switch(way)
{
case 0 : //up
if (pnt.y + 1 《 3)
{
chang = (pnt.y + 1) * 3 + pnt.x ;
array;
array = 0;
moveok = true;
}
break;
case 1 : //down
if (pnt.y - 1 》 -1)
{
chang = (pnt.y - 1) * 3 + pnt.x ;
array;
array = 0;
moveok = true;
}
break;
case 2 : //left
if (pnt.x + 1 《 3)
{
chang = pnt.y * 3 + pnt.x + 1;
array;
array = 0;
moveok = true;
}
break;
case 3 : //right
if (pnt.x - 1 》 -1)
{
chang = pnt.y * 3 + pnt.x - 1;
array;
array = 0;
moveok = true;
}
break;
}
if (moveok && !m_bAutoRun)
{
m_iStepCount ++ ;
DWORD temp1 ,temp2;
ArrayToDword(array , temp1);
ArrayToDword(m_iTargetChess , temp2);
if (temp1 == temp2)
{
MessageBox(NULL , "你真聪明这么快就搞定了!" , "^_^" , 0);
}
}
return moveok;
}
在进行广度搜索时候，将父结点所在的数组索引记录在子结点中了，所以得到目标排列的时候，只要从子结点逆向搜索就可以得到最优搜索路径了。用变量m_iPathsize来记录总步数，具体函数代码：
void CNineGird::GetPath(UINT depth)
{
int now = 0 , maxpos = 100 ;
UINT parentid;
if (m_pPathList != NULL)
{
delete m_pPathList;
}
m_pPathList = new PathList;
parentid = m_pScanbuf.ScanID;
DwordToArray(m_pScanbuf.Path);
while(parentid != -1)
{
if (now == maxpos)
{
maxpos += 10;
PathList * temlist = new PathList;
memcpy(temlist , m_pPathList , sizeof(PathList) * (maxpos - 10));
delete m_pPathList;
m_pPathList = temlist;
}
DwordToArray(m_pScanbuf.Path);
parentid = m_pScanbuf.ScanID;
}
m_iPathsize = now;
}
动态排列的演示函数最简单了，为了让主窗体有及时刷新的机会，启动了一个线程在需要主窗体刷新的时候，用Slee（UINT）函数来暂停一下线程就可以了。代码：
unsigned __stdcall MoveChessThread(LPVOID pParam)
{
CNineGird * pGird = (CNineGird *)pParam;
RECT rect;
pGird-》m_iStepCount = 0;
::GetClientRect(pGird-》m_hClientWin , ▭);
for ( int i = pGird-》m_iPathsize ; i 》 0 ; i --)
{
memcpy(pGird-》m_iChess , pGird-》m_pPathList.Path , 9);
pGird-》m_iStepCount ++;
InvalidateRect( pGird-》m_hClientWin , ▭ , false);
Sleep(300);
}
char msg;
sprintf(msg , "^_^ ! 搞定了!\r\n计算步骤用时%d毫秒" , pGird-》m_iTime);
MessageBox(NULL , msg , "~_~" , 0);
pGird-》m_bAutoRun = false;
return 0L;
}
最后介绍一下搜索函数的原理，首先得到源数组，将其转换成DWORD型，与目标比较，如果相同完成，不同就交换一下数据和空格位置，加入二叉树，搜索下一个结果，直到没有步可走了，在搜索刚刚搜索到的位置的子位置，这样直到找到目标结果为止，函数：
bool CNineGird::ComputeFeel()
{
unsigned char *array = m_iChess;
UINT i;
const int MAXSIZE = 362880;
unsigned char temparray;
DWORD target , fountain , parent , parentID = 0 , child = 1;
ArrayToDword(m_iTargetChess , target);
ArrayToDword(array , fountain);
if (fountain == target)
{
return false;
}
if (m_pScanbuf != NULL)
{
delete m_pScanbuf;
}
m_pScanbuf = new Scanbuf;
AddTree(fountain ,m_pPlaceList);
m_pScanbuf.Place = fountain;
m_pScanbuf.ScanID = -1;
clock_t tim = clock();
while(parentID 《 MAXSIZE && child 《 MAXSIZE)
{
parent = m_pScanbuf.Place;
for ( i = 0 ; i 《 4 ; i ++) // 0 :UP , 1:Down ,2:Left,3:Right
{
DwordToArray(parent , temparray);
if (MoveChess(temparray,i)) //是否移动成功
{
ArrayToDword(temparray , fountain);
if (AddTree(fountain, m_pPlaceList)) //加入搜索数
{
m_pScanbuf.Place = fountain;
m_pScanbuf.ScanID = parentID;
if (fountain == target) //是否找到结果
{
m_iTime = clock() - tim;
GetPath(child);//计算路径
FreeTree(m_pPlaceList);
delete m_pScanbuf;
m_pScanbuf = NULL;
return true;
}
child ++;
}
}
} // for i
parentID++;
}
m_iTime = clock() - tim;
FreeTree(m_pPlaceList);
delete m_pScanbuf;
m_pScanbuf = NULL;
return false;
}
重要函数的介绍结束;下面是程序的运行结果和运算结果：

hbuilderx输入什么出现九宫格

九宫格切图显示 九宫格 切图
九宫格切图显示
作者： cloudqz_WCH 已实名认证
下载人数: 64 下载次数: 87 收藏 收藏人数: 5
（0）
插件ID：wch-gggqt
插件包体积：1.3KB
更新日期：2021-12-17版本：1.0.1
使用 HBuilderX 导入插件
注意：导入此插件需要使用 2.9+ 以上版本的 HBuilderX
下载插件ZIP
赞赏（0）
本站所有收费插件均支持免费试用，切勿私下交易或购买不可正常试用的插件，而造成不必要的纠纷。
概述

评论
更新记录
1.0.1（2021-12-17）
简易九宫格切图显示
平台兼容性
Vue2Vue3
√×
App快应用微信小程序支付宝小程序百度小程序字节小程序QQ小程序
HBuilderX 3.0.0 app-vue app-nvue×√××××
钉钉小程序快手小程序飞书小程序京东小程序
××××
H5-SafariAndroid Browser微信浏览器(Android)QQ浏览器(Android)ChromeIEEdgeFirefoxPC-Safari
√√√×√√√√√
九宫格切图显示
示例代码
复制代码《template》
《view》
《gggqt size="750" gap=’1’ zoom=’1’ url="/static/1.png"》《/gggqt》
《/view》
《/template》
《script》
export default {
data() {
return {
}
},
onLoad() {
},
methods: {
}
}
《/script》
《style》
《/style》
注意事项
图片大小必须为正方形图片.zoom是缩放值,1位正常数值越小图片越小.gap数值越大间隙越大
使用说明
名称类型默认值描述单位
sizeNumber750原图片大小rpx
gapNumber0.5图片间隙%
zoomNumber1整体缩放%
urlString’’图片地址

java 写一个九宫格的代码!不用很复杂,实现了基本的功能就行! 谢谢大家!我自己写的都晕了

/*
九宫格算法代码 C++版
*/
#include 《stdio.h》
int map = {0, 0, 3, 8, 1, 0, 0, 0, 9,
5, 0, 0, 4, 0, 0, 0, 8, 0,
0, 6, 0, 9, 0, 0, 1, 0, 0,
0, 0, 8, 0, 3, 0, 0, 0, 6,
0, 0, 0, 0, 0, 0, 0, 0, 0,
9, 0, 0, 6, 0, 0, 5, 0, 0,
0, 0, 6, 0, 0, 9, 0, 1, 0,
0, 1, 0, 0, 0, 5, 0, 0, 4,
2, 0, 0, 0, 4, 8, 7, 0, 0};
void display()
{
int i;
int j;
for (i = 0; i 《 9; i++)
{
for (j = 0; j 《 9; j++)
{
if(map)
{
printf(" 《 %d 》 ", map);
}
else
{
printf(" 《 》 ");
}
}
printf("\n");
}
}
int check(int x, int y, int *mark) //check函数为该格子可以选择的数字
{
int i;
int j;
int gi;
int gj;
int count = 0;

for (i = 1; i 《= 9; i++)
{
mark = 0; //初始化
}
for (i = 0; i 《 9; i++)
{
mark = 1; //表示该行该数字已存在
mark = 1; //表示该列该数字已存在
}
gi = x / 3 * 3; // 九宫格把map分割成9个小块,如果该格子所在行列为(1,4),那么它所在子格子起始为(0,3)到(2,5)的九个小格子
gj = y / 3 * 3;
for (i = 0; i 《 3; i++)
{
for (j = 0; j 《 3; j++)
{
mark = 1; //此循环为表示所在子格子的九个小格子中已存在该数字
}
}
for (i = 1; i 《= 9; i++)
{
if(0 == mark) //如果该数字不存在则++
{
count++;
}
}
return count;
}
void crack() //？？
{
int i;
int j;
int mark; //标志数字是否已存在
int min = 10; //记录最少可能数字数
int ci = -1; //ci,cj用来记录最少可能数字的格子所在行列
int cj;

for (i = 0; i 《 9; i++)
{
for (j = 0; j 《 9; j++)
{
if (map)
{
continue; //如果该格子已有数字则跳到下一个格子
}
int c = check(i, j, mark); //c为该格子可以选择的数字
if (0 == c)
{
return;
}
if (c 《 min)
{
ci = i;
cj = j;
min = c;
}
}
}
if (-1 == ci)
{
printf("The answer is:\n");
display();
return;
}
check(ci, cj, mark);//这个语句的作用是把mark这个数组设置成最小可能格子缺少的数字,若缺少则为0
for (i = 1; i 《= 9; i++)
{
if (mark == 0)
{
map = i; //先填入该数字
crack(); //进行判断
}
map = 0; //若这个数字不可以得到解则判断下一可能数字(这里类似0-1背包问题)
}
}
int main()
{
printf("The game is:\n");
display();
crack();
return 0;
}

九宫格方法图解

九宫格方法图解如下：

“九宫格”是我国书法史上临帖写仿的一种界格，又叫“九方格”；另外也指一种手机键盘布局，是相对于全键盘而言。“九宫格”也是一种很受人们喜爱的游戏。

解题的本质有二：隐性唯一解(Hidden Single)及显性唯一(Naked Single)，他们的名称是在候选数法的基础上命名的。

根据解题本质发展出来的解题方法有二种：

摒除法

摒除法：用数字去找单元内唯一可填空格，称为摒除法，数字可填唯一空格称为摒余解(隐性唯一解)。

根据不同的作用范围，摒余解可分为下述三种：

1.1 数字可填唯一空格在「宫」单元称为宫摒余解(Hidden Single in Box)，这种解法称宫摒除法。

1.2 数字可填唯一空格在「行」单元称为行摒余解(Hidden Single in Row)，这种解法称行摒除法。

1.3 数字可填唯一空格在「列」单元称为列摒余解(Hidden Single in Column)，这种解法称列摒除法。

1.4 行摒余解和列摒余解合称行列摒余解(Hidden Single in Line)。

1.5 得到行列摒余解的方法称为行列摒除法。

一个九宫格用hHTML和CSS怎么制作每个格子都有不同颜色

《!DOCTYPE html》
《html》
《head》
    《meta charset="GBK"》
    《title》test《/title》
   《style type="text/css"》
       *{
           box-sizing: border-box;
           margin: 0;
           padding: 0;
       }
       .container{
           width: 90px;
           height: 90px;
       }
       .item{
           width: 30px;
           height: 30px;
           display: block;
           float: left;
       }
   《/style》
《/head》
《body》
《div class="container"》
    《div class="item"》《/div》
    《div class="item"》《/div》
    《div class="item"》《/div》
    《div class="item"》《/div》
    《div class="item"》《/div》
    《div class="item"》《/div》
    《div class="item"》《/div》
    《div class="item"》《/div》
    《div class="item"》《/div》
《/div》
《/body》
《/html》
《script type="text/javascript"》
    var items = document.querySelectorAll(’.item’);
    Array.prototype.slice.call(items, 0).forEach(function(item){
        item.style.backgroundColor = ’#’+(~~(Math.random()*(1《《24))).toString(16);
    });
《/script》

写一个关于九宫格的html代码,当鼠标指向外围表格任一数字全部显示为该指向的数字,指向中间数字5保持原状

你可以下一个javascript的功能特效的帮助文档，里面有这个，只是稍微改一下就行了，或者jQuery的帮助文档

如何用div+css建一个分离的’九宫格布局

愚你所说，就是不用所谓的表格进行布局，让它回到它应该呆的地方，而所谓的div+css，只是统称，意为用相应的标签做它应该做的事，而不是乱套来套去…用css做外衣，实现内容与表现分离，而不是什么都乱堆在一起…
以上…