HTML5版智力拼图的实现方法
这篇文章将为大家详细讲解有关HTML5版智力拼图的实现方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
创新互联是专业的许昌网站建设公司,许昌接单;提供成都网站设计、成都网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行许昌网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
还记得小时候经常玩的这种智力拼图板么,通过各个小格子的移动拼成一幅完整的画面。这种拼图的规则大致是:
1. 如果是九宫格的玩法,在九宫格里面有八个小方块;
2. 在右上角(或者像图片里一样的在右下角)是最后一个小方块,当其他8个方块拼凑完成后,将第九块方块推回到九宫格中,凑成一幅完整的画面。
(不过我小时候的策略都是抠出来,然后暴力的完成,智商不够,暴力来凑)
代码剖析
以下是对一些关键代码的剖析,在游戏的开始,我们需要选择一张本地图片,然后游戏开始,会将选择的图片打乱到九宫格中,然后将右上角的图片移出,这样九宫格里就有空白位了:
1. 如何预览文件控件选择的图片?
最近的浏览器中,处于安全的原因,他们都将图片的本地地址隐藏起来,这样我们就不能使用图片控件来进行预览了,万幸的是他们同时还提供了FileReader对象,我们可以通过该对象进行图片的预览,当然我也可以通过该对象得到图片的信息,然后可以在Canvas中进行绘制;
1 $("#pic").change(function () { 2 if (this.files.length > 0) { 3 if (this.files[0].type == "image/jpeg" || this.files[0].type == "image/png") { 4 reader.readAsDataURL(this.files[0]); 5 } 6 else { 7 $(this).val(""); 8 } 9 } 10 else { 11 $(this).val(""); 12 } 13 });
2. 如何对图片进行裁剪分块?
因为我们所选择的图片可能并不能完整的被分割成需要的块数,比如我们设置横向为3格,但是图片的宽度并不是3的倍数,这样我们就需要对图片进行裁剪,以得到最合适的尺寸;
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 < yCount; y++) { 2 for (var x = 0; x < xCount; x++) { 3 pieces.push({ index: x + y, point: { x: x * validWidth / xCount, y: y * validHeight / yCount, width: validWidth / xCount, height: validHeight / yCount } }); 4 drawPoints.push({ x: x * pieceWidth, y: y * pieceHeight }); 5 } 6 }
现在开始把方块进行打乱,但是我们又需要右上角的方块是正确的一块,并且可以把它移出到九宫格外;
1 //randon draw points 2 for (var i = 0; i < pieces.length; i++) { 3 var index = parseInt(Math.random() * drawPoints.length); 4 var drawPoint = drawPoints[index]; 5 drawPoints.splice(index, 1); 6 pieces[i].DrawPoint = drawPoint; 7 } 8 //swap the top right 9 for (var i = 0; i < pieces.length; i++) { 10 if (pieces[i].DrawPoint.x == (xCount - 1) * pieceWidth && pieces[i].DrawPoint.y == 0 +&& i != (xCount - 1)) { 11 var oldDP = pieces[xCount - 1].DrawPoint; 12 pieces[xCount - 1].DrawPoint = pieces[i].DrawPoint; 13 whitePiece = { x: pieces[xCount - 1].DrawPoint.x, y: pieces[xCount - 1].DrawPoint.y}; 14 pieces[xCount - 1].DrawPoint.x += pieceWidth; 15 pieces[i].DrawPoint = oldDP; 16 break; 17 } 18 }
在检测方块是否可以移动,我们就判断在该方块的上下左右是否有空白位,有就可以移向空白位;
1 var canMove = function (p) { 2 return (Math.abs(p.DrawPoint.x - whitePiece.x) == pieceWidth && p.DrawPoint.y == whitePiece.y) 3 || (Math.abs(p.DrawPoint.y - whitePiece.y) == pieceHeight && p.DrawPoint.x == whitePiece.x); 4 };
是否拼凑完成的判断,我们就判断该图片应该在第几行,第几列,并且当前在第几行,第几列,如果所有的方块都在正确的位置,那就表示成功了。
1 var success = function () { 2 for (var i = 0; i < pieces.length; i++) { 3 var x = i % 3; 4 var y = parseInt(i / 3); 5 if (pieces[i].DrawPoint.x != x * pieceWidth || pieces[i].DrawPoint.y != y * pieceWidth) { 6 return false; 7 } 8 } 9 10 return true; 11 }
关于“HTML5版智力拼图的实现方法”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
新闻名称:HTML5版智力拼图的实现方法
文章地址:http://pwwzsj.com/article/jheejs.html