介绍,1,$ (“# pic") .change (function (), {
,2,,if (this.files.length 祝辞,0),{
,3,,,,if (this.files [0] .type ==,“图像/jpeg", | |, this.files [0] .type ==,“图像/png"), {
,4,,,,,reader.readAsDataURL (this.files [0]);
,5,,,,,}
,6,,,,,,else {
,7,,,,,,(这).val美元(“;”);
,8个,,,,,,,}
,9日,,,,,,}
10个,,,,else {
11,,,,,,(这).val美元(“;”);
12,,,,,,}
13,,,,}); 1,,,var validWidth =, img [0] .width 作用;img [0] .width %, xCount;
2,,var validHeight =, img [0] .height 作用;img [0] .height %, yCount; 1,,for (var y =, 0;, y & lt;, yCount;, y + +), {
2,,,,,for (var x =, 0;, x & lt;, xCount;, x + +), {
3,,,,,,pieces.push({,指数:x +, y,,一点:,{,x: x *, validWidth /, xCount,
y:大敌;y *, validHeight /, yCount,,
宽度:validWidth /, xCount,,身高:,validHeight /, yCount },});
4,,,,,,drawPoints.push ({, x: x *, pieceWidth,, y,, y *, pieceHeight });
5,,,,,,}
6,,,,,,,,} ,1,,,//randon draw 点
,2,,,,for (var 小姐:=,0;,小姐:& lt;, pieces.length;,我+ +),{
,3,,,,,var index =,方法(math . random (), *, drawPoints.length);
,4,,,,,,,,var drawPoint =, drawPoints(指数);
,5,,,,,,,,,,drawPoints.splice(指数,1);
,6,,,,,,,,,,,部分[我].DrawPoint =, drawPoint;
,7,,,,,,,,,}
,8个,,,,,//swap 从而top 正确
,9日,,,,,,,,,for (var 小姐:=,0;,小姐:& lt;, pieces.length;,我+ +),{
10个,,,,,,,,,,,if (块[我].DrawPoint.x ==, (xCount 安康;1),*,pieceWidth ,,,
[我].DrawPoint.y 碎片==,0,+,,,小姐:!=,(xCount 作用;1)),{
11,,,,,var oldDP =,碎片(xCount 作用;1).DrawPoint;
12,,,,,的作品[xCount 作用;1].DrawPoint =,块[我].DrawPoint;
13,,,,,whitePiece =, {, x: [xCount 安康;1].DrawPoint.x,, y,,碎片(xCount 作用;1).DrawPoint.y};
14日,,,,,部分[xCount 作用;1].DrawPoint.x +=, pieceWidth;
15,,,,,部分[我].DrawPoint =, oldDP;
16,,,,,休息;
17日,,,,,,,}
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章将为大家详细讲解有关HTML5版智力拼图的实现方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
还记得小时候经常玩的这种智力拼图板么,通过各个小格子的移动拼成一幅完整的画面。这种拼图的规则大致是:
1。如果是九宫格的玩法,在九宫格里面有八个小方块;
2。在右上角(或者像图片里一样的在右下角)是最后一个小方块,当其他8个方块拼凑完成后,将第九块方块推回到九宫格中,凑成一幅完整的画面。
(不过我小时候的策略都是抠出来,然后暴力的完成,智商不够,暴力来凑)
<强>代码剖析
,,,以下是对一些关键代码的剖析,在游戏的开始,我们需要选择一张本地图片,然后游戏开始,会将选择的图片打乱到九宫格中,然后将右上角的图片移出,这样九宫格里就有空白位了:
<强> 1。如何预览文件控件选择的图片?
,,,,最近的浏览器中,处于安全的原因,他们都将图片的本地地址隐藏起来,这样我们就不能使用图片控件来进行预览了,万幸的是他们同时还提供了FileReader对象,我们可以通过该对象进行图片的预览,当然我也可以通过该对象得到图片的信息,然后可以在画布中进行绘制;
<强> 2。如何对图片进行裁剪分块?
,,,因为我们所选择的图片可能并不能完整的被分割成需要的块数,比如我们设置横向为3格,但是图片的宽度并不是3的倍数,这样我们就需要对图片进行裁剪,以得到最合适的尺寸;
,,,现在我们需要计算每个方块里面应该绘制什么样的图片,所以需要计算在原图里面截取的坐标点和尺寸,以及映射到九宫格里面的位置;
现在开始把方块进行打乱,但是我们又需要右上角的方块是正确的一块,并且可以把它移出到九宫格外;
