【大家来找茬】JavaScrip 版本

作者在 2020-02-03 19:31:06 发布以下内容

手机里的照片越来越多!放在那不如把它做成小游戏,应该会很有趣!

【大家来找茬】的核心玩法是两张照片找出不同的地方!

小游戏是用 Cocos Creator 引擎 和 JavaScript 脚本做的!

注:Cocos Creator 版本 V2.2.1

交叉引用可以很好的实现玩法

代码如下 :

aoo.js


cc.Class({
    extends: cc.Component,
    properties: () => ({
        retToBoo: require('Boo')  
    }),
 
    fault: function () {
        this.node.opacity = 255;
        this.retToBoo.node.opacity = 255;
        this.node.getComponent(cc.Button).interactable = false;
        this.retToBoo.getComponent(cc.Button).interactable = false;
    }
 
});
 
boo.js



cc.Class({
    extends: cc.Component,
    properties: () => ({
        retToAoo: require('Aoo')
    }),
    fault: function () {
        this.node.opacity = 255;
        this.retToAoo.node.opacity = 255;
        this.node.getComponent(cc.Button).interactable = false;
        this.retToAoo.getComponent(cc.Button).interactable = false;
    }
});
接下来就是得分代码了


score.js


 
cc.Class({
    extends: cc.Component,
    properties: {
        score: {
            default: null,
            type: cc.Label
        }
    },
    Score: function () {
        this.score.string++;
        if (this.score.string == 3){
            var sceneTemp = [
                            "fault100",
                            "fault101",
                            "fault102",
                            "fault103",
                            "fault104",
                            "fault105",
                            "fault106",
                            "fault107"
            ];
            cc.director.loadScene(sceneTemp[Math.floor(Math.random() * sceneTemp.length)]);
        }
    },
    Rrturn: function () {
        cc.director.loadScene("game");
    }
});
背景音乐和音效写了两个 JS 脚本,主要是挂脚本的时候方便一点


bgmusic.js


cc.Class({
    extends: cc.Component,
    properties: {    
        isPlayMusic: true,  // 是否播放音乐
        isPlaySound: true,  // 是否播放音效
 
        music: {
            default: null,
            type: cc.AudioClip
        },
 
        sound: {
            default: null,
            type: cc.AudioClip
        }
    },
    onLoad: function () {
        var soundNode = this.node.getChildByName("toggle_sound");
        var musicNode = this.node.getChildByName("toggle_music");
        var OKNode    = this.node.getChildByName("btn_OK")
 
        // 设置音乐,音效状态
        this.isPlayMusic = cc.sys.localStorage.getItem("IS_MUSIC");
        this.isPlaySound = cc.sys.localStorage.getItem("IS_SOUND")
 
        soundNode.getComponent(cc.Toggle).isChecked = this.stringToBoolean(this.isPlaySound);
        musicNode.getComponent(cc.Toggle).isChecked = this.stringToBoolean(this.isPlayMusic);
 
        // 设置按钮回调函数
        soundNode.on('toggle', this.bg_sound, this);
        musicNode.on('toggle', this.bg_music, this);
        OKNode.on(cc.Node.EventType.TOUCH_START, this.bg_ok, this);
 
    },
 
    // 音效 callback
    bg_sound(toggle) {
        console.log("bg_sound");
 
        this.playSound();
 
        if (toggle.isChecked) {
            cc.sys.localStorage.setItem("IS_SOUND", true);
        } else {
            cc.sys.localStorage.setItem("IS_SOUND", false);
        }
    },
 
    // 音乐 callback
    bg_music(toggle) {
        console.log("bg_music");
 
        this.playSound();
 
        if (toggle.isChecked) {
            cc.sys.localStorage.setItem("IS_MUSIC", true);
            var music = cc.audioEngine.playMusic(this.music, true)
        } else {
            cc.sys.localStorage.setItem("IS_MUSIC", false);
            cc.audioEngine.stopMusic();
        }
 
    },
 
    // 返回 callback
    bg_ok () {
        this.playSound();
        cc.director.loadScene("game");
    },
    // 播放音效
    playSound() {
        if (cc.sys.localStorage.getItem("IS_SOUND") == "true") {
            var sound = cc.audioEngine.playEffect(this.sound, false);
        }
    },
 
 
    // 播放音乐
    playMusic() {
        if (cc.sys.localStorage.getItem("IS_MUSIC") == "true") {
            var music = cc.audioEngine.playMusic(this.music, false);
        }
    },
 
    // 将字符串转化为 bool 类型
    stringToBoolean(str) {
        switch (str.toLowerCase()) {
            case "true":
            case "yes":
            case "1":
                return true;
            case "false":
            case "no":
            case "0":
            case null:
                return false;
            
            default: return Boolean(str);
        }
    },
   
    ReturnGame: function () {
        this.playSound()
        cc.director.loadScene("game");
    
    }
    
});
bgsound.js



cc.Class({
    extends: cc.Component,
    properties: {    
        isPlaySound: true,  // 是否播放音效
 
        sound: {
            default: null,
            type: cc.AudioClip
        }
    },
    onLoad: function () {
        var soundNode = this.node.getChildByName("toggle_sound");
        // 设置音效状态
        this.isPlaySound = cc.sys.localStorage.getItem("IS_SOUND")
 
        //soundNode.getComponent(cc.Toggle).isChecked = this.stringToBoolean(this.isPlaySound);
    },
 
    // 音效 callback
    bg_sound(toggle) {
        console.log("bg_sound");
 
        this.playSound();
 
        if (toggle.isChecked) {
            cc.sys.localStorage.setItem("IS_SOUND", true);
        } else {
            cc.sys.localStorage.setItem("IS_SOUND", false);
        }
    },
 
    // 播放音效
    playSound() {
        if (cc.sys.localStorage.getItem("IS_SOUND") == "true") {
            var sound = cc.audioEngine.playEffect(this.sound, false);
        }
    },
 
    // 将字符串转化为 bool 类型
    stringToBoolean(str) {
        switch (str.toLowerCase()) {
            case "true":
            case "yes":
            case "1":
                return true;
            case "false":
            case "no":
            case "0":
            case null:
                return false;
            
            default: return Boolean(str);
        }
    },
});
 


web 放到了 github

https://xiaokang1120.github.io/FindFault/web-desktop/


代码和资源文件放百度网盘里

https://pan.baidu.com/s/18DfiDjDk3CmIf0D0-l4spw

提取码: oz2b


不会又想把照片做成小游戏的可以把照片资源发我

免费帮你做 , 电子邮件地址:

331353080@qq.com


Cocos Creator | 阅读 1801 次
文章评论,共0条
游客请输入验证码
文章归档
最新评论