JavaScript初学

这篇文章比较长，建议先收藏哦😯 戳这里拿原码👉 github.

创建一个4 x 4的面板（HTML5表实现），总共16个格子。其中一个格子是空的，其他格子从1到15随机编号。可通过单击格子将当前空格子旁边的任何图块移入当前空格子。将格子按顺序逐行排列即为胜利✌️。当用户点击了与空格子不相邻的格子时，用户会收到提醒。

稍微解释一下，从上面的Demo可以看到，只可以点击与空格子相邻的格子，然后空格子和被点击的格子（下面就叫target吧）会互换。如果点击了空格子，或者不与空格子相邻的格子，就会显示红色，表示点击无效。理解完毕后，开始想思路吧😄 😄 😄

首先，我们想一下这个游戏有什么组成呢？第一个想到的肯定是 – 16个格子！！！没错，我们肯定需要一个方法来创建格子。因为这里虽然是4x4， 可是如果需要10x10， 100x100呢，不可能手动创吧，那要到什么时候😕😕。于是我们确定了第一个方法，就叫createTable吧。接下来就开始玩了嘛~~也就是点击格子。那点击格子这个操作需要什么方法来支持呢？简单来说，点击格子就两种结果，要么换，要么不换。那这能不能换，就需要检测了 --> 看看target相邻有没有空格子。检测方法我们单独拿出来，就叫checkAdjacentCell吧。那检测完了，就需要有一个方法来控制怎么换，怎么才能把空格子和target互换呢，这就由clickHandler来实现吧。😃 到目前为止，我们已经能创造16个格子，然后都填上数字，开始愉快的玩耍了。那这个游戏就完成了吗？当然不是，除非你想一直玩下去😅 。没错，来到了我们最后一个方法，是不是把游戏玩通关了呢，就通过checkWin来实现了。到此，我们的前期头脑风暴就结束了。看到这里的你也已经非常明确了所需方法了吧⭐️⭐️⭐️，那我们就继续深入！ 戳这里拿原码👉 github.

这里就直接附上html的码，因为很短，就没什么好说的。