只用2小时，开发足球射门游戏

导读 | 世界杯即将闭幕，你是否还未过瘾？近期体育竞技类游戏层出叠见，本文特邀架构师以一款简单有趣的点球射门游戏为例，通过代码实现游戏主体界面的绘制实现基础的游戏场景，而后阐述各类常见逻辑的实现方法。想了解游戏场景内各种复杂操作逻辑怎么实现？游戏开发中是否所有场景都只能通过加载素材资源实现？读完本文，你能独立开发出下图游戏，并掌握一定游戏开发实操方法。

游戏界面实现思路&代码

1）界面术语定义

界面分为游戏区和计分区，其中游戏区又分为：观众区、球门区、游戏元素、射门区。

2）观众区绘制思路&代码

观众区用swing代码进行实现，绘制的思路如下：绘制背景矩形框；绘制次排观众——首先，绘制一个圆和椭圆合并成一个观众样式。然后，绘制一个小一点的圆和椭圆合并成一个观众样式。最后，组合并放置到第2排位置，并铺满整排；绘制首排观众【与上一步一致，注意换观众的颜色】——首先，绘制一个圆和椭圆合并成一个观众样式；然后，绘制一个小一点的圆和椭圆合并成一个观众样式；最后，组合并放置到第1排位置，并铺满整排；绘制两个不同颜色的矩形框，并摆放最前面遮挡第1排观众的“脚”；绘制几根黑线，遮挡广告边缘。

通过swing中的Graphics2D对象绘制第二排观众：

通过swing中的Graphics2D对象绘制第一排观众：

通过swing中的Graphics2D对象绘制广告栏和黑线：

3）草坪绘制思路&代码

草坪区用swing代码进行实现，绘制的思路如下：

绘制两种不同颜色的矩形；用两种不同颜色的矩形铺满整个屏幕；调整矩形的高度是从上下一次递增，呈现立体视觉。

动画呈现如下：

参考实现代码：

4）禁区三维绘制思路&代码

禁区用swing代码进行实现，绘制的思路如下：绘制一个空心的圆角矩形；使用变换技术让圆角矩形具有三维立体效果；调整禁区框的位置；用一个绿色矩形遮挡多余的禁区部分。

动画呈现如下：

通过swing中的Graphics2D对象绘制两个圆角矩形合并：

擦除中间不要的部分：

5）球门球网三维绘制思路&代码

球门与球网的绘制是最难的，卡点在于如何利用平面技术实现三维效果，绘制的思路如下：绘制一个圆角矩形，作为球门框；绘制两条弯折折线，作为球门内门柱；绘制多条水平的三线段折线，作为球门水平球门线；绘制多条垂直的二线段折线，作为球门垂直球门线。

定义对应的尺寸大小，绘制球网竖线：

实现球门内柱偏移：

通过swing中的Graphics2D对象绘制球网横线：

通过swing中的Graphics2D对象绘制门框：

6）射门区绘制思路&代码

射门区用swing代码进行实现，绘制的思路如下：绘制两种不同颜色的扇形；叠加两个扇形；配上文字。

参考实现代码：

7）计分区绘制思路&代码

计分区用swing代码进行实现，绘制的思路如下：绘制两种不同颜色的矩形；用两种不同颜色的矩形铺满整个屏幕；调整矩形的高度是从上下一次递增，呈现立体视觉。

参考实现代码：

8）守门员&球绘制思路&代码

守门员、球绘与石头这里涉及比较多复杂细节，利用图片代替代码绘制，实现的思路如下：加载图片；把图片摆放到对应位置。

编写通过图片导入实现绘制球的代码：

编写通过图片导入实现绘制守门员的代码：

编写通过图片导入实现绘制石头的代码：

如何实现游戏逻辑‍‍‍‍

整个游戏的实现逻辑，按照对象来分，包括：球对象逻辑（拖动鼠标：调整球射出的轨迹逻辑，支持上下左右的拖动调整；Ctrl+拖动鼠标：摆放球逻辑；点击球：球按照轨迹飞出运动的逻辑）、星星对象逻辑（球在飞行轨迹与星星重合则消除星星的逻辑）、守门员对象逻辑（在球门区左右来回移动的逻辑）、石头对象逻辑（禁止遮挡部分球门，球不能从此射进的逻辑）、球门对象逻辑（进球逻辑）、积分区对象逻辑（记时逻辑、进球积分逻辑）。下文我将详细阐述各个游戏逻辑实现思路。

