cocos小游戏开发总结

最近接到一个任务要开发消消乐小游戏，当然首先就想到乐cocosCreator来作为开发工具。 开发本身倒没有多少难点。消消乐的开发官网发行的书上有专门讲到。下面主要总结一下开发中遇到的问题以及解决方法

屏幕适配

由于设计尺寸是750*1336，如果适应高度，则在iphonX下，内容会超出屏幕宽度。按宽适应，iphon4下内容会超出屏幕高度。所以就需要根据屏幕比例来动态设置适配策略。

 onLoad() {
        var canvas = this.canvas
        var designResolution = canvas.designResolution
        var viewSize = cc.view.getFrameSize()
    
        if (viewSize.width/viewSize.height > designResolution.width/designResolution.height)
        {
            canvas.fitHeight = true
        }
        else{
            canvas.fitWidth = true
        }
    }

显示微信头像

由于微信头像显示涉及到跨域问题，所以我在我们游戏所在服务器上用nginx设置了反向代理来解决跨域问题，并把获取到的微信头像地址域名替换成服务器所在域名

 let url = userObj.headimgurl.replace('http://thirdwx.qlogo.cn',
            '我们的服务器域名');
        cc.loader.load({ url, type: 'png' }, (err, res) => {
            Message.hide();
            this.node.getComponent(cc.Sprite).spriteFrame = new cc.SpriteFrame(res);
        });

生成二维码

由于要根据动态地址生成二维码这里用到QR.js+graphics来实现。首先引入QR.js（npm上可以找到）并设置为插件引入。 在所在节点上添加Graphics。然后用如下代码生成二维码

//生成二维码
    createrQR() {
        const urlString = 'http://xxxxxx';
        const graphics = this.qrNode.getComponent(cc.Graphics);
        // return
        graphics.clear();
        //背景色
        graphics.fillColor = cc.Color.WHITE;
        //let rect = this.node.getBoundingBox();
        let width = this.qrNode.width;
        graphics.rect(0 - width * 0.5, 0 - width * 0.5, width, width);
        graphics.fill();
        graphics.close();
        //生成二维码数据
        let qrcode = new QRCode(-1, 2);
        qrcode.addData(urlString);
        qrcode.make();
        graphics.fillColor = cc.Color.BLACK;
        let size = width - 10 * 2;
        let num = qrcode.getModuleCount();

        let tileW = size / num;
        let tileH = size / num;
        let w = Math.ceil(tileW);
        let h = Math.ceil(tileH);
        for (let row = 0; row < num; row++) {
            for (let col = 0; col < num; col++) {
                if (qrcode.isDark(row, col)) {
                    graphics.rect(10 + col * tileW - width * 0.5, size - tileH - Math.round(row * tileH) + 10 - width * 0.5, w, h);
                    graphics.fill();
                }
            }
        }
    }

截取屏幕

//截屏
    capture() {
        cc.director.on(cc.Director.EVENT_AFTER_DRAW, this.callback.bind(this));
    }
    callback() {
        let canvas = document.getElementById("GameCanvas") as HTMLCanvasElement;
        let baseUrl = canvas.toDataURL("imagea/png");
        cc.director.off(cc.Director.EVENT_AFTER_DRAW);
        this.showImgDiv(baseUrl)
    }

开关背景音乐

在初始场景上添加一个节点，节点的层级要比场景的canvas高才能看的到音乐图标。然后在节点上添加一个Sprite，把音乐图标加入上面。在该节点上添加如下代码将该节点设置为常驻节点，并控制其播放暂停。

@ccclass
export default class NewClass extends cc.Component {
    @property({
        type: cc.AudioClip
    })
    bgAudio: cc.AudioClip;

    audioid;
    playState: boolean = true;
    action;
    onEnable() {
        cc.game.addPersistRootNode(this.node);
        this.autoAudioPlay();
    }
    autoAudioPlay = () => {
        if(typeof this.audioid ==="undefined"){
            this.audioid = cc.audioEngine.play(this.bgAudio, true, 1)
        }
        this.action = cc.repeatForever(cc.rotateBy(3, 360));
        this.node.runAction(this.action);
    }
    playSwitch = () => {
        console.log(this.playState)
        if (this.playState) {
            this.playState = false;
            // 停止一个动作
            this.node.stopAction(this.action);
            cc.audioEngine.pause(this.audioid)
        } else {
            this.playState = true;
            // 执行动作
            this.node.runAction(this.action);
            cc.audioEngine.resume(this.audioid);
        }
    }
    onDestroy() {

    }
}

游戏倒计时

为了防止游戏呼出后暂停倒计时。应该以当前时间+一个游戏时长（60），作为游戏结束时间。 然后倒计时=结束时间-当前时间，如果倒计时<0,游戏结束。 我用到了dayjs作为处理时间的插件

const dayjs = require('./dayjs')
timer;
delay = 60;
endTime = dayjs();
  this.timer = setInterval(() => {
                        if (this.delay <= 0) {
                            clearInterval(this.timer);
                            this.isSend = false;
                            return;
                        }
                        this.delay = this.endTime.diff(dayjs(), 'second');
                    }, 1000);