HTML5教程

当前位置: HTML5技术网 > HTML5教程 > HTML5版智力拼图

HTML5版智力拼图

本文介绍文件下载:智力拼图板文件下载 (浏览器需支持HTML5)



(图片摘自网络,本人木有版权。。。如要追究,本人马上换图) 


        还记得小时候经常玩的这种智力拼图板么,通过各个小格子的移动拼成一幅完整的画面。这种拼图的规则大致是:


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版智力拼图】相关文章

1. HTML5版智力拼图

2. 一个HTML5的视频智力游戏

3. HTML5技术之图像处理:一个滑动的拼图游戏

4. X-拼图

5. 拼图游戏

6. jQuery/CSS3实现拼图效果的相册插件

7. 坦克大战HTML5版——HTML5爱好者原创

8. 微软开始接纳HTML5:首推HTML5版必应客户端

9. 命令与征服HTML5版

10. HTML5版宝石迷阵

本文来源:https://www.51html5.com/a674.html

点击展开全部

﹝HTML5版智力拼图﹞相关内容

「HTML5版智力拼图」相关专题

其它栏目

也许您还喜欢