【cocos creator】键盘控制人物平滑八方位行走

摇杆封装：

https://download.csdn.net/download/K86338236/85912640

cc.Class({
    extends: cc.Component,

    properties: {
        player: {
            default: null,
            type: cc.Node,
            displayName: '控制角色',
        },
    },

    onLoad() {
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this);
        this.index = 0;
    },

    start() {

    },

    onKeyDown(event) {
        if (event.keyCode == cc.macro.KEY.left) {
            if (this.index == 0) this.index = 5;
            if (this.index == 3) this.index = 4;
            if (this.index == 7) this.index = 6;
        }
        else if (event.keyCode == cc.macro.KEY.right) {
            if (this.index == 0) this.index = 1;
            if (this.index == 3) this.index = 2;
            if (this.index == 7) this.index = 8;
        }
        else if (event.keyCode == cc.macro.KEY.up) {
            if (this.index == 0) this.index = 3;
            if (this.index == 1) this.index = 2;
            if (this.index == 5) this.index = 4;
        }
        else if (event.keyCode == cc.macro.KEY.down) {
            if (this.index == 0) this.index = 7;
            if (this.index == 1) this.index = 8;
            if (this.index == 5) this.index = 6;
        }
    },

    onKeyUp(event) {
        if (event.keyCode == cc.macro.KEY.left) {
            if (this.index == 4) { this.index = 3; return; }
            if (this.index == 6) { this.index = 7; return; }
            if (this.index != (1 || 2 || 3)) this.index = 0;
        }
        else if (event.keyCode == cc.macro.KEY.right) {
            if (this.index == 2) { this.index = 3; return; }
            if (this.index == 8) { this.index = 7; return }
            if (this.index != (5 || 4 || 6)) this.index = 0;
        }
        else if (event.keyCode == cc.macro.KEY.up) {
            if (this.index == 2) { this.index = 1; return; }
            if (this.index == 4) { this.index = 5; return; }
            if (this.index != (7 || 8 || 6)) this.index = 0;

        } else if (event.keyCode == cc.macro.KEY.down) {
            if (this.index == 8) { this.index = 1; return; }
            if (this.index == 6) { this.index = 5; return; }
            if (this.index != (3 || 2 || 1)) this.index = 0;
        }
    },
    update(dt) {
        if (this.index) {
            this.onMove(this.index, false);
        }
    },

    onMove(index, isFour) {
        var speed = 1;
        var speedxy = speed * Math.cos(45 * Math.PI / 180);
        //四方位行走
        if (isFour) {
            switch (index) {
                case 1:
                case 5:
                    this.player.x += speed;
                    break;
                case 2:
                    this.player.y += speed;
                    break;
                case 3: this.player.x -= speed;
                    break;
                case 4:
                    this.player.y -= speed;
                    break;
            }
            return;
        }
        //八分向行走
        switch (index) {
            case 1:
            case 9:
                this.player.x += speed;
                break;
            case 2:
                this.player.x += speedxy;
                this.player.y += speedxy;
                break;
            case 3: this.player.y += speed;
                break;
            case 4:
                this.player.x -= speedxy;
                this.player.y += speedxy;
                break;
            case 5: this.player.x -= speed;
                break;
            case 6:
                this.player.x -= speedxy;
                this.player.y -= speedxy;
                break;
            case 7: this.player.y -= speed;
                break;
            case 8:
                this.player.x += speedxy;
                this.player.y -= speedxy;
                break;
        }
    },

    onDestroy() {
        cc.systemEvent.off(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);
        cc.systemEvent.off(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this);
    },
});

摇杆八方位控制：

                //this.dir:摇杆角度
                var angle = this.dir % 360;
                var count = 8;//行走方位，4/8
                //计算角色移动象限
                var index = Math.round((angle + 360 / count) / (360 / count));
                //cc.log(angle, index);
                this.onMove(index, count == 4);