Cocos2d creator js 使用javascript制作扑克游戏

1.前言

          最近想做一个游戏，想起以前做安卓游戏的时候，ios他就运行不了，所以跨平台是一个目标，然后大概有二种语言备选，lua和js，其实我只是个写java的，都二种语言都不太熟悉，但是js的框架还是用了一些，就选择了js，目前只是单机版的V1.0，有很多改进的地方，cocos creator是一个中国的框架，网上的资源根本没有，只有硬着头皮看API和用户手册，看demo，和java和android编程不同，android游戏有很多资源，搜一个扑克游戏能找到很多下载，这个根本连游戏都少，扑克可能就没有，另外写完代码之后，我有点懵，想着赶紧总结一下，不然自己的代码也看不懂了

2.效果

   

3.准备

游戏少不了图片，需要各个图片的资源，另外就是扑克是prefab，也就是预制资源，也是altas，就是图集，关于图集就是一组图放到一个图片上面了，可以根据位移可以得到其中的某一张图。

        另外就是声音资源，包括背景音乐，摸牌和出牌时候的声效。

4.核心代码分析

   

4.1 ItemTemplate.js

      这个是扑克预制资源图片的脚本文件，也是用来逻辑控制的部分，id其实没什么用，也不唯一，icon是图片资源，名称为数字+a|b|c|d，abcd代表着方片，红心，梅花和黑桃四种花色，具体不是这个顺序，是这个意思，itemName是扑克牌的值，用来处理后台算数逻辑的主要部分。

cc.Class({
    extends: cc.Component,
    properties: {
        id: 0,
        icon: cc.Sprite,
        itemName: cc.Label
    },
    
    init: function (data) {
        this.id = data.id;
        this.icon.spriteFrame = data.iconSF;
        this.itemName.string = data.itemName;
    }
});

4.2 ItemList.js

cc.Class({
    extends: cc.Component,

    properties: {
        items: {
            default: [],
            type: Item
        },
        opponentcards: {
            default: []
        },
        itemPrefab: cc.Prefab,
        backgroundAudio: {
            default: null,
            url: cc.AudioClip
        },
        getcardAudio: {
            default: null,
            url: cc.AudioClip
        },
        sendcardAudio: {
            default: null,
            url: cc.AudioClip
        },
    },
    
    
    
    // use this for initialization
    onLoad: function () {
        //cc.log("ItemList:onLoad()");
        //var sprite = cc.find("Canvas").addComponent(cc.Sprite);
        //cc.eventManager.setEnabled(false);
       cc.audioEngine.playEffect(this.backgroundAudio, true,0.5);
       var targetcalNumber = 10;//need user to calculate this number 
       var isCalculatable = function(a,b,target){
           cc.log("[isCalculatable] : (a,b,target) is (" + a + "," + b + "," + target + ")");
           if(a + b === target){
               return true;
           }else if(a * b === target){
               return true;
           }else if(a - b === target){
               return true;
           }else if(b - a === target){
               return true;
           }else if(a / b === target){
               return true;
           }else if(b / a === target){
               return true;
           }else{
               return false;
           }
       };  
       //return the value of cards
        var getTwoNumberOfResult = function(arr,targetNumber){
           cc.log("[getTwoNumberOfResult] : (arr,targetNumber) is (" + arr + "," + targetNumber + ")");
           cc.log("arr is " );
           cc.log(arr);
           cc.log("targetNumber is ");
           cc.log(targetNumber);
           var result = [];
           outerloop:
           for(var o = 0;o < arr.length;o++){
               for(var t = 1;t < arr.length;t++){
                   if(isCalculatable(arr[o],arr[t],targetNumber)){
                       result.push(arr[o]);
                       result.push(arr[t]);
                       break outerloop;
                   }
               }
           }
           return result;
        };
        
        var getNewString = function(myindex,myspecies){
            cc.log("[getNewString] : (myindex,myspecies) is (" + myindex + "," + myspecies + ")");
            var index = myindex | parseInt(15*Math.random()) + 1;
            var species = myspecies | parseInt(4*Math.random());
            switch(species){
                case 0: species = "a";break;
                case 1: species = "b";break;
                case 2: species = "c";break;
                case 3: species = "d";break;
                default:break;
            }
            var isString = "";
            if(index < 14){
                isString += index + species;
            }else{
                isString += index + (index === 14 ? "b" : "a");
            }
            cc.log("isString is " + isString);
            return isString;
        };
        //init the opponentcards
        var opponentcards = cc.find("Canvas").getComponent("ItemList").opponentcards;
        for(var h = 0;h < 5;h++){
            opponentcards[h] = parseInt(Math.random()*15) + 1;
        }
        cc.log("opponentcards is ");
        cc.log(opponentcards);
        //get new card function
        var getNewCard = function(frame,i,frameNumber){
            cc.log("[getNewCard] : (" + frame + ","+ i + "," + frameNumber + ")");
            i = i | cc.find("Canvas").getComponent("ItemList").items.length;
            var item = cc.instantiate(cc.find("Canvas").getComponent("ItemList").itemPrefab);
                    //cc.log("error message is " + err);
                   //var frame = atlas.getSpriteFrame(isString);
                    cc.find("Canvas").getComponent("ItemList").items[i] = new Item().init({id:i,itemName:""+frameNumber,iconSF:frame});
                    //cc.log(cc.find("Canvas").getComponent("ItemList").items[i]);
                    var data = cc.find("Canvas").getComponent("ItemList").items[i];
                    //cc.log("data is : ");
                    //cc.log(data);
                    item.getComponent('ItemTemplate').init(data);
                    item.setPosition(-300 + i*30,-220);