利用原生的JavaScript实现简单拼图游戏(2)

在保存顺序的时候，是用 0～8 这 9 个数字来保存，而空白的方块是数字 8 的位置。所以判断可以移动的唯一条件是，目标位置的值是否为 8。代码如下：

var isPositionEmpty = function(position) { if (position < 0 || position > lastIndex()) { return false; } if (imageIndexForPosition[position] == lastIndex()) { return true; } else { return false; } }

上面 lastIndex() 的值为 8。

3、实现方块移动

方块移动的实现很简单，先将旧位置的图形清除，然后在新的位置绘制。

var refreshImagePositions = function(origin, target) { var originRect = rectForPosition(origin); context.clearRect(originRect[0], originRect[1], originRect[2], originRect[3]); drawImageItem(imageIndexForPosition[target], target); }

4、检查是否完成

检查图案是否已经还原，只需要对数组进行一次遍历，看是否有序即可。

var checkIfFinish = function() { for (var index = 0; index < imageIndexForPosition.length; index++) { if (index != imageIndexForPosition[index]) { return false; } } return true; }

5、交互事件屏蔽

当图案还原之后，我们不希望玩家还能通过键盘或鼠标来移动方块，这个时候就需要对交互事件进行屏蔽。

只需要一个标志位就可以达到这个目的:

//

屏幕点击 background.onclick = function(e) { if (isFinish) { return; } // do something }; // 键盘按钮事件 document.onkeyup = function(event) { if (isFinish) { return; } // do something }

当图案还原之后，标志位 isFinish 会被置为 true ，然后在屏幕点击和键盘按钮响应事件的开始处添加判断，如果已经结束，则不继续走方块移动的逻辑。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。

您可能感兴趣的文章: