javascript开发HTML5游戏--斗地主(单机模式part1)

　   最近学习使用了一款HTML5游戏引擎(青瓷引擎)，并用它尝试做了一个斗地主的游戏，简单实现了单机对战和网络对战，代码可已放到github上，在此谈谈自己如何通过引擎来开发这款游戏的。

　客户端代码

   服务端代码

 　　　　　　　　(点击图片进入游戏体验)

本篇文章为第一部分，主要包括单机模式的开始布局设计准备。主要内容如下：

1. 斗地主游戏介绍
2. 创建工程与主场景
3. 单机模式场景布局
4. 添加图形资源

一、斗地主游戏介绍

　　斗地主游戏对于大家应该是算耳熟能详的游戏了，我就简单说明下自己理解的整个游戏的流程。

　　

 

 

游戏的主体，如图所示：

二、创建工程与主场景

　　使用青瓷引擎的编辑器很容易帮我完成整个游戏界面的布局。做这个游戏之前我从事java开发，也做过一段时间的前端开发，对js和前端布局算是比较熟悉。结合官方的手册、demo，我大概花了两三天时间把这些过了遍，尝试修改完善一些demo的内容，接下来我就开始自己尝试做这个游戏了。个人感觉有强大的编辑器，布局可以比较迅速的完成，然后专注地进行逻辑编写。

　　我的想法是把单机和多人对战分成两个场景，创建项目工程landlord和主场景，其中main是主场景，single是单机版的场景，online是在线对战的场景。

　　入口与游戏的初始化

　　　　在Scripts下创建start.js，并配置为入口脚本，此脚本首先定义了名字空间，将全局的数据都记录在这里。代码如下：

 

// 定义本工程的名字空间
qc.landlord = {};

// 用来存放所有的全局数据（函数、变量等）
window.G = qc.landlord.G = {};

// 初始化逻辑
qc.initGame = function(game) {
    game.log.trace('Start the game landlord.');
    // 将game实例的引用记录下来，方便在其他逻辑脚本模块中访问
    G.game = game;
    //游戏规则
    G.gameRule = new qc.landlord.GameRule();

    G.online = new qc.landlord.Online();
    //AI逻辑
    //G.AILogic = new qc.landlord.AILogic();
    String.prototype.trim = function() {  return this.replace(/(^s*)|(s*$)/g,'');  };
};

 

　　　　点击start.js脚本，在右侧的Inspector面板下点击edit，把start.js拖入并放置到第一的位置就成为入口脚本了。

　　主场景设计

　　　　主场景设计入如图：

　　　　

　　　　在Scripts/ui下创建MainUI.js脚本并挂载在lock节点下挂载(直接拖动脚本防置到节点)，主要实现了两个按钮的事件，代码如下：　

/**
 * 主场景脚本
 * @method defineBehaviour
 */
var MainUI = qc.defineBehaviour('qc.engine.MainUI', qc.Behaviour, function() {
    this.singleBtn = null;
    this.multiBtn = null;
    this.singleScene = null;
}, {
    singleBtn : qc.Serializer.NODE,
    multiBtn: qc.Serializer.NODE,
    enterNameBtn : qc.Serializer.NODE,
    backBtn: qc.Serializer.NODE,
    nameField: qc.Serializer.NODE,
    enterNamePanel: qc.Serializer.NODE,
    message: qc.Serializer.NODE,
    singleScene: qc.Serializer.STRING,
    multiScene: qc.Serializer.STRING
});

