2小时开发《点球射门游戏》，动画演示思路（上），代码已开源

唠两句

最近被疫情关在家，时间多运动少，真的很无聊呀！也许是天意为之，居然来世界杯了，虽然这届世界杯很「冷」，但是多少还是为无聊的我们增加了一些无聊的趣事，比如勇哥在等世界杯开幕式的过程中，就无聊手写了一个Java版本的【点球射门游戏】，这几天把球瘾过了，今天有点时间，把这个游戏分享给大家，希望大家喜欢！（游戏也有音乐，gif放不了，有点小可惜）

1、请各位老铁收藏、点赞鼓励一波！

2、源码，在评论区扣6，我私服给你！

游戏有那些值得大家学习【重点】

球的瞄准轨迹线怎么实现【见下图1】？这个在QQ桌球、王者荣耀、愤怒的小鸟等游戏中都用到了！
怎么画三维立体的图片【见下图2】？
怎么实现动画【见下图3】？

图1

游戏界面实现思路&代码

界面术语定义

界面分为游戏区和计分区，其中游戏区又分为：

观众区

球门区

游戏元素

射门区

观众区绘制思路&代码

观众区用swing纯代码是可以绘制的，绘制的思路如下：

1、绘制一个背景矩形框

2、绘制第2排观众

绘制一个圆和椭圆合并成一个观众样式

绘制一个小一点的圆和椭圆合并成一个观众样式

组合并放置到第2排位置，并铺满整排

3、绘制第1排观众【与上一步一致，注意换观众的颜色】

绘制一个圆和椭圆合并成一个观众样式

绘制一个小一点的圆和椭圆合并成一个观众样式

组合并放置到第1排位置，并铺满整排

4、绘制两个不同颜色的矩形框，并摆放最前面遮挡第1排观众的‘脚’

5、绘制几根黑线，遮挡广告边缘

为方便大家理解，勇哥这次给大家上动画，赞一个吧：

参考实现代码：

// 观众背景
g2d.setColor(personBgColor);
g2d.fillRect(0,y,getWidth(),100);//画矩形
for (int i = 0; i < getWidth(); i+=46) {// 观众第二排g2d.setColor(person2);g2d.fillOval(i,36,16,16);//画圆g2d.fillArc(i-7,50,30,50,0,180);// 画扇行g2d.fillOval(i+24,40,13,13);g2d.fillArc(i+18,51,24,49,0,180);
}
y+=90;
// 观众第一排
g2d.fillRect(0,y-30,getWidth(),50);
g2d.setColor(person1);
for (int i = 0; i < getWidth(); i+=46) {g2d.fillOval(i+7,y-41,16,16);g2d.fillArc(i,y-25,30,50,0,180);g2d.fillOval(i+31,y-34,13,13);g2d.fillArc(i+25,y-24,24,49,0,180);
}
// 绘制广告栏和黑线
g2d.setColor(personBgColor1);
g2d.fillRect(0,y,getWidth(),20);
g2d.setColor(personLineColor);
g2d.fillRect(0,y,getWidth(),2);
y+=20;
g2d.setColor(personBgColor2);
g2d.fillRect(0,y,getWidth(),18);
y+=18;
g2d.setColor(personLineColor);
g2d.fillRect(0,y,getWidth(),2);
for (int i = 1; i < 5; i++) {g2d.fillRect(getWidth()*i/5,y-38,2,38);
}

草坪绘制思路&代码

草坪区用swing纯代码是可以绘制的，绘制的思路如下：

1、绘制两种不同颜色的矩形

2、用两种不用颜色的矩形铺满整个屏幕

3、调整矩形的高度是从上下一次递增，呈现立体视觉

上动画，赞一个吧：

参考实现代码：

// 足球草地
int count =0;
int h1=60;
for (int i = y; i < getHeight(); i++) {if(count%2==0){g2d.setColor(bgColor1);}else{g2d.setColor(bgColor2);}g2d.fillRect(0,y,getWidth(),h1+count*10);y+=h1+count*10;count++;
}

