CocosCreator项目学习系列<二>关于Button(添加事件)输入控制交互条件的触发_实现虚拟按钮控制_JavaScript

CocosCreator项目学习系列<二>关于Button(添加事件)输入控制交互条件的触发_实现虚拟按钮控制_JavaScript<10/12/2017>

<一>.先看实现效果:

此处为补充版本效果,输入控制滑动触发效果:<25/12/2017>额外补充

<二>.界面搭建:(就一个player脚本绑在player身上,下面那些都是按钮的普通和高亮图标)

<三>.上脚本代码:(另外一个脚本忽略,暂时还用不到)

注意点:self=this;(.js语法相关)

关注添加Button事件的API方法

cc.Class({
    extends: cc.Component,

    properties: {
        jumpRepeat: false,
        speed: cc.v2(0, 0),
        maxSpeed: cc.v2(0, 0),
        acce: 0,
        direction: 0,
        jumpSpeed: 0,
        gravity: 0,
        groundY: 0,
        shoeNode: cc.Node,
        shotting: false,
        move_left_btn: {
            default: null,
            type: cc.Button
        },
        btn_left_light: {
            default: null,
            type: cc.Node
        },
        move_right_btn: {
            default: null,
            type: cc.Button
        },
        btn_right_light: {
            default: null,
            type: cc.Node
        },
        move_jump_btn: {
            default: null,
            type: cc.Button
        },
        btn_jump_light: {
            default: null,
            type: cc.Node
        },
        btn_shot_btn: {
            default: null,
            type: cc.Button
        },
        btn_shot_light: {
            default: null,
            type: cc.Node
        },
    },

    onLoad: function () {
        var self = this;
        this.groundY = this.node.y;
        this.jumping = false;
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this);
        self.move_left_btn.node.on(cc.Node.EventType.TOUCH_START, function (event) { //按住向左键
            if (self.direction == 0) {
                self.direction = -1;
                console.log(this.direction);
                self.btn_left_light.active = true;
            }
        });
        self.move_left_btn.node.on(cc.Node.EventType.TOUCH_END, function (event) { //向左键松开
            self.direction = 0;
            self.btn_left_light.active = false;
        });
        self.move_left_btn.node.on(cc.Node.EventType.TOUCH_CANCEL, function (event) { //向左键松开
            self.direction = 0;
            self.btn_left_light.active = false;
        });
        self.move_right_btn.node.on(cc.Node.EventType.TOUCH_START, function (event) { //按住向右键
            if (self.direction == 0) {
                self.direction = 1;
                self.btn_right_light.active = true;
            }
        });
        self.move_right_btn.node.on(cc.Node.EventType.TOUCH_END, function (event) { //向右键送开
            self.direction = 0;
            self.btn_right_light.active = false;
        });
        self.move_right_btn.node.on(cc.Node.EventType.TOUCH_CANCEL, function (event) { //向右键送开
            self.direction = 0;
            self.btn_right_light.active = false;
        });
        self.move_jump_btn.node.on(cc.Node.EventType.TOUCH_START, function (event) { //按住跳跃键
            self.btn_jump_light.active = true;
            if (!self.jumping) {
                self.jumpRepeat = true;
                self.jumping = true;
                self.speed.y = self.jumpSpeed;
            }
        });
        self.move_jump_btn.node.on(cc.Node.EventType.TOUCH_END, function (event) { //跳跃键送开
            self.btn_jump_light.active = false;
            self.jumpRepeat = false;
        });
        self.move_jump_btn.node.on(cc.Node.EventType.TOUCH_CANCEL, function (event) { //跳跃键送开
            self.btn_jump_light.active = false;
            self.jumpRepeat = false;
        });

        self.btn_shot_btn.node.on(cc.Node.EventType.TOUCH_START, function (event) { //按住跳跃键
            self.btn_shot_light.active = true;
            if (!self.shotting) {
                self.shoeNode.runAction(cc.rotateTo(0.15, -110));
                self.shotting = true;
            }
        });
        self.btn_shot_btn.node.on(cc.Node.EventType.TOUCH_END, function (event) { //跳跃键送开
            if (self.shotting) {
                self.shoeNode.runAction(cc.rotateTo(0.15, 15));
                self.shotting = false;
            }
            self.btn_shot_light.active = false;
        });
        self.btn_shot_btn.node.on(cc.Node.EventType.TOUCH_CANCEL, function (event) { //跳跃键送开
            if (self.shotting) {
                self.shoeNode.runAction(cc.rotateTo(0.15, 15));
                self.shotting = false;
            }
            self.btn_shot_light.active = false;
        });
    },

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

    update: function (dt) {
        if (this.jumping) {
            this.speed.y += this.gravity * dt;
            if (Math.abs(this.speed.y) > this.maxSpeed.y) {
                this.speed.y = this.speed.y > 0 ? this.maxSpeed.y : -this.maxSpeed.y;
            }
        }

        if (this.jumping == false && this.jumpRepeat) {
            this.jumping = true;
            this.speed.y = this.jumpSpeed;
        }

        if (this.direction === 0) {
            if (this.speed.x > 0) {
                this.speed.x -= this.acce * dt;
                if (this.speed.x <= 0) this.speed.x = 0;
            } else if (this.speed.x < 0) {
                this.speed.x += this.acce * dt;
                if (this.speed.x >= 0) this.speed.x = 0;
            }
        } else {
            this.speed.x += (this.direction > 0 ? 1 : -1) * this.acce * dt;
            if (Math.abs(this.speed.x) > this.maxSpeed.x) {
                this.speed.x = this.speed.x > 0 ? this.maxSpeed.x : -this.maxSpeed.x;
            }
        }

        this.node.x += this.speed.x * dt;
        this.node.y += this.speed.y * dt;
        if (this.node.y <= this.groundY) {
            this.node.y = this.groundY;
            this.jumping = false;
        }
    },
});

补充的滑动触发按钮事件代码如下(其实很low,还是用的Touch_Move来进行的帧判定):<25/12/2017>

self.move_right_btn.node.on(cc.Node.EventType.TOUCH_MOVE, function (event) { //按住向右键
            console.log(event.getLocation().x);
            if (event.getLocation().x > 180 && event.getLocation().x < 340 && event.getLocation().y < 130) {
                self.player.direction = 1;
                self.move_left_btn_light.active = false;
                self.move_right_btn_light.active = true;
                // }
            } else if (event.getLocation().x > 20 && event.getLocation().x < 180 && event.getLocation().y < 130) {
                self.player.direction = -1;
                self.move_left_btn_light.active = true;
                self.move_right_btn_light.active = false;
            } else {
                self.player.direction = 0;
                self.move_left_btn_light.active = false;
                self.move_right_btn_light.active = false;
            }
        });
        self.move_right_btn.node.on(cc.Node.EventType.TOUCH_START, function (event) { //按住向右键
            if (self.player.direction == 0) {
                self.player.direction = 1;
                self.move_left_btn_light.active = false;
                self.move_right_btn_light.active = true;
            }
        });
        self.move_right_btn.node.on(cc.Node.EventType.TOUCH_END, function (event) { //向右键送开
            self.player.direction = 0;
            self.move_left_btn_light.active = false;
            self.move_right_btn_light.active = false;
        });
        self.move_right_btn.node.on(cc.Node.EventType.TOUCH_CANCEL, function (event) { //向右键送开
            self.player.direction = 0;
            self.move_left_btn_light.active = false;
            self.move_right_btn_light.active = false;
        });