// Called when the script instance is being loaded.
MainUI.prototype.awake = function() {
    var self = this;
    //单机按钮事件
    self.addListener(self.singleBtn.onClick, function(){
        self.game.state.load(self.singleScene, false, function() {
            //牌组管理
            G.cardMgr = new qc.landlord.Card();
            //玩家本人
            G.ownPlayer = new qc.landlord.Player('QCPlayer');
            G.ownPlayer.isAI = false;
            var storage = G.game.storage;
            var ownScore = storage.get('QCPlayer');
            G.ownPlayer.score = ownScore ? ownScore : 500;
            //电脑玩家(左)
            G.leftPlayer = new qc.landlord.Player('AI_Left');
            var leftScore = storage.get('AI_Left');
            G.leftPlayer.score = leftScore ? leftScore : 500;
            //电脑玩家(右)
            G.rightPlayer = new qc.landlord.Player('AI_Right');
            var rightScore = storage.get('AI_Right');
            G.rightPlayer.score = rightScore ? rightScore : 500;

            //指定玩家顺序
            G.ownPlayer.nextPlayer = G.rightPlayer;
            G.rightPlayer.nextPlayer = G.leftPlayer;
            G.leftPlayer.nextPlayer = G.ownPlayer;

            //底牌
            G.hiddenCards = [];
            //当前手牌
            G.currentCards = [];
        }, function() {
            console.log(self.singleScene + '场景加载完毕。');
        });
    }, self);

    //多人对战按钮事件
    self.addListener(self.multiBtn.onClick, function(){

        var uid = G.game.storage.get('uid');
        if(uid){
            self.showMessage(self.MSG_WAITING);
            self.enterGame(uid);
        } else {
            var np = self.enterNamePanel.getScript('qc.TweenAlpha');
            np.from = 0;
            np.to = 1;
            np.resetToBeginning();
            self.enterNamePanel.visible = true;
            np.playForward();
        }

    }, self);

    //确认按钮事件
    self.addListener(self.enterNameBtn.onClick, function(){
        var nickname = self.nameField.text.trim();
        if(nickname){
            self.showMessage(self.MSG_WAITING);
            var result = G.online.register(nickname);
            result.then(function(data){
                if(data.uid){
                    G.game.storage.set('uid', data.uid);
                    G.game.storage.save();
                    self.enterGame(data.uid);
                } else if(err === G.online.ERR_EXIST_NAME){
                    self.showMessage(self.MSG_EXIST_NAME);
                }
            }).catch(function(err){
                if(err === G.online.ERR_EXIST_NAME){
                    self.showMessage(self.MSG_EXIST_NAME);
                }
            });
        }
    }, self);

    //返回按钮事件
    self.addListener(self.backBtn.onClick, function(){
        var np = self.enterNamePanel.getScript('qc.TweenAlpha');
        np.from = 1;
        np.to = 0;
        np.resetToBeginning();
        //self.enterNamePanel.visible = true;
        np.playForward();
        np.onFinished.addOnce(function (){
            self.enterNamePanel.visible = false;
        }, self);
        window.onbeforeunload = undefined;
    }, self);
};

MainUI.prototype.enterGame = function(uid) {
    var self = this;
    G.ownPlayer = new qc.landlord.Player(null);
    G.ownPlayer.uid = uid;
    window.onbeforeunload = function (){
        var warning="确认退出游戏?";
        return warning;
    };
    G.online.joinGame(G.ownPlayer.uid).then(function(data){
        var player = data.seats ? data.seats[data.ownSeatNo] : data.desk.seats[data.ownSeatNo];
        G.ownPlayer.deskNo = player.deskNo;
        G.ownPlayer.name = player.name;
        G.ownPlayer.seatNo = data.ownSeatNo;
        G.netInitData = data;
        self.game.state.load(self.multiScene, false, function() {
        }, function() {
            console.log(self.multiScene + '场景加载完毕。');
        });
    });
};

MainUI.prototype.showMessage = function(m) {
    var self = this;
    if(m){
        self.message.text = m;
        self.message.visible = true;
    } else {
        self.message.visible = false;
    }
};

MainUI.prototype.MSG_WAITING = '请稍等';
MainUI.prototype.MSG_EXIST_NAME = '您输入的昵称已被使用，请重试';

三、单机模式场景布局

