html+css+js实现网页拼图游戏

代码地址如下：
http://www.demodashi.com/demo/14449.html

项目描述

使用 html+js+css 实现一个网页拼图游戏，可支持简单，中等，困难三种难度。

演示效果

在浏览器直接打开网页即可运行，有三种难度可以选择，完成拼图会显示所用的时间和步数。

项目结构

Puzzle

├── chilian.jpg

├── fifteen.css

├── fifteen.html

└── fifteen.js

文件夹中只有四个文件，拼图所用的原图以及3个代码文件。

项目实现

1. 显示拼图

拼图的大小是4x4，总共16格，其中有一格是空的，用于移动。html的主体代码如下，拼图区域只需要使用一个div，后续再在js里使用循环构建16个小方块

<body>

   <h1>拼图游戏</h1>

   <div id="statu">

      <img src="chilian.jpg" id="smallPic"><br/>

      <label>时间: </label><span id="time">00:00</span>

      <label>步数: </label><span id="step">0</span><br/>

      <select>

        <option selected="selected" value="1">简单模式</option>

        <option value="2">中等模式</option>

        <option value="3">困难模式</option>

     </select>

   </div>

   <div id="fifteen"></div>

   <button id="restart">重新开始</button>

</body>

使用js创建小方块后再插入到fifteen的div中，先将16个存在DocumentFragment中, 最后再一次性添加到html中，页面只需渲染一次, 提高性能

// 创建 4x4 的拼图

function createPuzzle() {

      // 先将16个小div存在DocumentFragment, 页面只需渲染一次, 提高性能

      var frag = document.createDocumentFragment();

      for (var i = 1; i <= 4; ++i) {

            for (var j = 1; j <= 4; ++j) {

                  if (i == 4 && j == 4) {

                        var empty = document.createElement("div");

                        empty.setAttribute('id', 'empty');

                        empty.setAttribute('class', 'row4 col4');

                        frag.appendChild(empty);

                        break;

                  }

                  var pic = document.createElement("div");

                  pic.setAttribute("id", "pic" + ((i - 1) * 4 + j));

                  pic.setAttribute("class", "row" + i + " col" + j);

                  frag.appendChild(pic);

            }

      }

      document.getElementById("fifteen").appendChild(frag);

}

最后生成小方块的html如下：

<div id="fifteen">

      <div id="pic1" class="row1 col1"></div>

      <div id="pic2" class="row1 col2"></div>

      <div id="pic3" class="row1 col3"></div>

      <div id="pic4" class="row1 col4"></div>

      <div id="pic5" class="row2 col1"></div>

      <div id="pic6" class="row2 col2"></div>

      <div id="pic7" class="row2 col3"></div>

      <div id="pic8" class="row2 col4"></div>

      <div id="pic9" class="row3 col1"></div>

      <div id="pic10" class="row3 col2"></div>

      <div id="pic11" class="row3 col3"></div>

      <div id="pic12" class="row3 col4"></div>

      <div id="pic13" class="row4 col1"></div>

      <div id="pic14" class="row4 col2"></div>

      <div id="pic15" class="row4 col3"></div>

      <div id="empty" class="row4 col4"></div>

</div>

有个小方块之后，怎样每格显示不同的图片，有一种方法是可以将大图片等分切割成16张小图篇，但这种方法很麻烦，需要切图，而且代码文件夹里就需要使用到16张图片，这里使用css实现切图，所有的小图都是同一张图片，不需要切割。

因为使用到的图片大小是352x352，所以16等分后是88x88，将小方块的大小设置为86x86，每张小图间刚好多出一条2px的间隔，不会显得太紧凑。每个小方块使用绝对定位，背景图片都是大图，通过设置每个方块的背景图片偏移量，显示出一副完整的图片。

#fifteen div{

   width: 86px;

   height: 86px;

   border: 1px solid #CCCCCC;

   margin: 1px;

   background-image: url(chilian.jpg);

   background-repeat: no-repeat;

   position: absolute;

   -webkit-transition: all 0.4s;

   -moz-transition: all 0.4s;

   -ms-transition: all 0.4s;

   -o-transition: all 0.4s;

   transition: all 0.4s;

}