禁区三维绘制思路&代码

禁区用swing纯代码是可以绘制的，绘制的思路如下：

1、绘制一个空心的圆角矩形

2、使用变换技术，让圆角矩形具有三维立体效果

3、调整禁区框的位置

4、用一个绿色矩形遮挡多于的禁区部分

上动画，赞一个吧：

参考实现代码：

注意代码实现的时候，需要绘制两个圆角矩形合并，并擦除中间不要的部分，这部分有点难，如果不理解可以留言，我给你弄视频说明。

g2d.setColor(Color.WHITE);
g2d.fillRect(0,175,getWidth(),5);
AffineTransform oldTx = g2d.getTransform();
Stroke stroke = new BasicStroke(5);
g2d.setStroke(stroke);
AffineTransform tx = new AffineTransform();
tx.setToShear(-0.5, 0);
g2d.setTransform(tx);
g2d.drawRoundRect(getWidth()*5/20,175,getWidth()*6/10,120,10,10);
AffineTransform tx2= new AffineTransform();
tx2.setToShear(0.5, 0);
g2d.setTransform(tx2);
g2d.drawRoundRect(getWidth()*3/20,175,getWidth()*6/10,120,10,10);
g2d.setTransform(oldTx);
//清理内部多余的线
g2d.setColor(bgColor1);
g2d.fillRect(0,173,getWidth(),2);
g2d.fillRect(getWidth()*3/20+10,180,getWidth()*7/10-20,20);
g2d.fillRect(getWidth()*3/20+10,270,getWidth()*6/10-20,23);
g2d.setColor(bgColor2);
g2d.fillRect(getWidth()*3/20+10,200,getWidth()*6/10-20,70);

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

球门球网这个是最难的，难在用平面技术画三维效果，当然swing也是可以的，绘制的思路如下：

1、绘制一个圆角矩形，作为球门框

2、绘制两条弯折折线，作为球门内门柱

3、绘制多条水平的三线段折线，作为球门水平球门线

4、绘制多条垂直的二线段折线，作为球门垂直球门线

这个比较复杂，必须上动画，必须赞一个：

参考实现代码：