　　游戏主体

　　斗地主主要的主体就是玩家、纸牌，制作主场景之前，先编写好这两个实体类

　　玩家类设计：在Scripts/logic创建player.js代码如下：

// define a user behaviour
var Player = qc.landlord.Player = function (n){
    var self = this;
    // 玩家名
    self.name = n ? n : 'Player';
    //是否是地主
    self.isLandlord = false;
    //是否是AI玩家
    self.isAI = true;
    //牌组
    self.cardList = [];
    //下一家
    self.nextPlayer = null;
    //以下属性用于多人对战
    self.uid = null;
    self.deskNo = null;
    self.seatNo = null;
    //是否已经准备
    self.isReady = false;
    //是否已经离开
    self.isLeave = false;
};
Object.defineProperties(Player.prototype, {
    score: {
        get: function(){
            return this._score;
        },
        set: function(v){
            this._score = v;
            var storage = G.game.storage;
            storage.set(this.name, v);
            storage.save();
        }
    }
});

　　牌组类设计：在Scripts/logic/clone创建card.js代码如下：

// define a user behaviour
var Card = qc.landlord.Card = function (){
    this.data = [
        {icon: 'j1.jpg', type: '0', val: 17},
        {icon: 'j2.jpg', type: '0', val: 16},
        {icon: 't1.jpg', type: '1', val: 14},
        {icon: 't2.jpg', type: '1', val: 15},
        {icon: 't3.jpg', type: '1', val: 3},
        {icon: 't4.jpg', type: '1', val: 4},
        {icon: 't5.jpg', type: '1', val: 5},
        {icon: 't6.jpg', type: '1', val: 6},
        {icon: 't7.jpg', type: '1', val: 7},
        {icon: 't8.jpg', type: '1', val: 8},
        {icon: 't9.jpg', type: '1', val: 9},
        {icon: 't10.jpg', type: '1', val: 10},
        {icon: 't11.jpg', type: '1', val: 11},
        {icon: 't12.jpg', type: '1', val: 12},
        {icon: 't13.jpg', type: '1', val: 13},
        {icon: 'x1.jpg', type: '2', val: 14},
        {icon: 'x2.jpg', type: '2', val: 15},
        {icon: 'x3.jpg', type: '2', val: 3},
        {icon: 'x4.jpg', type: '2', val: 4},
        {icon: 'x5.jpg', type: '2', val: 5},
        {icon: 'x6.jpg', type: '2', val: 6},
        {icon: 'x7.jpg', type: '2', val: 7},
        {icon: 'x8.jpg', type: '2', val: 8},
        {icon: 'x9.jpg', type: '2', val: 9},
        {icon: 'x10.jpg', type: '2', val: 10},
        {icon: 'x11.jpg', type: '2', val: 11},
        {icon: 'x12.jpg', type: '2', val: 12},
        {icon: 'x13.jpg', type: '2', val: 13},
        {icon: 'h1.jpg', type: '3', val: 14},
        {icon: 'h2.jpg', type: '3', val: 15},
        {icon: 'h3.jpg', type: '3', val: 3},
        {icon: 'h4.jpg', type: '3', val: 4},
        {icon: 'h5.jpg', type: '3', val: 5},
        {icon: 'h6.jpg', type: '3', val: 6},
        {icon: 'h7.jpg', type: '3', val: 7},
        {icon: 'h8.jpg', type: '3', val: 8},
        {icon: 'h9.jpg', type: '3', val: 9},
        {icon: 'h10.jpg', type: '3', val: 10},
        {icon: 'h11.jpg', type: '3', val: 11},
        {icon: 'h12.jpg', type: '3', val: 12},
        {icon: 'h13.jpg', type: '3', val: 13},
        {icon: 'k1.jpg', type: '4', val: 14},
        {icon: 'k2.jpg', type: '4', val: 15},
        {icon: 'k3.jpg', type: '4', val: 3},
        {icon: 'k4.jpg', type: '4', val: 4},
        {icon: 'k5.jpg', type: '4', val: 5},
        {icon: 'k6.jpg', type: '4', val: 6},
        {icon: 'k7.jpg', type: '4', val: 7},
        {icon: 'k8.jpg', type: '4', val: 8},
        {icon: 'k9.jpg', type: '4', val: 9},
        {icon: 'k10.jpg', type: '4', val: 10},
        {icon: 'k11.jpg', type: '4', val: 11},
        {icon: 'k12.jpg', type: '4', val: 12},
        {icon: 'k13.jpg', type: '4', val: 13}
    ];
};
//拷贝牌组，返回一组新的牌组
Card.prototype.getNewCards = function () {
    return this.data.slice(0);
};

