web前端-使用jQuery 完成拼图游戏

这个小游戏主要考察对js基础知识的掌握和使用情况.

知识点

• 布局: 使用九宫格布局方式, 绝对定位子元素, 并且要留一个空格元素, 用于交换位置.
• 玩法:
  • 刚进游戏是一种打乱布局的情况.
  • 当我们点击某一块的时候, 我们需要判断这块是否可以移动, 只有四周有白块的方块才可以移动. (根据位置来比较)
  • 我们需要判断是否已经拼图成功.(根据位置)

效果图如下:

拼图游戏

解答

判断某一块是否可以移动, 以及移动方向

1. 获取点击的这一块的top和left值
2. 和空白格的top和left进行运算
3. 如果点击的这一块可以移动, 说明这一块的 ( left值与空白格的left相同并且top值的差的绝对值是一个方格的高度 ) , 或者 ( top值与空白格的top值相同, 并且left值的差的绝对值是一个放歌的宽度) 只有这两种可能
4. 如果点击的方格的left值与空白格的left相同, top值 > 空白格的top值, 说明点击的这一块要向下移动, 空白格向上移动, 如果 小于空白格的值的话, 说明点击的方格需要向上移动, 空白格向下移动.
5. 如果点击的方格的top值与空白格的top值相同的话, left > 空白格的left的话, 则点击的方格需要想左移动, 如果小于空白格的left值, 则点击的方格需要向右移动.

判断是否已经复原.

• 首先在九宫格布局的时候, 用一个数据将每个方块的原始正确位置记录下来, 并将这个标签记录下来. 每移动一步, 就去对比下每个位置是否是正确的.

打乱布局

• 打乱布局需要注意, 不能随便打乱, 要根据空白格来进行打乱, 就是让空白格随机移动相应的步数即可, 我做的时候就是让白块随机移动100次. 只有这样才能复原.

有不明白的地方给我发简信 or 给我发邮件

只写没有代码不是很好理解, 代码地址如下:

点击这里查看 http://jsrun.net/MGkKp/edit