g2d.setColor(Color.WHITE);
int step = 15;
int startX = getWidth()*4/20+20;
int centerX = getWidth()/2;
int startY = 85;
// 球网竖线
for (int i = startX; i < (getWidth()*4/5); i=startX) {int x[] = {startX,startX+(startX<centerX?+8:-8),startX+(startX<centerX?+12:-12)};int y[] = {startY,startY+10,155};if((centerX-startX)!=-10) {g2d.drawPolyline(x, y, x.length);//画折线}startX+=step;
}
// 球迷柱左里
Stroke stroke = new BasicStroke(5);
g2d.setStroke(stroke);
startX = getWidth()*4/20+20;
int tempX[] = {startX-18,startX-2,startX-2};
int tempY[] = {startY+3,startY+10,153};
g2d.drawPolyline(tempX, tempY, tempY.length);
startX = getWidth()*4/5;
int rightX[] = {startX-2,startX-20,startX-24};
int rightY[] = {startY+3,startY+10,153};
g2d.drawPolyline(rightX, rightY, rightY.length);
stroke = new BasicStroke(1);
g2d.setStroke(stroke);
startX = getWidth()*4/20;
// 球网横线
int endX = getWidth()*4/5;
for (int i = startY; i < 156; i=startY) {int x[] = {startX,startX+(startX<centerX?+18:-18),endX-12,endX};int y[] = {startY,startY-3,startY-3,startY};g2d.drawPolyline(x,y,x.length);startY+=step;
}
int x[] = {startX,startX+(startX<centerX?+18:-18),endX-12,endX};
int y[] = {158,155,155,158};
g2d.drawPolyline(x,y,x.length);
// 绘制门框
g2d.setColor(doorColor);
stroke = new BasicStroke(9);
g2d.setStroke(stroke);
g2d.drawRoundRect(getWidth()*4/20,85,getWidth()*3/5,95,20,20);// 带有圆角的矩形
stroke = new BasicStroke(5);
g2d.setStroke(stroke);
g2d.setColor(Color.WHITE);
g2d.drawRoundRect(getWidth()*4/20,86,getWidth()*3/5,95,20,20);
g2d.fillRect(0,175,getWidth(),5);

蓄力区绘制思路&代码

蓄力区用swing纯代码是可以绘制的，绘制的思路如下：

1、绘制两种不同颜色的扇形

2、叠加两个扇形

3、配上高逼格文字

简单吧，也必上动画，也必须赞一个：

参考实现代码：

// 蓄力区
g2d.setColor(Color.WHITE);
g2d.fillArc((getWidth()-64)/2-80,460,224,160,0,180);
g2d.setColor(Color.ORANGE);
g2d.fillArc((getWidth()-64)/2-80,460,224,160,0,arc);
// 文字
Font font = new Font("阿里巴巴普惠体 Medium",1,24);
g2d.setFont(font);
g2d.setColor(Color.WHITE);
g2d.drawString("Ctrl + 鼠标： 移动球",30,400);
g2d.drawString("拖动鼠标： 调整角度",50,440);
g2d.drawString("点击鼠标： 射门",50,480);

计分区绘制思路&代码

计分区区用swing纯代码是可以绘制的，绘制的思路如下：

1、绘制两种不同颜色的矩形

2、用两种不用颜色的矩形铺满整个屏幕

3、调整矩形的高度是从上下一次递增，呈现立体视觉

上动画，赞一个吧：

参考实现代码：

Graphics2D g2d = (Graphics2D)g;
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING,RenderingHints.VALUE_ANTIALIAS_ON);
g.setColor(bgColor1);
g.fillRect(0,0,getWidth(),getHeight());
g.setColor(bgColor2);
g.fillRect(0,8,getWidth(),getHeight()-8);
Font font = new Font("阿里巴巴普惠体 Medium",1,32);
g.setFont(font);
g2d.setColor(Color.BLACK);
g2d.drawString("分数",30,45);
g2d.drawString("TIME",250,45);
g2d.drawString("次数",540,45);
g2d.setColor(textColor);
g2d.fillRoundRect(100,20,80,30,25,25);
g2d.fillRoundRect(335,20,120,30,25,25);
g2d.fillRoundRect(620,20,80,30,25,25);
g2d.setColor(Color.WHITE);
g2d.drawString(String.format("%02d",score),120,47);
g2d.drawString(String.format("%02d:%02d",time/60,time%60),345,47);
g2d.drawString(String.format("%02d",count),638,47);

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

守门员&球绘&石头这里就直接用图片了，绘制的思路如下：

1、加载图片

2、把图片摆放到对应位置

上动画，赞一个吧：

参考实现代码：