　　添加预制

　　在开始做主场景之前，需要做一些预制(点击我看文档)，方便后面调用。主要还是围绕玩家、纸牌进行，引擎在这方面也给我们提供了很强大的支持：

1. 首先是纸牌预制，纸牌比较简单，只是张图片，默认显示的是纸牌的背面图案，我们在图片节点下挂载一个脚本，Scripts/ui下创建CardUI.js并挂载，代码如下：

/**
 * 卡牌规则
 */
var CardUI = qc.defineBehaviour('qc.engine.CardUI', qc.Behaviour, function() {
    this.isSelected = false;
    this.info = null;
}, {
    // fields need to be serialized
});

/**
  *显示纸牌，
  *@property info 卡牌信息，
  *@property isSelect 是否选中
  */
CardUI.prototype.show = function (info, isSelect){
    var self = this,
        o =self.gameObject;
    if(info){
        o.frame = info.icon;
        o.resetNativeSize();
        o.visible = true;
        self.info = info;
    }
};

/**
  * 选中纸牌，纸牌上移
  */
CardUI.prototype.onClick = function (){
    var self = this;
    if(self.isSelected){
        this.gameObject.anchoredY = 0;
    } else {
        this.gameObject.anchoredY = -28;
    }
    self.isSelected = !self.isSelected;
    var ui = window.landlordUI ? window.landlordUI : window.olLandlordUI;
    if(ui.getReadyCardsKind()){
        ui.playBtn.state = qc.UIState.NORMAL;
    } else {
        ui.playBtn.state = qc.UIState.DISABLED;
    }
};

　　2、玩家预制：完成之后发现这个并不是很必要，因为是一开始都固定的，游戏中不会添加改动。比如右边玩家，如下图：

　　

　　每个玩家下都要挂载一个脚本，主要是方便我们后面去查找它的内容，这个比如修改分数，修改手牌数之类的操作，代码如下：

// define a user behaviour
var PlayerUI = qc.defineBehaviour('qc.engine.PlayerUI', qc.Behaviour, function() {
    // need this behaviour be scheduled in editor
    //this.runInEditor = true;
    this.player = null;
}, {
    headPic : qc.Serializer.NODE,
    playerScore : qc.Serializer.NODE,
    cardContainer : qc.Serializer.NODE
});

　　3、信息预制：这个预制只是个文字，做这个预制主要用于叫分出牌的时候，比如给某个玩家显示 2分 、不叫、 不出之类的信息，这样直接加入不需要再去设置字体大小的信息。

　　布局设计

　　单机模式场景，我大致划分为以下几个模块，具体可以使用青瓷引擎编辑器打开，这种所见即所得的工具应该很快就能了解整个场景界面的布局设计,如图：

　　

　　

四、添加图形资源

　　导入图形资源并打包图集(点击我看文档),

　　将所有的扑克牌图形资源到Assets/atlas/poker@atlas下,身份头像图形资源到Assets/atlas/landlord@atlas,按钮图形资源到Assets/atlas/btn@atlas。

　  做完这些准备我们就可以进行做发牌的了，我将会在下一篇文章分享这些内容