.row1 {top: 0px;}

.row2 {top: 88px;}

.row3 {top: 176px;}

.row4 {top: 264px;}

.col1 {left: 0px;}

.col2 {left: 88px;}

.col3 {left: 176px;}

.col4 {left: 264px;}

#pic1 {background-position: -0px 0px;}

#pic2 {background-position: -88px 0px;}

#pic3 {background-position: -176px 0px;}

#pic4 {background-position: -264px 0px;}

#pic5 {background-position: 0px -88px;}

#pic6 {background-position: -88px -88px;}

#pic7 {background-position: -176px -88px;}

#pic8 {background-position: -264px -88px;}

#pic9 {background-position: 0px -176px;}

#pic10 {background-position: -88px -176px;}

#pic11 {background-position: -176px -176px;}

#pic12 {background-position: -264px -176px;}

#pic13 {background-position: 0px -264px;}

#pic14 {background-position: -88px -264px;}

#pic15 {background-position: -176px -264px;}

#fifteen #empty {border: none; background: none;}

2. 打乱拼图

在生成打乱的拼图时，随机打乱的拼图不一定可以还原，可能会出现无解的情况，有一种打乱的方法可以确保生成的拼图永远有解：每次交换3张图片的位置, 最后的拼图一定是可还原的，比如将ABC三张图的位置交换为BCA，这算一次交换，可以选择任意三张图，交换任意次，最后生成的拼图肯定都是有解可还原的。

在打乱拼图的时候，分别打乱右下角的3张，8张，以及全部15张图片，可以生成不同难度的拼图，增加趣味性。

// 初始化图片位置, 3 种不同难度

function initPos(difficulty) {

      var arr = [];

      if (difficulty == 1)

            arr = [10, 11, 14];

      else if (difficulty == 2)

            arr = [5, 6, 7, 9, 10, 11, 13, 14];

      else arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];

      // 随机打乱数组

      arr.sort(function () {

            return Math.random() - 0.5;

      });

      // 每次交换3张图片的位置, 最后的拼图一定是可还原的

      // 难度越大, 交换的图片数越多

      for (i = 0; i < difficulty * 3; i += 3) {

            var temp = global.pics[arr[i]].className;

            global.pics[arr[i]].className = global.pics[arr[i + 1]].className;

            global.pics[arr[i + 1]].className = global.pics[arr[i + 2]].className;

            global.pics[arr[i + 2]].className = temp;

      }

}

移动拼图

只有点击空白格相邻的图片才能进行移动，移动的时候，将点击图片的class和空白格的class进行交换，因为不同的class背景图片不同，而且css中添加了动画效果，因此交换class后页面上看起来就是图片发生了移动。

判断拼图是否完成时只有判断每个div的class是否与一开始的对应，如果全部相同证明每张图片都回到了起始位置，拼图完成。

global.pics[i].onclick = function () {

		if (!global.start)  // 未开始游戏, 不移动

				return;

		var clickPos = this.className.match(/[0-9]/g); // 被点击的图片坐标

		var emptyPos = empty.className.match(/[0-9]/g); // 空白格的坐标

		// 如果点击图片的坐标合法, 与空白格相邻，和空白格交换

		if (isValid(clickPos, emptyPos)) {

			var temp = this.className;

			this.className = empty.className;

			global.empty.className = temp;

			++global.step.innerHTML;

			// 判断是否完成拼图

			if (isDone())

					success();

		}

	};

其他说明

完整实现请下载代码，注释清晰，推荐使用谷歌浏览器或火狐浏览器打开，有问题可以评论或联系我html+css+js实现网页拼图游戏

代码地址如下：
http://www.demodashi.com/demo/14449.html

注：本文著作权归作者，由demo大师代发，拒绝转载，转载需要作者授权