999合1超级简易文字菜单组件_cocos 文字游戏-CSDN博客

本文链接：https://blog.csdn.net/lsw_Cs/article/details/135517538

本文介绍了如何使用Cocos Creator 3.8.1和TypeScript实现一个超级简易的文字菜单组件。组件包含了菜单的展示、选择、跳转和自定义功能。通过监听键盘事件控制菜单选择，利用属性驱动实现选择效果。文章提供了代码实现和效果演示，适合游戏开发初学者参考学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

贪吃蛇掌机经典小游戏录屏

引言

超级简易文字菜单组件

大家好，相信大家都玩过那个999合1的游戏，特别是那个菜单。

在游戏开发中，往往会有形式各异的游戏菜单，游戏菜单和菜单一样主要是给玩家选择开始游戏、设置、排行榜等功能的。

本文将分享一下笔者在游戏开发中用到的超级简易文字菜单组件。

本文源工程可在文末阅读原文获取，小伙伴们自行前往。

1.需求分析

一般游戏菜单组件会包含以下的一些功能：

菜单的展示效果。
菜单的选择效果。
菜单的跳转效果。
菜单的自定义。

下面一起来实现超级简易文字菜单组件

2.超级简易文字菜单组件

1.环境

引擎版本：Cocos Creator 3.8.1

编程语言：TypeScript

2.资源准备

由于是非常简易的文字菜单，本次节目只需要简单的摆一下盘即可，不需要额外的资源。

UI布局。

添加Layout组件以及挂载我们的SuperEasyMenuImpl组件。

设置Label左对齐。

下面一起来写代码。

3.编写代码

首先我们创建一个SuperEasyMenu组件。它的组成如下：

初始化，在start方法中监听键盘事件，控制菜单的选择。

@ccclass('SuperEasyMenu')
export class SuperEasyMenu extends Component {
   

    private curMenu: MenuItem[] = [];
    private lastMenu: MenuItem[] = [];
    private menuLabels: Label[] = [];
    private curSelect: number;

    start() {
   
        this.menuLabels.push(...this.node.getComponentsInChildren(Label));

        input.on(Input.EventType.KEY_DOWN, event => {
   
            if (event.keyCode == KeyCode.ENTER || event.keyCode == KeyCode.SPACE) {
   
                this.selectMenu();
            }
            else if (event.keyCode == KeyCode.ARROW_UP || event.keyCode == KeyCode.KEY_W) {
   
                this.CurSelect = this.CurSelect - 1;
            }
            else if (event.keyCode == KeyCode.ARROW_DOWN || event.keyCode == KeyCode.KEY_S) {
   
                this.CurSelect = this.CurSelect +