‍

1）调整射门轨迹的逻辑实现

轨迹实现的思路如下：假设有两点，黄色点为足球的中心点，红色点是球门的中心点；在黄点和红点之间就存在一条红色线段；在红色线段上随机取N个点，用白色表示，这样就形成了一个直线的轨迹点。

接着再说一下拖动鼠标，轨迹跟着鼠标移动的实现思路：鼠标向上拖动，黄点和红点同步向上平移，这样线段上的轨迹点也同步平移；鼠标向下拖动，黄点和红点同步向下平移，这样线段上的轨迹点也同步平移；鼠标向右拖动，黄点和红点同步向右平移，这样线段上的轨迹点也同步平移；鼠标向左拖动，黄点和红点同步向左平移，这样线段上的轨迹点也同步平移。

注意，黄点和红点之间如果是曲线，效果更贴近自然，所以最后还需要把黄点和红点之间使用二次曲线进行实现。

记录起始点与终点：

根据起始点与终点以及二次曲线绘制轨迹线：

实现鼠标拖动的代码：

2）拖动球，摆放球的逻辑实现

拖动球可以摆放球的位置，相关实现思路是：拖动开始时（按下鼠标时）设置一个其实点，黄点；拖动过程中（按下鼠标，并同时移动位置）换点跟随鼠标点；拖动结束时（松开鼠标）球平移到最后的位置。

参考实现代码：

3）射门，球按照轨迹飞行实现

鼠标点击球，球就按照之前的轨迹点飞行。实现的思路如下：获取到从二次曲线上的随机轨迹点，如下图中的白色小圆；点击球是，开启一个线程

在线程中，把球平移到轨迹点的第一个点，并休眠100毫秒；100毫秒后，又把球平移到轨迹点的下一个点，再次休眠100毫秒。重复上一步动作，知道球平移到最后一个轨迹点。

参考实现代码：

4）消除轨迹点重合的星星逻辑实现

消除星星实际就是判断球的坐标点是否与星星重合，如果是则消除。具体实现思路如下：星星当作是一个正方形，有4个点；球也当作是一个正方形，有4个点；球在飞行过程中，每移动到一个轨迹点时检查星星和球的四个点是否有重合的区域；如果有重合的区域则消除星星——从游戏界面中删除星星。

参考实现代码：

5）守门员来回移动的逻辑实现

守门员在球门前左右移动、干扰射球的飞行过程的实现思路：开启一个线程；向右平移守门员位置+30像素，并判断是否超出了最右边球门边缘，如果是则设置向左移动，然后休眠100毫秒；向左平移守门员位置-30像素，并判断是否超出了最左边球门边缘，如果是则设置向右移动，然后休眠100毫秒。

参考实现代码：

6）石头的逻辑实现

石头仅一张图片，把其摆放到对应位置即可。其遮挡射门的逻辑，主要在球门逻辑中去判断。

参考代码：

7）进球逻辑实现

进球逻辑实际是一个对象边框重合检查的过程。其实现思路如下：球门、守门员、石头、球都有自己的边界，都是平行四边形；当前射出的球移动到轨迹最后一个点时，开始判断以上元素的边界是否重合，依此来判断是否进球；进球依据：球的四个点都在球门四个点内部；守住依据：球与守门员、石头有任意一个点的重合即为守住；出界依据：球任意一个点不在球门范围内，则为球出界。

监听球的移动事件，判断是否移动完成：

检查守门员与球的位置关系：

检查球与障碍物的位置关系：

8）记时逻辑实现

记时实现的思路如下：进入游戏时初始一个数字变量；开启一个线程，把数字变量增加1，然后休眠1秒；循环增加1、循环休眠1秒。

参考代码：

9）进球积分逻辑实现

在本游戏中积分的规则有以下两点：进球得1分；进球的同时，消除一颗星星得1分——举个例子，如下图所示，射门进球同时消除了一颗星星，则得2分。

相关实现逻辑思路如下：在球飞行过程中进来消除星星的数量；在进球时，把星星的数量当作分数累计。

在监听球移动的过程，判断其位置是否与星星重合：

根据是否进球一步确认星星的得分：