使用M5Stack Core2设计一款射击游戏

现在，我们开始吧。

我喜欢玩游戏，一直想自己动手制作一个。有一天，学校布置了一项任务，要求我们用M5Stack Core2来搭建一个东西。我觉得这正是用它来制作游戏的绝佳机会。

我觉得仅仅开发一个能在M5Stack Core2上运行的程序太过普通，于是决定将M5Stack Core2变成一个蓝牙鼠标，并创建一款基于网页的游戏，用它作为控制器。

概述

M5Stack Core2 通过蓝牙连接到电脑，可作为鼠标使用。

触摸屏幕执行左键点击，摇动设备执行右键点击。

当显示屏一侧朝向电脑，USB接口朝下时，将设备向上、向下、向左或向右移动，鼠标光标会相应地朝该方向移动。

M5Stack Core2 的代码使用 PlatformIO 在 VS Code 中编写。

这是一款可以使用鼠标光标操作的射击游戏。目标是用枪射击靶子，所以我把这款游戏叫做“枪战游戏”。

玩家可以使用鼠标左键发射枪支，右键进行装填。子弹最大数量为8，每次重新装填都会增加2发子弹。当子弹数量为0时，玩家无法射击目标。

•游戏开始时，玩家点击屏幕左键。时间限制为60秒。

•游戏结束后，会显示一个重启提示。在提示出现后，玩家通过左键点击屏幕即可重新开始游戏。

有两种类型的靶子：黑色靶子和黄色靶子。

黑色靶子得5分，黄色靶子得10分。

如果目标未被击中就离开屏幕，分数将减少5分。

为了营造更真实的射击体验，鼠标光标图像已改为十字线样式。

当玩家点击鼠标左键时，光标图像会变为类似爆炸的图像。

如果子弹数量为0，则光标图像不会改变。

鼠标

在 VS Code 中打开扩展视图，安装 PlatformIO。创建一个新项目，在开始编写代码之前，安装所需的库。

搜索 ESP32 BLE 鼠标库并将其添加到项目中。一切准备就绪后，即可开始编写代码。

首先，包含所需的库文件。由于我还希望设备能振动，因此也需包含 AXP192.h。

创建必要的对象。

BleMouse 对象存储了蓝牙设备名称、制造商名称和电池电量。

接下来，定义全局变量。

由于我希望鼠标光标能根据设备倾斜的方向移动，因此我读取了陀螺仪的数值。

在我的环境中，即使设备没有移动，光标有时也会轻微移动，因此我也创建了用于校准的变量。

我还希望用户可以通过旋转设备来执行右键操作，因此我创建了一个变量来判断当前是否允许右键。

对于鼠标左键点击，我希望支持按住并拖动，因此我还创建了一个变量来记录屏幕当前是否被触摸。

现在，编写 setup() 函数。

初始化设备后，启动 bleMouse 对象。

为确认程序运行正常，屏幕上应显示一些文本。

接下来，编写 loop() 函数。

使用 if 语句检查蓝牙连接是否处于活动状态。如果未连接，则返回循环的开头。

创建局部变量来存储鼠标移动的值。

读取陀螺仪数值并将其存储到变量中。

数值会被反转，以匹配设备的使用方向。

在从倒置读数中减去校准值后，乘以一个常数来调整鼠标灵敏度。

现在，实现鼠标左键和右键功能。

首先，执行左键点击。

检查触摸屏是否被触碰。

如果是，请按左键，使振动电机运行100毫秒，并将跟踪触摸状态的变量设为真。

如果屏幕未被触摸，请释放鼠标左键，并将触控状态变量设为 false。

接下来，执行右键操作。

绕Z轴快速旋转将触发右键点击。

使用 abs() 使操作在设备顺时针或逆时针旋转时都能正常工作。

为确保每次旋转仅生成一次右键点击，请在点击后立即将右键标志设为 false。

旋转停止后，将标志重新设置为 true，以便可以再次执行右键点击。

最后，添加一个20毫秒的延迟函数。

这样，蓝牙鼠标程序就完成了。

游戏

准备 HTML、CSS 和 JavaScript 文件。

