摘星星之角色的水平移动

 

Cocos Creator 中的键盘控制与边界检测：实现角色的水平移动

在游戏开发中，角色的移动控制和边界检测是常见的需求。本文将通过一个具体的代码示例，解析如何在 Cocos Creator 中实现基于键盘输入的角色水平移动，并防止角色越过屏幕边界。

代码解析

以下代码实现了一个简单的角色水平移动逻辑，包括加速度、最大速度限制以及边界检测。

TypeScript复制

cc.Class({
    extends: cc.Component,

    properties: {
        // 最大移动速度
        @property(cc.Integer)
        maxMoveSpeed: 0,
        // 加速度
        @property(cc.Integer)
        accel: 0,
    },

    private xSpeed: number = 0; // 当前水平速度
    private accLeft: boolean = false; // 是否向左加速
    private accRight: boolean = false; // 是否向右加速
    private halfScreenWidth: number = 0; // 屏幕宽度的一半

    onLoad() {
        // 初始化屏幕宽度的一半
        this.halfScreenWidth = this.node.parent.width / 2;

        // 初始化加速度方向开关和水平速度
        this.accLeft = false;
        this.accRight = false;
        this.xSpeed = 0;

        // 注册键盘事件监听器
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this);
    },

    onDestroy() {
        // 取消键盘事件监听器
        cc.systemEvent.off(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);
        cc.systemEvent.off(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this);
    },

    onKeyDown(event) {
        // 使用 switch 判断按键值
        switch (event.keyCode) {
            case cc.macro.KEY.a: // 按下 A 键
                this.accLeft = true;
                break;
            case cc.macro.KEY.d: // 按下 D 键
                this.accRight = true;
                break;
            default:
                console.log("Other key is pressed: " + event.keyCode);
                break;
        }
    },

    onKeyUp(event) {
        // 使用 switch 判断按键值
        switch (event.keyCode) {
            case cc.macro.KEY.a: // 抬起 A 键
                this.accLeft = false;
                this.xSpeed = 0;
                break;
            case cc.macro.KEY.d: // 抬起 D 键
                this.accRight = false;
                this.xSpeed = 0;
                break;
            default:
                console.log("Other key is released: " + event.keyCode);
                break;
        }
    },

    update(dt) {
        // 根据当前运动方向，用加速度每帧更新速度
        if (this.accLeft) {
            this.xSpeed -= this.accel * dt;
        } else if (this.accRight) {
            this.xSpeed += this.accel * dt;
        }

        // 限制角色的最大速度
        if (Math.abs(this.xSpeed) > this.maxMoveSpeed) {
            this.xSpeed = this.maxMoveSpeed * this.xSpeed / Math.abs(this.xSpeed);
        }

        // 更新角色的位置
        this.node.x += this.xSpeed * dt;

        // 防止角色越过边界
        const halfNodeWidth = this.node.width / 2;
        if (this.node.x > this.halfScreenWidth - halfNodeWidth) {
            this.node.x = this.halfScreenWidth - halfNodeWidth;
        }
        if (this.node.x < -this.halfScreenWidth + halfNodeWidth) {
            this.node.x = -this.halfScreenWidth + halfNodeWidth;
        }
    }
});

 

代码功能解析

1. 属性定义

• maxMoveSpeed：角色的最大水平移动速度。
• accel：角色的加速度。
• xSpeed：角色当前的水平速度。
• accLeft 和 accRight：布尔值，表示角色是否正在向左或向右加速。
• halfScreenWidth：屏幕宽度的一半，用于边界检测。

2. 键盘事件监听

• onKeyDown：当按下键盘时触发。根据按键值设置 accLeft 或 accRight。
• onKeyUp：当释放键盘时触发。重置 accLeft 或 accRight，并停止角色的水平移动。

3. 速度更新

在 update 方法中：

• 根据 accLeft 和 accRight 的状态，每帧更新角色的水平速度。
• 使用 Math.abs 检查当前速度是否超过最大速度限制，并进行限制。

4. 位置更新

• 根据当前水平速度更新角色的位置。
• 使用边界检测防止角色越过屏幕边界。

关键点解析

1. 加速度与时间缩放

this.xSpeed -= this.accel * dt;

• accel：加速度（单位：像素/秒²）。
• dt：当前帧的时间间隔（单位：秒）。
• accel * dt：当前帧的速度变化量（单位：像素/秒）。
• 通过 dt 确保角色的移动速度与帧率无关，从而实现平滑的动画效果。

2. 速度限制

if (Math.abs(this.xSpeed) > this.maxMoveSpeed) {
    this.xSpeed = this.maxMoveSpeed * this.xSpeed / Math.abs(this.xSpeed);
}

• 确保角色的速度不会超过最大限制。
• 使用 Math.abs 获取速度的绝对值，并根据当前方向调整速度。

3. 边界检测

if (this.node.x > this.halfScreenWidth - halfNodeWidth) {
    this.node.x = this.halfScreenWidth - halfNodeWidth;
}
if (this.node.x < -this.halfScreenWidth + halfNodeWidth) {
    this.node.x = -this.halfScreenWidth + halfNodeWidth;
}

• 防止角色越过屏幕边界。
• 使用 halfScreenWidth 和 halfNodeWidth 计算边界位置。

总结

通过上述代码，我们实现了一个基于键盘输入的角色水平移动逻辑，并通过边界检测防止角色越过屏幕边界。这种实现方式简单且高效，适用于大多数 2D 游戏场景。

希望这篇博客能帮助你更好地理解如何在 Cocos Creator 中实现角色的移动控制和边界检测。如果你有任何问题或需要进一步的扩展，请随时留言讨论！

---

希望这篇博客对你有帮助！如果有任何需要调整的地方，请告诉我。