html5 漂亮的左右布局
本项目是基于 HTML+CSS+JavaScript 实现网页版的拼图嬉戏。实现过程中将用到 HTML5，CSS3 及 JavaScript 相关学问。完成这个项目，可以进一步扎实前端基础学问。

九宫格拼图信任大家都玩过了，看似容易的小嬉戏，但实现起来其实并不那么容易。在以前，写程序是程序员的专利，惟独他们才干做出一个软件来。但是现在不同了。科技的长进和经济的进展，使得每个人都可以用法计算机。特殊是 HTML5 和 CSS3 的流行，使得制作一个基本的嬉戏变得容易。

下面我们就来做一个九宫格拼图。它的玩法是移动空格块旁边的方块，使得它们根据方块上面标的数字挨次排好。终于的效果：

本试验涉及以下学问点：

HTML5CSS3JavaScript


Vscode

本项目难度普通，适合刚学完前端基础（HTML+CSS+JavaScript）的学生作为练手项目。

附件：

按照下面的效果图来观看思量，我们要做的就是设置一个大 DIV 用来小包里面的小 DIV，然后在里面设置 8 个小 DIV，从 1 开头给他们编号。右边设置两个按钮，点击开头的时候开头计时，完成拼图后停止计时，并弹出一个框，提醒完成了。重来按钮是当用户觉得当前有难度的时候，点击重来可以重新开头一个新的拼图，把全部方块打乱挨次，然后开头计时。

我们的重点就是当鼠标点击其中一个方块时，要推断当前方块是否可移动，假如可移动，则移动到相应的位置，如不行移动，则不做任何事。当移动完一块后，要推断是否完成拼
图。

我们把那个大 DIV 想象成一个盒子，它有九个位置，从 1 开头，到 9 编号，他们的位置和编号都是不会变的。把里面的 8 个小 DIV 想象成 8 个小盒子，给他们设置 top 和 left 就可以控制他们的位置。每个小 DIV 从 1 开头到 8 编号。他们的位置是可以任意转变的。所以当小 DIV 的编号和大 DIV 的编号所有重合时，就完成了拼图。

所以重点就惟独一个了。那就是如何推断是否可移动。这个也容易。我们设置一个一维数组变量，用来保存大 DIV 它里面装的小 DIV 的编号。假如大 DIV 没有小方块，也就表面它是空白块，那么就设为 0。假如当前大 DIV 有小 DIV，那就设置为小 DIV 的编号。然后再设置一个二维数组变量，用来保存大 DIV 的可移动编号。也就是保存这个大 DIV 它全部的可去的位置。比如大 DIV 编号为 2 的，它只能向 1 号，3 号，5 号这三个方向移动。又比如 5，它能向 2、4、6、8 这四个方向移动。我们循环遍历这个变量，假如对应的方向它 没有方块，也就是值为 0，那么它就可以往这个方向移动了。

1.预备相关开发工具

2.建立下面的名目结构：

在puzzle.html中我们有下面的代码：

布局文件就写完了。这里为了简化规律，更易编写代码，我们把全部操作都封装了。只要执行 move（2），就是点击了编号为 2 的小方块，后面的一系列操作都完成了。

布局写完了，现在我们为嬉戏编写样式，使得它更美丽。在这一步，大家就可以自己自由发挥了，你可以写出自己的风格，让嬉戏更美丽。也可以添加更多的元素来装点你的嬉戏。但是注重了，嬉戏 DIV 的大小假如转变了，一定要记得修改 js 代码，稍后我们会具体讲解。

puzzle.css


好了，样式也编写好了。最后再编写一个 js 控制代码，我们的拼图就可以用了。编写样式的时候大家还是先按照我这里的来，等完成了囫囵嬉戏，了解嬉戏规律的时候你们再自己发挥想象力去更改样式，不然可能会浮现未知的错误。好看的css代码

完成这步，打开  应当能看到下面的效果了：

puzzle.js

好了，全部代码都已经编写完成了。现在点击桌面上的  文件，用法 扫瞄器 打开，就能看到效果了。点击上面的方块就可以移动。

通过此项目，我们利用 HTML5 + CSS3 + JavaScript，实现了一个容易的拼图嬉戏。

这里解释一下，由于试验中用法的随机打乱方块的算法十分容易，但是存在 bug，有 50%
的概率生成的挨次是无法恢复的，这个时候就只能点击重新开头。

     

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。