// 球
public class Ball extends JLabel{int startX = 0 ;int startY = 0;public Ball(){this.setPreferredSize(new Dimension(64,64));this.setIcon(new ImageIcon(ResourcesUtil.getRootPath()+"\\ball\\football.png"));// 加载图片}}

// 守门员
public Goalkeeper(BackgroundPanel backgroundPanel){this.backgroundPanel = backgroundPanel;this.setBounds(backgroundPanel.getWidth()/2,100,78,128);this.setPreferredSize(new Dimension(78,128));this.setIcon(new ImageIcon(ResourcesUtil.getRootPath()+"\\ball\\smy.png"));
}

// 石头
public class Shitou extends JLabel implements Obstacle {BackgroundPanel backgroundPanel;public Shitou(BackgroundPanel backgroundPanel){this.backgroundPanel = backgroundPanel;this.setBounds(backgroundPanel.getWidth()/2+50,100,316,100);//设置图片放置的位置this.setPreferredSize(new Dimension(316,100));this.setIcon(new ImageIcon(ResourcesUtil.getRootPath()+"\\ball\\st.png"));}@Overridepublic String name() {return "石头";}@Overridepublic JComponent getComponent() {return this;}public void start(){}public void stop(){}}

2小时开发《点球射门游戏》，动画演示思路（上），代码已开源相关推荐

【三子棋小游戏的设计思路以及代码实现】
目录一,设计思路二, 代码实现首先,欢迎各位点进我的文章.话不多说,正如标题一样,接下来,我来给大家讲解三子棋小游戏的设计思路以及代码实现. 一,设计思路一. 大家应该都 ...
微信小程序云开发 · 从0搭建商业级校园跑腿平台（已开源）
微信小程序云开发 · 从零搭建商业级校园跑腿平台小秃僧新生代农民工,一枚准毕业的大四学生,热爱前端开发,做个有态度.有思想.有价值的公众号. 好久不更新了,再更新已是打工人! 我将分享用云开发 ...
C语言实现三子棋小游戏（编程思路以及代码详解）
目录前言一.三子棋游戏的实现逻辑二.创建菜单并控制游戏开始或游戏结束三.创建棋盘并且初始化棋盘四.打印棋盘并验证打印棋盘和初始化棋盘模块的实现五.玩家下棋六.电脑下棋六.输赢判断七. ...
【云开发】上课 · 开会签到微信小程序（已开源），避免纸质化签到（毕业设计、上线使用、学习使用、二次开发都可以）
云开发技术开发的上课开会签到小程序的源码(已开源). 源码有超级详细的代码注释,很容易看懂这个签到小程序可以用于毕业设计.学习使用.二次开发.上线使用等等,都可以! 源码下载地址(复制链接去浏览器下 ...
python 下棋_Python开发象棋小游戏（总体思路分析）
先来个温馨提示:不会象棋,或者不是很懂象棋规则的朋友,可以先去下载个象棋小游戏,了解一下规则,毕竟后面这些规则都是我们写的啦,但也不能乱写呀,嘎嘎嘎~~~ 切入正题,在开始之前呢,我们要先缕清思路,下 ...
java 开发设计小游戏英雄怪物武器关键代码
String name;int sheng;public void show(){System.out.println("英雄类\n我是英雄,我的基本信息如下:\n姓名:"+nam ...
程序员用12小时复刻《羊了个羊》，代码已开源！
[CSDN 编者按]过去一周,不少人被<羊了个羊>这款游戏虐的不轻,有多少个"再玩一把"的念头,就有多少次被打入深渊的凄凉,甚至还有人评价道:"什么事都可以过 ...
5小时复刻《羊了个羊》，Java代码已开源，还有108套皮肤
简介羊了个羊游戏爆火,就是太难玩了,我玩了几十次,玩不过去,很纠结,作为技术人员的我,忍不了,就抽了5个小时用Java实现了一个桌面版本,效果如下: 测试现场羊了个羊开发现场实现思路+代码实现 ...
ipad iphone开发_如何在iPhone或iPad上恢复已删除的照片
ipad iphone开发 Losing a good photo can be pretty traumatic, and accidentally deleting photos is easie ...

2小时开发《点球射门游戏》，动画演示思路（上），代码已开源

唠两句

1、请各位老铁收藏、点赞鼓励一波！

2、源码，在评论区扣6，我私服给你！

游戏有那些值得大家学习【重点】

游戏界面实现思路&代码

界面术语定义

观众区绘制思路&代码

草坪绘制思路&代码

禁区三维绘制思路&代码

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

蓄力区绘制思路&代码

计分区绘制思路&代码

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

2小时开发《点球射门游戏》，动画演示思路（上），代码已开源相关推荐

最新文章

热门文章