宜宾网站建设公司

如何用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://ybzwz.com/article/dgppod.html

其他资讯