主题：游戏上线

1.模板开发及上线说明

1.1.本地开发

说明：本地开发只包含开发游戏逻辑，不包含接入平台接口。脚手架中注释带“测试用”的代码块在上线前需注释或删除，是本地开发用的；注释带“上线用”的代码块在上线前请启用，本地开发时不需要，可先注释掉。

基于平台提供的脚手架来开发：

1.2.模板上线说明

1.2.1. 查询模板ID并占用

分配模板ID的原则：1、当前数据库无此ID记录；2、未将此ID分配给其他人

1.2.2. 编写配置表

参考以往游戏配置表：配置表-投票模板

查看配置表详细说明：配置表详细说明

关于配置表，建议复制一份旧的出来，在旧的基础上进行修改。

注：游戏配置表必须命名为index.json，命名规则请看2.2.5

1.2.3.修改页面结构

把html格式转成php格式，命名为index.php，命名规则请看2.2.5

页面修改说明：

在头部引入公共部分 head.php
在页面内引入公共部分main.php
资源链接前面要加上/static_resource/，服务器会将其替换成CDN的地址
资源链接后面要加上?v=<?php echo Yii::app()->params['version']; ?>，目的是刷新缓存

DOM页面示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="telephone=no, email=no" name="format-detection">
    <!-- 引入公共头部 -->
    <?php include("modules/head.php") ?>
</head>
<body>
    <div class="game-tpl-container">
        <!-- 车票生成器 生成类 DOM -->
        <!-- 相关CSS -->
        <link rel="stylesheet" href="/static_resource/css/ticketGenerator.css?v=<?php echo Yii::app()->params['version']; ?>">
        <div id="game_div">
            <!-- 自定义DOM -->
        </div>
        <?php require_once('main.php'); ?>
        <!-- 相关JS -->
        <script type="text/javascript" src="/static_resource/js/main.js?v=<?php echo Yii::app()->params['version']; ?>"></script>
    </div>
</body>
</html>

Phaser页面示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="telephone=no, email=no" name="format-detection">
    <!-- 引入公共头部 -->
    <?php include("modules/head.php") ?>
</head>
<body>
    <div class="game-tpl-container">
        <!-- 2048 通关类 Phaser -->
        <?php require_once('main.php'); ?>
        <div id="game_div"></div>
        <script src="//24haowan-cdn.shanyougame.com/public/js/phaser.min.js"></script>
        <!-- 相关JS -->
        <script type="text/javascript" src="/static_resource/js/2048/main.js?v=<?php echo Yii::app()->params['version']; ?>"></script>
    </div>
</body>
</html>

1.2.4. 接入平台接口

主要操作为将脚手架中注释带“测试用”的代码块注释或删除，注释带“上线用”的代码块启用。
此阶段接口在本地无法测试，需要部署到平台后才可在内网测试。
修改图片、音效等资源的路径。

引入hwsdk，如下代码所示。把原来的所有代码放到原来全部代码下。

require(["base/hwsdk"], function(hwsdk) {
 // 初始化hwsdk
 hwsdk.init();

 //原来全部代码

//启动游戏
 gameManager = new Game(bestScore, configJson, 'game_div');
 orientationChange(hwsdk.getDeviceOrientation());
 //绑定屏幕旋转事件
 hwsdk.onOrientationChanged(orientationChange);
 //根据设备屏幕方向启动游戏与否
 function orientationChange(direction) {
     if (direction == "portrait") { // 手机竖屏
         hwsdk.hideRotateMask();
         if (!gameManager.isInit) gameManager.init();
     } else if (direction == "landscape") {  //手机横屏
         hwsdk.showRotateMask();
     } else if (hwsdk.detectDevice() == "pc") { //PC直接启动
         gameManager.init();
     } else if (direction == "undefined" && hwsdk.detectDevice() == "mobile") {
         //PC开发者工具手机模式直接启动
         gameManager.init();
     }
 }
});

调用合适的接口。主要调用接口：
hwsdk.showStartPage 显示开始页
hwsdk.hideStartPage 隐藏开始页
hwsdk.requestGameScore 提交分数
hwsdk.requestLottery 抽奖
hwsdk.setWxShare 设置微信分享参数
…… 如果想要了解更多关于如何调用接口，请查看HWSDK文档
如有特殊需求，需要自定义开始页、结束页等，请查看如何自定义通用界面

示例代码：main.js

1.2.5. 上传代码与资源

代码结构如下

24haowan_game_tpl           // git库
└── game_name_24            // 代码目录(强制命名方式：游戏名_模板ID, 游戏名必须全部英文小写，以"_"分隔，如飞机大战，plane_war_51)
    ├── static_resource     // 资源文件目录(强制命名)
    │   ├── js              // js代码目录(非强制命名)
    │   │   └── xxx.js
    │   │   └── ...
    │   ├── css             // css代码目录(非强制命名)
    │   │   └── xxx.css
    │   │   └── ...
    │   ├── ...
    ├── index.php           // 游戏页面文件(游戏的入口文件, 强制命名)
    └── index.json          // 游戏配置表(强制命名)

示例代码
代码上传的github库为：24haowan_game_tpl (放在git库的根目录下)

index.json配置表中，除了游戏相关的新信息，还需增加一个db_info字段, 具体内容如下:

  "db_info" : {
      "name" : "游戏模板名称",                        // 游戏模板名称，必填
      "describe" : "游戏描述",                        // 游戏描述，必填
      "type" : 5,                                     // 游戏类型，必填
      "lable" : "生成|测试",                          // 游戏标签，必填
      "game_img" : "/static_resource/img/index.png"   // 游戏横幅，必填
  }

资源文件访问路径

资源文件访问路径: /static_resource/...
注意：代码中的变量名、函数名等非资源地址的不允许出现 /static_resource/(构建工具在构建时，会全局替换/static_resource/，如果非资源文件地址出现该字符串，也会被替换，最终会导致代码异常)

把game_name_id整个目录复制到共享目录game_tpl下，通过[构建工具]来构建，然后可以进行测试。每次修改代码后都要重新手动构建，再进行测试。

1.2.6 内网测试

主要检查项:

模板库中是否正常显示新活动
模板详情信息是否正确
模板详情左侧默认活动是否正常运作
是否能创建一个活动
工作台是否正常渲染
测试地址中游戏是否正常运作
发布后到手机上游戏是否正常运作
与平台接口是否正常运作（如新接口则需要联调）

1.2.7. 发布代码

在24haowan_game_tpl仓库下新建一条分支，把代码复制到24haowan_game_tpl仓库下，push到这条新分支上，发起pull request。让相关同事审核代码。

1.2.8. 上线到外网

合并分支到master并更新到外网
在外网管理后台添加模板信息并上线（至此外网用户已可以定制该游戏）

新模板开发