我想做三国志

努力学习做游戏的小白

手动摆放七巧板

游戏介绍

手动摆放七巧板的程序,可以拼成各种图案,也可以再添加一套七巧板一起拼。

操作方法:

  • 鼠标左键拖动图形;
  • 鼠标右键使七巧板顺时针旋转 45 度;
  • 按住左键时按空格可以让四边形轴对称翻转。

游戏截图

完整游戏源代码

完整的 VC 项目在 gitee 上:https://gitee.com/ProtagonistMan/tangram

编译环境

VisualStudio 2019,EasyX_20200902

文件描述

Point.h

用于存三角形和四边形的点的值,用整型限制很多,例如求一个点相对于一个圆心旋转一定角度后的位置,我的做法是用三角函数来求,就是半径长度乘以三角函数值得到 x,y 的坐标,最终结果一定是小数,如果这个值不保存下来,而是强转为整型,那么这个点的位置就不准确,下次旋转时得到的值也就不准确,还有,对于几何图形的中心点,它通常不会是一个能用整数表示的点,如果这个用于旋转的中心点无法精确地得到,那么旋转功能也就无从谈起,这个点的类都用 double 型来存可以省去很多麻烦。

Line.h

对于直线,三角形和四边形需要的直线都是有两个端点的直线,根据两点式 (y-y1)/(x-x1)=(y-y2)/(x-x2) 转化后得到 (y2-y1)x+(x1-x2)y+x2y1-x1y2=0,也就是一般式方程 Ax+By+C=0 中的 A、B、C 三个参数都能得到,根据点到直线的距离的方程 |Ax0+By0+C|/sqrt(A^2+B^2) 可以求点到直线的距离,联立 A1x+B1y+C1=0 和 A2x+B2y+C2=0 可以求得两直线交点,为 ( (B2C1-B1C2)/(A2B1-A1B2),(A1C2-A2C1)/(A2B1-A1B2) ),有了这些可以求四边形中心点,也就是对角线的交点。

也可以判断一个点是否在三角形内,判断方法为,让这个点 O 与三角形 ABC 三个点相连,OA 与 BC 交点记为 A_N 如果 A_N < OA 那么 O 点在三角形外,同理 B_N < OB 或 C_N < OC 那么点在三角形外,如果 A_N >= OA && B_N >= OB && C_N >= OC 则点 O 在三角形 ABC 内。对于四边形 ABCD,则判断点 O 是否在三角形 ABC 或三角形 ACD 内就能判断点是否在四边形 ABCD 内。这种判断方法需要求两直线交点的函数。具体判断时只要 A_N-OA > -0.5 就能通过。

Line 类中还有获取 Line 上点的函数,其原理为:

若 B 不为 0,y = -(A / B) x - C / B,设两端点为 p0,p1,for (int i = min(p0.x, p1.x); i < max(p0.x, p1.x); i++) 然后 push_back(Point(i, y)) 进去,

若 B = 0,x = -C / A,设两端点为 p0,p1,for(int i = min(p0.y, p1.y); i < max(p0.y, p1.y); i++) 然后 push_back(Point(-C / A, i)) 进去

需要注意,由于 EasyX 的每个像素点的位置都是整型,而直线两端点的值都是浮点型,我们可以把两端点的值先抽出来,得到能用整型表示的两端点的值,例如对于 A(12.5, 22.5)  B(22.5, 32.5),我们得到的两端点的值为 A'=(13, 23)  B'=(22, 32),可是这两个端点并不好求,通常只用求最左端的端点,这样做的好处是得到的每一个点都只用在 y 上进行四舍五入操作,得到的每一个点在 EasyX 上表示更精确,具体的函数实现可以看 getLinePoint 函数。

源.cpp

七巧板中只有两类图形,三角形和四边形,我让三角形 (Triangle) 和四边形 (Quadrangle) 继承自图形类 (Graph),然后用 Graph 来初始化每个图形,操作 Graph 类就可以了,不用分辨是哪一个图形。

这个程序需要两个功能:

1、判断点中的位置是否在某个图形内,这里我用链表 list 来存七个图形,只用遍历 list 中的图形,调用 Graph 中声明的,Triangle,Quadrangle 中重写的 ifInSide(Point num) 函数就能判断点是否在某个图形里面,用 list 的初衷是想设置吞噬触摸,就是没点中一个图形就把该图形放到链表的顶端,遍历时一旦首次点中就直接退出,只是 list 模板类里不包含这个内容,所以算是失策,重新写一个链表又有点麻烦,如果有闲工夫的话可以这么一改。

2、点中了某个图形并移动时让该图形区域变回原来的颜色,这里我走了不少弯路。首先给图形上色,最简单的方法是调用 floodfill 函数,但是原来的点就无法获得了,恕我水平有限无法十分灵活地用这个函数,所以我给图形上色的方法用了相当原始的遍历矩形区域的所有点,例如对于三角形 A、B、C 最左端为 min(min(A.x, B.x), C.x) ,最右端为 max(max(A.x, B.x), C.x),最顶端为 min(min(A.y, B.y), C.y) ,最底端为 max(max(A.y, B.y), C.y),从上到下从左到右遍历一遍,每个点都判断一下是否在三角形 ABC 内,在就涂色即 putpixel。但是不要想着用 getpixel 得到每一个点原先的颜色并存起来,因为一旦两个图形重叠在一起,底下那个先抽走,顶上那个还会留着底下那个的颜色,出现的效果就会很难看。至于用 cleardevice 来搞你是不知道有多闪,我是一秒钟贴 10 次图,cleardevice 一秒钟贴一次图都很闪了。最终我的解决办法是用一个三维数组 vector<KeyValue<COLORREF, int>> PUBLICORIGINAL[SIDELENGTH * 5][SIDELENGTH * 5]; 来存这一张图每一层的颜色。

SIDELIGHT 是边长,七巧板最大那个三角形斜边的长度,边长乘以五是七巧板每个图形里最长的线段的长度的和,这个值比 SIDELIGHT * 5 略小,所以我让图形窗口的大小为 SIDELIGHT * 5 × SIDELIGHT * 5。

最开始在 PUBLICORIGINAL 里存入窗口中每个点的颜色,然后给每个图形上色时,在对应的 PUBLICORIGINAL[y][x] 里插入该图形的颜色,移除该图形时就在相对应的点那里找到这个颜色,erase 掉,然后 putpixel(PUBLICORIGINAL[y][x].back())。这是我想出来最快的方法了,也许还有更好的方法,但我还不知道。这里用键值对来表示每一层的颜色,每个图形都有一个 ID,这个颜色是哪个图形的查一下 ID 就行了,不然要是两个图形颜色一样就会出一点问题。

添加评论