这个小游戏主要考察对js基础知识的掌握和使用情况.
知识点
- 布局: 使用九宫格布局方式, 绝对定位子元素, 并且要留一个空格元素, 用于交换位置.
- 玩法:
- 刚进游戏是一种打乱布局的情况.
- 当我们点击某一块的时候, 我们需要判断这块是否可以移动, 只有四周有白块的方块才可以移动. (根据位置来比较)
- 我们需要判断是否已经拼图成功.(根据位置)
效果图如下:
拼图游戏
解答
判断某一块是否可以移动, 以及移动方向
- 获取点击的这一块的top和left值
- 和空白格的top和left进行运算
- 如果点击的这一块可以移动, 说明这一块的 ( left值与空白格的left相同并且top值的差的绝对值是一个方格的高度 ) , 或者 ( top值与空白格的top值相同, 并且left值的差的绝对值是一个放歌的宽度) 只有这两种可能
- 如果点击的方格的left值与空白格的left相同, top值 > 空白格的top值, 说明点击的这一块要向下移动, 空白格向上移动, 如果 小于空白格的值的话, 说明点击的方格需要向上移动, 空白格向下移动.
- 如果点击的方格的top值与空白格的top值相同的话, left > 空白格的left的话, 则点击的方格需要想左移动, 如果小于空白格的left值, 则点击的方格需要向右移动.
判断是否已经复原.
- 首先在九宫格布局的时候, 用一个数据将每个方块的原始正确位置记录下来, 并将这个标签记录下来. 每移动一步, 就去对比下每个位置是否是正确的.
打乱布局
- 打乱布局需要注意, 不能随便打乱, 要根据空白格来进行打乱, 就是让空白格随机移动相应的步数即可, 我做的时候就是让白块随机移动100次. 只有这样才能复原.
有不明白的地方给我发简信 or 给我发邮件
只写没有代码不是很好理解, 代码地址如下:
