文盲的专栏

将 this.mode 的复制移动到 请选择游戏模式的提示后边，然后追加一个验证，如果是蜂巢拼图模式，则直接调用蜂巢游戏代码，否则继续正常按照方形游戏模式进行。不过我们之前的拖拽代码，是用 mouse 事件实现的，里面加了一个 puzzle.mode 的验证，不为零（原始拼图）时，不允许拖拽。4、如果覆盖的元素的 sn 与 拖拽对象的 sn 相同，则移除挖空的六边形 canvas 及 拖拽对象。3、需要挖空的六边形图块，根据可视图片尺寸进行计算，在预留四个边的最小尺寸下，进行最大的图块设置。

1、es6 的数组操作，要熟练掌握哦，map 用来给数组赋值，filter 用来筛选元素，forEach 用来对数组进行循环，当然经典的 js 数组方法也要复习一下哦，sort 用来排序，splice 删除元素等。思路就是，如果当前数组中对应的元素值为零，则删除该元素，例如第一行左移 0 0 0 1，最后会变成 1，那么记录到 trace 里的轨迹就是 [3,0]，意义就是，第三个元素移动到第一个元素。在每次游戏重新开始的时候，我们都需要重新清空数组中的所有数字，分数，以及界面中的样式。

之前，老顾在玩 python 的时候，写了一版的 py 版 2048，由于对 pygame 这个第三方库不了解，所以没有做成图形界面的。这次就从新一版 js 的，直接在页面进行游戏好了。

那么，在拼图里，我们之前使用的是多个图块，每个图块从新加载一遍图片，然后对图片进行位移的方式来制作拼图的图块的。这个办法有一个致命的问题，就是当图片较大，且切分数量较多的时候，会出现明显的卡顿，甚至延迟。好吧，应该按照图片实际尺寸来设置，毕竟不管你怎么缩放，对与 Image 对象来说，他加载的图片信息都没有变化，和刚才的 canvas 类似，内部的 width 不受外部显示大小的影响。canvas 里提供了一个 clip 方法，可以切割出各种不规则的图形，用这个办法，就可以对应于带有咬合齿的拼图块了。

具体实现就是，生成一个数组，表示每个色块的编号，然后打乱其顺序，然后按照打乱后的顺序，顺序添加到拼图区域，同步在提示区添加一个提示块，同时验证色块位置是否正确。嗯，这里用到了 puzzle.group 对象，mode_1 中，将这个对象重新初始化了，有两个属性，s 表示选中的色块，n 表示当前色块的顺序。那么，本文中，其实也没有多少新的内容需要总结了，更多的是，将我们已经学习过的内容，进行灵活的运用。这两个玩法，主要的内容，其实是数组的操作，然后根据数组，将其对应的图块的位置更新一下。

web小游戏开发：拼图（三）原始拼图玩法的实现原始拼图组合的实现判定是否可以组合实现组合判定实现组合移动小结原始拼图之前，我们在第一篇拼图的文章里已经介绍过了原始拼图的玩法，我们对原始拼图采用 puzzle8.com 的交互规则。其中，背景图（影子图）、缩略图（拼图样图）都好做，并不会费什么事。唯一的难点就在于相邻图块组合，组合后要同步移动。优快云 文盲老顾的博客，https://blog.youkuaiyun.com/superwfei老顾的个人社区，https://bbs.youkuaiyun.com/foru

加载预定义的网络图片就相对简单了，定义好一个列表，里面存上图片地址和图片名称，然后可以弹出层选择，或者下拉框选择即可。在加载网络图片的时候对 puzzle.img 的 src 进行修改，可以同样出发 onload 事件，所以，img.onload 的定义中，对图片尺寸修改的部分可以不用动，后续的处理和加载本地图片没什么区别的，不过是 url 数据，而不是 base64 数据罢了。

对于拼图游戏来说，整理有两种拼图块，一种就是方形的，一种是不规则的，带有咬合齿的。一般来说，线下手工拼图基本都是带咬合齿的了，但是我们先忽略这种方式的拼图，毕竟要做这个模式的话，需要做的工作有很多，比较麻烦。那么，我们就先做一版标准方形（长方形）的拼图好了，至于其他标准图形的，先不考虑了，比如六边形图块，菱形图块之类的。3、对原始拼图玩法，图块移动到正确位置附近时，自动移动到正确位置，而不像 puzzle8 似的，还需要对整体拼好的图块群进行移动。Hmmm还是有不少的，就先不讨论了。

终于全部搞完了，文后附完整代码哦

原生的 js 拖拽方式。

记得前边的初始发牌的规则么，right 区域的扑克，第一张被压在最下边了，我们要发扑克，需要从最上边开始，而不是压在最下边的，所以需要一次排序。哦，对了，说到这里，忘记补充一下，为了区别扑克显示花色数字与否，在样式里补充了一个 n，区别与 n数字，也就是具有样式 n 的，表示不显示花色和数字。排序后的结果，就是从最上边的扑克开始了，我们直接发放10张扑克，分别发到每个扑克堆叠区域即可，记得发完扑克之后，将第11张扑克打开，显示其花色数字。并且每叠的最后一张，是打开状态，显示花色数字，其他的不显示花色数字。

好久没玩了，而且 win10 居然不自带游戏了，伤心

因为我们对每个角色都有一个专有样式，我们可以对 click 事件进行监听，并获取 click 所点击的对象，来判定角色以及其所在位置，并计算是否可以移动，可以移动几个方向之类的。然后，由于每个角色，可能会有多个移动方向，所以，先判定可以移动的方向，然后由用户选择方向移动。记录步数之类的功能，可以自行完善了，胜利判定，可以在移动后，判定曹操是否到达了3,1的位置，如果达到了，就是胜利。之后，直到游戏完成之前，html 内容就不再修改了，之后的其他游戏，正常内容，也都会是这样，不再变动。目前 js 内容如下。

找素材真费劲，尤其是赵云，没有竖版战斗立绘，基本上全是帅就完事的立绘。

终于顶着懒癌发作的痛苦，把扫雷做完了。。。我想变成咸鱼。。。

基本实现了扫雷的大部分功能和界面模拟，剩下少少的几个未实现部分，下次在做

页面加载完毕时触发的事件：$(document).ready，这个是 jquery 的一个最常用的事件触发了，触发时，会执行你在 ready 方法里定义的 function ，也可以是现有的方法，在这里直接调用。老顾会习惯于写成 function 方式，这样里面会可以执行更多的内容，且可以进行一些预处理。

准备工作要先做好，游戏编写，离不开素材的准备。

磨刀不误砍柴工，先认识我们的应用环境：浏览器及其解析的内容dom

专栏开篇寄语