PingPongPro/assets/scripts/arc.js

// Learn cc.Class:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/class.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/class.html
// Learn Attribute:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html
//  - [English] https://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html

cc.Class({
    extends: cc.Component,

    properties: {
        loc: 0, // 代表方向，0为正位，1为反位
        g: {
            default: null,
            type: cc.Graphics,
        },
        index:0,
        // 脑袋的宽度
        headSize: 0,
        // 身体的宽度
        bodySize: 0,
        // 球拍的宽度
        batSize: 2,
        // 方向配置
        dir: 0,
    },

    // LIFE-CYCLE CALLBACKS:

    onLoad () {
        this.headSize = 4;
        this.bodySize = 12;
        this.batSize = 3;
    },

    start () {
        this.g = this.getComponent(cc.Graphics);
        // 配置方向
        if (this.loc == 0) {
            this.dir = 1;
        } else {
            this.dir = -1;
        }

        if (this.index == 0) {
            this.idle();
        } else if (this.index == 1) {
            this.serve_001();
        } else if (this.index == 2) {
            this.serve_002();
        } else if (this.index == 3) {
            this.serve_003();
        } else if (this.index == 4) {
            this.serve_004();
        } else if (this.index == 13) {
            this.serve_013();
        } else if (this.index == 14) {
            this.serve_014();
        } else if (this.index == 15) {
            this.serve_015();
        }
    },

    idle:function() {
        // 画脑袋和身体
        this.g.lineWidth = 7;

        // 画个脑袋
        this.g.fillColor.fromHEX('#ffffff');
        this.g.circle(-1.5 * this.dir, 110, this.headSize);
        this.g.close();
        this.g.stroke();
        this.g.fill();

        // 画个身体
        this.g.lineWidth = 7;
        this.g.fillColor.fromHEX('#ffffff');
        this.g.circle(8 * this.dir, 85, this.bodySize);
        this.g.close();
        this.g.stroke();
        this.g.fill();

        // 画手臂
        var handStart = cc.v2(-7 * this.dir, 86);
        var handEnd = cc.v2(handStart.x - this.dir * 10, handStart.y - 47);
        this.g.lineWidth = 3;
        this.g.moveTo(handStart.x, handStart.y);
        this.g.bezierCurveTo(handStart.x, handStart.y, handStart.x, handStart.y - 40, handEnd.x, handEnd.y);
        this.g.stroke();

        // 画个球
        this.g.lineWidth = 7;
        this.g.fillColor.fromHEX('#ffffff');
        this.g.circle(handEnd.x - this.dir * 3, handEnd.y + 4, this.batSize);
        this.g.close();
        this.g.stroke();
        this.g.fill();

        // 画手臂
        var handStart = cc.v2(13 * this.dir, 99);
        var handEnd = cc.v2(handStart.x + this.dir * 51, handStart.y - 18);
        this.g.lineWidth = 3;
        this.g.moveTo(handStart.x, handStart.y);
        this.g.bezierCurveTo(handStart.x, handStart.y, handStart.x + this.dir * 27, handStart.y + 10, handEnd.x, handEnd.y);
        this.g.stroke();

        // 画裤子
        var trousersStart = cc.v2(0, 74);
        var trousersEnd = cc.v2(22 * this.dir, 79);
        this.g.moveTo(trousersStart.x, trousersStart.y);
        this.g.lineTo(trousersEnd.x, trousersEnd.y);
        this.g.stroke();

        // 画腿
        var legStart = cc.v2(10 * this.dir, 73);
        var legEnd = cc.v2(0, 0)
        this.g.moveTo(legStart.x, legStart.y);
        this.g.bezierCurveTo(legStart.x, legStart.y, -10 * this.dir, 60, legEnd.x, legEnd.y);
        this.g.lineTo(legEnd.x - this.dir * 6, legEnd.y);
        this.g.stroke();

        legStart = cc.v2(19 * this.dir, 78);
        legEnd = cc.v2(62 * this.dir, 0)
        this.g.moveTo(legStart.x, legStart.y);
        this.g.lineTo(legEnd.x, legEnd.y);
        this.g.lineTo(legEnd.x + this.dir * 6, legEnd.y);
        this.g.stroke();
    },

    serve_001:function() {
        // 画脑袋
        this.g.lineWidth = 3;
        this.g.fillColor.fromHEX('#ffffff');
        // this.g.ellipse(18, 116, 15, 5);
        this.g.arc(14, 112, this.headSize + 2, Math.PI / 2 + Math.PI / 12, Math.PI * 1.5 + Math.PI / 12, true);
        this.g.lineTo(29, 107.5);
        this.g.arc(27, 113, this.headSize + 2, Math.PI * 1.5 + Math.PI / 12, Math.PI / 2 + Math.PI / 12, true);
        this.g.lineTo(11, 118);
        // this.g.close();
        // this.g.stroke();
        // this.g.fill();

        // 画个身体
        this.g.lineWidth = 7;
        this.g.fillColor.fromHEX('#ffffff');
        this.g.circle(29, 87, this.bodySize);
        this.g.close();
        this.g.stroke();
        this.g.fill();

        // 画手臂
        var handStart = cc.v2(15, 93);
        var handEnd = cc.v2(handStart.x - 19, handStart.y - 41);
        this.g.lineWidth = 3;
        this.g.moveTo(handStart.x, handStart.y);
        this.g.bezierCurveTo(handStart.x, handStart.y, handStart.x - 13, handStart.y - 50, handEnd.x, handEnd.y);
        this.g.stroke();

        // 画个球
        this.g.lineWidth = 7;
        this.g.fillColor.fromHEX('#ffffff');
        this.g.circle(handEnd.x - 2, handEnd.y + 4, 4);
        this.g.close();
        this.g.stroke();
        this.g.fill();

        // 画手臂
        var handStart = cc.v2(39, 98);
        var handEnd = cc.v2(handStart.x + 41, handStart.y - 31);
        this.g.lineWidth = 3;
        this.g.moveTo(handStart.x, handStart.y);
        this.g.bezierCurveTo(handStart.x, handStart.y, handStart.x + 30, handStart.y + 15, handEnd.x, handEnd.y);
        this.g.stroke();

        // 画裤子
        var trousersStart = cc.v2(19, 78);
        var trousersEnd = cc.v2(41, 76);
        this.g.moveTo(trousersStart.x, trousersStart.y);
        this.g.lineTo(trousersEnd.x, trousersEnd.y);
        this.g.stroke();

        // 画腿
        var legStart = cc.v2(18, 75);
        var legEnd = cc.v2(0, 0)
        this.g.moveTo(legStart.x, legStart.y);
        this.g.bezierCurveTo(legStart.x, legStart.y, -3, 55, legEnd.x, legEnd.y);
        this.g.lineTo(legEnd.x - 10, legEnd.y);
        this.g.stroke();

        legStart = cc.v2(33, 75);
        legEnd = cc.v2(64, 0)
        this.g.moveTo(legStart.x, legStart.y);
        this.g.bezierCurveTo(legStart.x, legStart.y, legStart.x + 20, legStart.y - 5, legEnd.x, legEnd.y);
        this.g.lineTo(legEnd.x + 10, legEnd.y);
        this.g.stroke();
    },

    serve_002:function() {
        // 画脑袋
        this.g.lineWidth = 3;
        this.g.fillColor.fromHEX('#ffffff');
        // this.g.ellipse(18, 116, 15, 5);
        this.g.arc(27, 113, this.headSize + 2, Math.PI / 2 - Math.PI / 8, Math.PI * 1.5 - Math.PI / 8, true);
        this.g.lineTo(48, 97);
        this.g.arc(49, 103, this.headSize + 2, Math.PI * 1.5 - Math.PI / 8, Math.PI / 2 - Math.PI / 8, true);
        this.g.lineTo(28, 119);
        // // this.g.close();
        // // this.g.stroke();
        // // this.g.fill();

        // 画个身体
        this.g.lineWidth = 7;
        this.g.fillColor.fromHEX('#ffffff');
        this.g.circle(51, 76, this.bodySize);
        this.g.close();
        this.g.stroke();
        this.g.fill();

        // 画手臂
        var handStart = cc.v2(38, 82);
        var handEnd = cc.v2(handStart.x - 36, handStart.y - 23);
        this.g.lineWidth = 3;
        this.g.moveTo(handStart.x, handStart.y);
        this.g.bezierCurveTo(handStart.x, handStart.y, handStart.x - 30, handStart.y - 30, handEnd.x, handEnd.y);
        this.g.stroke();

        // 画个球
        this.g.lineWidth = 7;
        this.g.fillColor.fromHEX('#ffffff');
        this.g.circle(handEnd.x - 1, handEnd.y + 4, this.batSize);
        this.g.close();
        this.g.stroke();
        this.g.fill();

        // 画手臂
        var handStart = cc.v2(61, 86);
        var handEnd = cc.v2(handStart.x + 9, handStart.y - 27);
        this.g.lineWidth = 3;
        this.g.moveTo(handStart.x, handStart.y);
        this.g.bezierCurveTo(handStart.x, handStart.y, handStart.x + 60, handStart.y - 11, handEnd.x, handEnd.y);
        this.g.stroke();

        // 画裤子
        var trousersStart = cc.v2(38, 67);
        var trousersEnd = cc.v2(61, 67);
        this.g.moveTo(trousersStart.x, trousersStart.y);
        this.g.lineTo(trousersEnd.x, trousersEnd.y);
        this.g.stroke();

        // 画腿
        var legStart = cc.v2(40, 63);
        var legEnd = cc.v2(0, 0)
        this.g.moveTo(legStart.x, legStart.y);
        this.g.bezierCurveTo(legStart.x, legStart.y, -5, 60, legEnd.x, legEnd.y);
        this.g.lineTo(legEnd.x - 6, legEnd.y);
        this.g.stroke();

        legStart = cc.v2(57, 65);
        legEnd = cc.v2(60, 0)
        this.g.moveTo(legStart.x, legStart.y);
        this.g.bezierCurveTo(legStart.x, legStart.y, legStart.x + 55, legStart.y - 35, legEnd.x, legEnd.y);
        this.g.lineTo(legEnd.x + 6, legEnd.y);
        this.g.stroke();
    },

    serve_003:function() {
        // 画脑袋和身体
        this.g.lineWidth = 7;

        // 画个脑袋
        this.g.fillColor.fromHEX('#ffffff');
        this.g.circle(54, 105, this.headSize);
        this.g.close();
        this.g.stroke();
        this.g.fill();

        // 画个身体
        this.g.lineWidth = 7;
        this.g.fillColor.fromHEX('#ffffff');
        this.g.circle(45, 81, this.bodySize);
        this.g.close();
        this.g.stroke();
        this.g.fill();

        // 画手臂
        var handStart = cc.v2(30, 82);
        var handEnd = cc.v2(handStart.x - 24, handStart.y - 18);
        this.g.lineWidth = 3;
        this.g.moveTo(handStart.x, handStart.y);
        this.g.bezierCurveTo(handStart.x, handStart.y, handStart.x - 20, handStart.y - 25, handEnd.x, handEnd.y);
        this.g.stroke();

        // 画手臂
        var handStart = cc.v2(57, 90);
        var handEnd = cc.v2(handStart.x - 31, handStart.y + 10);
        this.g.lineWidth = 3;
        this.g.moveTo(handStart.x, handStart.y);
        this.g.bezierCurveTo(handStart.x, handStart.y, handStart.x + 45, handStart.y - 45, handEnd.x, handEnd.y);
        this.g.stroke();

        // 画裤子
        var trousersStart = cc.v2(32, 71);
        var trousersEnd = cc.v2(56, 73);
        this.g.moveTo(trousersStart.x, trousersStart.y);
        this.g.lineTo(trousersEnd.x, trousersEnd.y);
        this.g.stroke();

        // 画腿
        var legStart = cc.v2(41, 68);
        var legEnd = cc.v2(0, 0)
        this.g.moveTo(legStart.x, legStart.y);
        this.g.bezierCurveTo(legStart.x, legStart.y, 0, 60, legEnd.x, legEnd.y);
        this.g.lineTo(legEnd.x - 6, legEnd.y);
        this.g.stroke();

        legStart = cc.v2(54, 69);
        legEnd = cc.v2(61, 2)
        this.g.moveTo(legStart.x, legStart.y);
        this.g.bezierCurveTo(legStart.x, legStart.y, legStart.x + 50, legStart.y - 30, legEnd.x, legEnd.y);
        this.g.lineTo(legEnd.x + 6, legEnd.y);
        this.g.stroke();
    },

    serve_004:function() {
        this.serve_003();
    },

    serve_004:function() {
        this.serve_003();
    },

    serve_005:function() {
        this.serve_003();
    },

    serve_006:function() {
        this.serve_003();
    },

    serve_007:function() {
        this.serve_003();
    },

    serve_008:function() {
        this.serve_003();
    },

    serve_009:function() {
        this.serve_003();
    },

    serve_010:function() {
        this.serve_003();
    },

    serve_011:function() {
        this.serve_003();
    },

    serve_012:function() {
        this.idle();
    },

    serve_013:function() {
        // 画脑袋
        this.g.lineWidth = 3;
        this.g.fillColor.fromHEX('#ffffff');
        // this.g.ellipse(18, 116, 15, 5);
        this.g.arc(1, 112, this.headSize + 2, Math.PI / 2 - Math.PI / 12, Math.PI * 1.5 - Math.PI / 12, true);
        this.g.lineTo(12, 105);
        this.g.arc(13, 111, this.headSize + 2, Math.PI * 1.5 - Math.PI / 12, Math.PI / 2 - Math.PI / 12, true);
        this.g.lineTo(2, 118);

        // 画个身体
        this.g.lineWidth = 7;
        this.g.fillColor.fromHEX('#ffffff');
        this.g.circle(21, 81, this.bodySize);
        this.g.close();
        this.g.stroke();
        this.g.fill();

        // 画手臂
        var handStart = cc.v2(9, 89);
        var handEnd = cc.v2(handStart.x - 52, handStart.y + 7);
        this.g.lineWidth = 3;
        this.g.moveTo(handStart.x, handStart.y);
        this.g.bezierCurveTo(handStart.x, handStart.y, handStart.x - 30, handStart.y + 28, handEnd.x, handEnd.y);
        this.g.stroke();

        // 画个球拍
        this.g.lineWidth = 3;
        this.g.fillColor.fromHEX('#ffffff');
        this.g.arc(-41, 105, this.batSize + 2, Math.PI - Math.PI / 12, 0 - Math.PI / 12, false);
        this.g.bezierCurveTo(-37, 104, -47, 80, -24, 53);
        this.g.arc(-28, 51, this.batSize + 2, 0 + Math.PI / 12, Math.PI * 1.5 - Math.PI / 12, false);
        this.g.bezierCurveTo(-30, 46, -60, 75, -45, 106);
        // this.g.close();
        this.g.stroke();
        // this.g.fill();

        // 画手臂
        var handStart = cc.v2(35, 84);
        var handEnd = cc.v2(76, 61);
        this.g.lineWidth = 3;
        this.g.moveTo(handStart.x, handStart.y);
        this.g.bezierCurveTo(handStart.x, handStart.y, 58, 55, handEnd.x, handEnd.y);
        this.g.stroke();

        // 画裤子
        var trousersStart = cc.v2(11, 73);
        var trousersEnd = cc.v2(33, 73);
        this.g.moveTo(trousersStart.x, trousersStart.y);
        this.g.lineTo(trousersEnd.x, trousersEnd.y);
        this.g.stroke();

        // 画腿
        var legStart = cc.v2(12, 70);
        var legEnd = cc.v2(0, 0)
        this.g.moveTo(legStart.x, legStart.y);
        this.g.bezierCurveTo(legStart.x, legStart.y, -15, 60, legEnd.x, legEnd.y);
        this.g.lineTo(legEnd.x - 10, legEnd.y);
        this.g.stroke();

        legStart = cc.v2(31, 69);
        legEnd = cc.v2(64, 2)
        this.g.moveTo(legStart.x, legStart.y);
        this.g.bezierCurveTo(legStart.x, legStart.y, legStart.x + 20, legStart.y - 10, legEnd.x, legEnd.y);
        this.g.lineTo(legEnd.x + 10, legEnd.y);
        this.g.stroke();
    },

    serve_014:function() {
        // 画脑袋
        this.g.lineWidth = 3;
        this.g.fillColor.fromHEX('#ffffff');
        // this.g.ellipse(18, 116, 15, 5);
        this.g.arc(53, 104, this.headSize + 1, Math.PI / 2 - Math.PI / 12, Math.PI * 1.5 - Math.PI / 8, true);
        this.g.lineTo(65, 96);
        this.g.arc(66, 101, this.headSize + 1, Math.PI * 1.5 - Math.PI / 8, Math.PI / 2 - Math.PI / 8, true);
        this.g.lineTo(49, 110);;

        // 画个身体
        this.g.lineWidth = 7;
        this.g.fillColor.fromHEX('#ffffff');
        this.g.circle(54, 78, this.bodySize);
        this.g.close();
        this.g.stroke();
        this.g.fill();

        // 画手臂
        var handStart = cc.v2(45, 89);
        var handEnd = cc.v2(70, 135);
        this.g.lineWidth = 3;
        this.g.moveTo(handStart.x, handStart.y);
        this.g.bezierCurveTo(handStart.x, handStart.y, 20, 128, handEnd.x, handEnd.y);
        this.g.stroke();

        // 画个球
        this.g.lineWidth = 7;
        this.g.fillColor.fromHEX('#ffffff');
        this.g.circle(handEnd.x - 1, handEnd.y - 5, this.batSize);
        this.g.close();
        this.g.stroke();
        this.g.fill();

        // 画手臂
        var handStart = cc.v2(55, 63);
        var handEnd = cc.v2(56, 30);
        this.g.lineWidth = 3;
        this.g.moveTo(handStart.x, handStart.y);
        this.g.bezierCurveTo(handStart.x, handStart.y, 40, 40, handEnd.x, handEnd.y);
        // this.g.lineTo(handEnd.x, handEnd.y);
        this.g.stroke();

        // 画裤子
        var trousersStart = cc.v2(41, 73);
        var trousersEnd = cc.v2(63, 66);
        this.g.moveTo(trousersStart.x, trousersStart.y);
        this.g.lineTo(trousersEnd.x, trousersEnd.y);
        this.g.stroke();

        // 画腿
        var legStart = cc.v2(44, 67);
        var legEnd = cc.v2(0, 0)
        this.g.moveTo(legStart.x, legStart.y);
        this.g.bezierCurveTo(legStart.x, legStart.y, 30, 52, legEnd.x, legEnd.y);
        this.g.lineTo(legEnd.x - 6, legEnd.y);
        this.g.stroke();

        legStart = cc.v2(57, 64);
        legEnd = cc.v2(63, 1)
        this.g.moveTo(legStart.x, legStart.y);
        this.g.bezierCurveTo(legStart.x, legStart.y, legStart.x + 40, legStart.y - 15, legEnd.x, legEnd.y);
        this.g.lineTo(legEnd.x + 6, legEnd.y);
        this.g.stroke();
    },

    serve_015:function() {
        // 画脑袋
        this.g.lineWidth = 3;
        this.g.fillColor.fromHEX('#ffffff');
        // this.g.ellipse(18, 116, 15, 5);
        this.g.arc(70, 101, this.headSize + 1, Math.PI / 2 - Math.PI / 12, Math.PI * 1.5 - Math.PI / 8, true);
        this.g.lineTo(76, 92);
        this.g.arc(77, 97, this.headSize + 1, Math.PI * 1.5 - Math.PI / 8, Math.PI / 2 - Math.PI / 8, true);
        this.g.lineTo(71, 105);;

        // 画个身体
        this.g.lineWidth = 7;
        this.g.fillColor.fromHEX('#ffffff');
        this.g.circle(64, 75, this.bodySize);
        this.g.close();
        this.g.stroke();
        this.g.fill();

        // 画手臂
        var handStart = cc.v2(60, 90);
        var handEnd = cc.v2(102, 107);
        this.g.lineWidth = 3;
        this.g.moveTo(handStart.x, handStart.y);
        this.g.bezierCurveTo(handStart.x, handStart.y, 63, 140, handEnd.x, handEnd.y);
        this.g.stroke();

        // 画个球
        this.g.lineWidth = 7;
        this.g.fillColor.fromHEX('#ffffff');
        this.g.circle(handEnd.x - 4, handEnd.y - 5, this.batSize);
        this.g.close();
        this.g.stroke();
        this.g.fill();

        // 画手臂
        var handStart = cc.v2(64, 60);
        var handEnd = cc.v2(60, 33);
        this.g.lineWidth = 3;
        this.g.moveTo(handStart.x, handStart.y);
        this.g.bezierCurveTo(handStart.x, handStart.y, 50, 40, handEnd.x, handEnd.y);
        // this.g.lineTo(handEnd.x, handEnd.y);
        this.g.stroke();

        // 画裤子
        var trousersStart = cc.v2(50, 73);
        var trousersEnd = cc.v2(70, 60);
        this.g.moveTo(trousersStart.x, trousersStart.y);
        this.g.lineTo(trousersEnd.x, trousersEnd.y);
        this.g.stroke();

        // 画腿
        var legStart = cc.v2(52, 64);
        var legEnd = cc.v2(0, 0)
        this.g.moveTo(legStart.x, legStart.y);
        this.g.lineTo(legEnd.x, legEnd.y);
        this.g.stroke();

        legStart = cc.v2(68, 60);
        legEnd = cc.v2(63, 1)
        this.g.moveTo(legStart.x, legStart.y);
        this.g.bezierCurveTo(legStart.x, legStart.y, legStart.x + 38, legStart.y - 18, legEnd.x, legEnd.y);
        this.g.lineTo(legEnd.x + 6, legEnd.y);
        this.g.stroke();
    },

    // update (dt) {},
});