189 8069 5689

如何用Flutter做桌上弹球-创新互联

这篇文章主要讲解了如何用Flutter做桌上弹球,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。

网站制作、建网站找专业网站制作公司创新互联建站:定制网站、模板网站、仿站、微信小程序开发、软件开发、重庆APP开发公司等。做网站价格咨询创新互联建站:服务完善、10年建站、值得信赖!网站制作电话:028-86922220

首先看一下我们要实现的效果:

如何用Flutter做桌上弹球

结合动图演示,列出最终目标如下:

  • 在程序运行后,显示一个小球;
  • 每次程序启动后,小球的样式均发生随机性变化,体现在大小、颜色和位置三点;
  • 小球运行的规律参考桌球或三维弹球游戏;
  • 单击屏幕,小球变色;
  • 双击屏幕,小球暂停/恢复运动;
  • 长按屏幕,小球开始/停止自动变色。

运用的主要技术点:Canvas和CustomPaint API。

运行平台:Android、iOS

源码地址:
Github Gitee

功能拆解

首先拆解前文中所列出的6个实现目标,显而易见,要实现它们,我们需要:

  1. 随机颜色生成器;
  2. 随机位置生成器;
  3. 随机尺寸生成器;
  4. 小球绘制逻辑;
  5. 小球运动逻辑:

边界判定;
初始运动方向生成器;
定向移动位置更新器。

  1. 用户手势监听器。

功能实现

接下来,我们逐步实现功能拆解中所列举的6个具体功能。

随机颜色生成器

随机颜色生成器在程序启动、单击屏幕和自动变色中使用。在Flutter中,我们可以通过Color类对红、绿、蓝和透明度分别定义,来定义某个唯一的颜色,数值范围是0-255。对于透明度,0表示完全透明,255表示完全不透明。
对于随机数值,我们使用Random类生成0-255之间的随机整数。
随机颜色生成器则主要使用上述两个类来实现,具体代码片段如下:

Color _color = Color.fromARGB(0, 0, 0, 0);

// 改变小球颜色
void changeColor() {
	_color = Color.fromARGB(255, Random().nextInt(255), Random().nextInt(255),Random().nextInt(255));
}

文章名称:如何用Flutter做桌上弹球-创新互联
网站链接:http://jkwzsj.com/article/dgppod.html

其他资讯