微信小游戏开发实战教程6-把图形放置到网格上

这是小蚂蚁教你做游戏公众号原创的第41篇。

本篇主要内容包括如何将拖拽的图形安放到网格的对应位置上。

如果你没有任何的游戏开发经验，欢迎阅读我的“人人都能做游戏”系列教程，它会手把手的教你做出自己的第一个小游戏。

在第四节中我们实现了图形的拖拽功能，拖拽的图形最终需要被放置在网格的对应位置上。

先说一下实现思路：

使用拖拽图形上的左下角的位置作为图形位置，与整个网格的位置进行比对。如果图形位置与当前单元格的位置匹配，则根据图形的数据从当前的单元格开始填充，直到填充完整个图形为止。

看不懂？没关系。接着往下我会一步一步的进行拆解和分析。

# 计算拖拽图形左下角的位置作为图形的比对位置

如图，是要拖拽的图形，由四个正方形组成的“田字”形，每个正方形的边长是60，两个正方形之间的间隔是2。左下方的红色圆点为我们将会计算的图形位置。假设当前图形的中点位置(即坐标轴的中心)为（x，y)，根据正方形的边长和间隔，可以计算出红色的点的位置是(x-31，y-31)。

在场景加入四个边长为60的正方形，将四个正方形同时选中，点击鼠标右键，选择“将