鸿蒙分布式1024一起玩专注游戏
想了解更多内容，鸿蒙请访问：
和华为官方合作共建的分布鸿蒙技术社区
https://harmonyos.51cto.com
一, 前言
1024一起专注游戏是在屏幕上画上N x N个方格(如4x4共16个)，格子内任意填写上从1开始顺序生成的式起数字(如1 ~ 16共16个数字)。游戏时，玩专要求玩家用手指按从小到大(如1 ~ 16)的注游顺序依次指出其位置，按完所有数字后，鸿蒙显示所用的分布时间(秒)。所用时间越短，式起注意力水平越高。玩专能够培养注意力集中、注游分配、鸿蒙控制能力;拓展视幅;加快视频;提高视觉的分布稳定性、辨别人、式起定向搜索能力。玩专此游戏为最简单，注游最有效也是最科学的注意力训练方法。寻找目标数字时，香港云服务器注意力是需要极度集中的，把这短暂的高强度的集中精力过程反复练习，大脑的集中注意力功能就会不断的加固，提高。注意水平越来越高。
同时，1024一起专注游戏使用了鸿蒙分布式协同技术，在训练小孩子专注力和耐力时，大人也可以一起陪伴训练，只要两台鸿蒙系统手机或一台手机一台平板，大人，小孩就可以同时一起在玩一个游戏，比如大人在其中一台手机上按了一部份小数字，然后点击分布式协同图标，拉起另一台手机的1024一起专注游戏，小孩可以接着按大人没有按完的数字，服务器托管最终显示出所用的时间。
二, 实现效果
开发工具环境下视频：https://www.bilibili.com/video/BV1B34y1m7M5?spm_id_from=333.999.0.0
手机+手机环境下视频：https://www.bilibili.com/video/BV1kh411b7QM?spm_id_from=333.999.0.0
手机+平板环境下视频：https://www.bilibili.com/video/BV1ov411M7sq?spm_id_from=333.999.0.0
三, 创建工程
在这当作你已经安装好最新版本DevEco-Studio开发工具, 点击File -> New -> New Project… 弹出Create HarmonyOS Project窗口, 这里我选择空白Java模板创建, 上一个视频播放实例是用JS写的界面，这个游戏界面就用Java来写，还是JS写界面快，调试也快些.
四, 主界面开发
在展示源代码之前，先介绍一下使用到了JAVA哪些组件：
DirectionalLayout, TableLayout, DependentLayout, Button, Image, Text, ListContainer, CommonDialog，通过查看Java UI参考文档，就可以做出你喜欢的应用了。
先介绍公共类Java代码，有了这些公共类，以后做类似功能的应用，可以直接复制公共类文件可以使用：
LogUtil 日志打印类：
public class LogUtil { private static final HiLogLabel LABEL_LOG = new HiLogLabel(3, 0xD000F00, "1024Game"); private static final String LOG_FORMAT = "%{ public}s: %{ public}s"; private LogUtil() { } public static void debug(String className, String msg) { HiLog.debug(LABEL_LOG, LOG_FORMAT, className, msg); } public static void info(String className, String msg) { HiLog.info(LABEL_LOG, LOG_FORMAT, className, msg); } public static void info(Class<?> classType, final String format, Object... args) { String buffMsg = String.format(Locale.ROOT, format, args); HiLog.info(LABEL_LOG, LOG_FORMAT, classType == null ? "null" : classType.getSimpleName(), buffMsg); } public static void error(String tag, String msg) { HiLog.error(LABEL_LOG, LOG_FORMAT, tag, msg); } }SelectDeviceDialog设备选择对话框：
public class SelectDeviceDialog { private static final int DIALOG_WIDTH = 840; private static final int DIALOG_HEIGHT = 900; private CommonDialog commonDialog; public SelectDeviceDialog(Context context, List<DeviceInfo> devices, SelectResultListener listener) { initView(context, devices, listener); } private void initView(Context context, List<DeviceInfo> devices, SelectResultListener listener) { // 创建一个公共对话框 commonDialog = new CommonDialog(context); // 设置对齐方式居中 commonDialog.setAlignment(LayoutAlignment.CENTER); // 设置对话框尺寸 commonDialog.setSize(DIALOG_WIDTH, DIALOG_HEIGHT); // 设置对话框自动关闭 commonDialog.setAutoClosable(true); // 加载XML布局文件 Component dialogLayout = LayoutScatter.getInstance(context).parse(ResourceTable.Layout_dialog_select_device, null, false); // 设置对话框内容 commonDialog.setContentCustomComponent(dialogLayout); // 查找到列表容器 if (dialogLayout.findComponentById(ResourceTable.Id_list_devices) instanceof ListContainer) { // 获取列表容器对象 ListContainer devicesListContainer = (ListContainer) dialogLayout.findComponentById(ResourceTable.Id_list_devices); // 设备列表适配器 DevicesListAdapter devicesListAdapter = new DevicesListAdapter(devices, context); // 设置设备列表容器项提供者 devicesListContainer.setItemProvider(devicesListAdapter); // 设置设备列表项单击事件 devicesListContainer.setItemClickedListener((listContainer, component, position, id) -> { // 回调选择的设备信息 listener.callBack(devices.get(position)); // 关闭对话框 commonDialog.hide(); }); } dialogLayout.findComponentById(ResourceTable.Id_cancel).setClickedListener(component -> { // 关闭对话框 commonDialog.hide(); }); } // 显示对话框 public void show() { commonDialog.show(); } /** * 内部接口, 选择设备后回调事件 */ public interface SelectResultListener { void callBack(DeviceInfo deviceInfo); } }DevicesListAdapter设备列表适配器：
public class DevicesListAdapter extends BaseItemProvider { // 开始下标从0开始 private static final int SUBSTRING_START = 0; // 结束下标为4 private static final int SUBSTRING_END = 4; // 设备信息列表 private List<DeviceInfo> deviceInfoList; // 当前上下文 private Context context; // 带参构造方法 public DevicesListAdapter(List<DeviceInfo> deviceInfoList, Context context) { this.deviceInfoList = deviceInfoList; this.context = context; } @Override public int getCount() { return deviceInfoList == null ? 0 : deviceInfoList.size(); } @Override public Object getItem(int i) { return Optional.of(deviceInfoList.get(i)); } @Override public long getItemId(int i) { return i; } @Override public Component getComponent(int i, Component component, ComponentContainer componentContainer) { // 定义设备视图内部类 ViewHolder viewHolder = null; // 定义组件 Component mComponent = component; // 组件为空时 if (mComponent == null) { // 查找设备列表项布局XML mComponent = LayoutScatter.getInstance(context).parse(ResourceTable.Layout_item_device_list, null, false); // 初始化设备视图类 viewHolder = new ViewHolder(); // 判断组件布局里是否包含设备名称文本组件 if (mComponent.findComponentById(ResourceTable.Id_device_name) instanceof Text) { // 获取设备列表项布局XML的设备名称文件组件,并赋值给内部类设备视图设备名称属性缓存 viewHolder.devicesName = (Text) mComponent.findComponentById(ResourceTable.Id_device_name); } // 判断组件布局里是否包含设备Id文本组件 if (mComponent.findComponentById(ResourceTable.Id_device_id) instanceof Text) { // 获取设备列表项布局XML的设备Id文件组件,并赋值给内部类设备视图设备Id属性缓存 viewHolder.devicesId = (Text) mComponent.findComponentById(ResourceTable.Id_device_id); } mComponent.setTag(viewHolder); } else { // 如果组件不为空, 并且标签包含内部类设备视图 if (mComponent.getTag() instanceof ViewHolder) { // 从组件标签获取出设备视图 viewHolder = (ViewHolder) mComponent.getTag(); } } // 设备视图不为空时 if (viewHolder != null) { // 设置设备名称内容 viewHolder.devicesName.setText(deviceInfoList.get(i).getDeviceName()); String deviceId = deviceInfoList.get(i).getDeviceId(); deviceId = deviceId.substring(SUBSTRING_START, SUBSTRING_END) + "