在HTML文件中，将鼠标光标设置、页面布局和JavaScript文件引用写入该元素内。

游戏运行在元素上。

在元素中添加代码以加载CSS文件。

接下来，编写CSS文件。

由于我想在这个网站上用十字光标图像替换普通的鼠标指针，因此需要编写相应的CSS。

隐藏默认的鼠标光标。

替换的光标图像通过HTML文件中编写的代码显示。

设置光标详细参数。

防止光标图像接收鼠标事件，并确保其始终显示在所有其他元素的上方。

然后配置其大小和其他属性。

现在，编写JavaScript文件。

JavaScript 文件包含游戏逻辑以及部分自定义光标行为。

首先，定义全局变量。

设置画布大小、2D渲染上下文以及其他初始化代码。

准备游戏中使用的变量。

为游戏计时器、游戏状态、得分、子弹数量创建变量，并定义它们的初始值常量。

准备游戏中使用的靶图。

实现光标行为。

将光标图像移动到与鼠标移动相同的位置。

当按下鼠标左键时，将光标图像从十字线变为爆炸图像。

当左键松开时，将光标恢复为原始的十字线图像。

实现定时器。

游戏进行时，请减少剩余时间。

当剩余时间达到零时，更改游戏状态并结束游戏。

在允许玩家重新开始游戏之前，请先设置一个计时器。

一旦 rGame_t 达到零，就可以重新启动。

接下来，实施目标系统。

将所有目标存储在一个数组中。

我想让目标数量适合作为M5Stack Core2鼠标进行游戏，所以我选择了三个目标。

创建一个目标对象，用于存储每个目标的信息。

最初设置为0的值将由另一个函数稍后赋值。

将每个目标对象插入到数组中。

目标图像加载完成后，调用启动游戏的函数。

现在，将初始化为0的字段赋值。

让目标从屏幕的左右两侧随机生成并出现。

然后随机调整它们的垂直位置。

某些目标应获得更多分数，因此随机决定一个目标是否也是高分目标。

将随机生成的值存储到目标对象中。

设置每个目标的移动速度。

最小速度为3，然后加上0到2之间的随机值。

执行目标移动。

将从左侧出现的目标向右移动，将从右侧出现的目标向左移动，根据它们的移动速度进行调整。

当目标离开屏幕时，重新定位并从分数中扣除积分。

分数更新功能将稍后实施。

现在，实现主游戏逻辑。

编写主游戏循环。

游戏运行期间，请更新目标。

然后重新绘制屏幕，最后再次调用此函数。

实现游戏初始化函数。

初始化分数、剩余时间、子弹数量和目标位置。

初始化完成后，更改游戏状态并开始游戏。

实现屏幕渲染。

首先，清空画布。

如果游戏正在运行，请绘制所有目标。

如果游戏结束，请以红色文字显示“游戏结束”。

一旦可重新启动，就显示重启提示信息。

在屏幕顶部显示文本。

按顺序显示时间、比分和罚球。

实现分数更新功能。

如果参数为1，则加上正常分数。

如果参数为2，目标是高分目标，因此加上正常分数的两倍。

如果参数为0，则从分数中减去积分。

最后，实现鼠标事件处理程序。

首先，编写左键单击处理程序。

获取画布的位置，然后计算鼠标在画布内的位置。

实现游戏内的点击处理。

使用 for 循环逐个检查每个目标，以确定是否已被点击。

如果子弹数量为0，则即使玩家成功点击目标，也不得分。

当目标被击中时，将增加分数并重新定位目标。

每当玩家在游戏过程中点击鼠标左键时，子弹数量就会减少。

如果游戏未运行，请先初始化游戏。

接下来，实现右键单击处理程序。

防止浏览器的默认上下文菜单显示。

游戏运行时，每次玩家右键点击，子弹数量就增加2。

确保子弹数量永远不会超过 BULLET_MAX。

成品

我在游戏区域周围添加了树木，并将背景改为地面与天空的组合，以增强环境的沉浸感。

虽然控制不如普通鼠标精确，但这带来了额外的挑战，也让游戏更加有趣。

本文编译自hackster.io