24haowan_game_tpl
对应的Github地址:https://github.com/GuangZhouShanyouGame/24haowan_game_tpl
该库主要存储平台玩法库的玩法代码,也即是每个模板对应的活动页的代码都在里面。比如画符小恐龙,投票模板都在这上面。
上面是库中对应的所有模板的代码,可以看到上面只有20款左右的模板,而我们平台将近90款模板。这是因为这是一个新的仓库,属于新的开发流程。原来的70款游戏在旧的库上面,用的是旧的开发流程。关于旧的模板,之后会提到。
每个模板都会对应着一个模板ID,比如上面的投篮比赛
对应的ID值是61。对应的目录结构如下
.
|—— basketball_61
├── index.json
├── index.php
└── static_resource
├── fonts
│ └── score.otf
├── images
│ ├── background.png
│ └── ...
├── js
│ └── main.js
└── music
├── bgm.mp3
└── ...
上面的目录结构是我们大多数模板的典型结构。文件夹的命名方式都是统一的,通过模板名字+ID
命名,每个文件夹都包含了模板的所有代码。
index.php
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0">
<!-- 引入公共头部 -->
<?php include("modules/head.php") ?>
</head>
<body>
<div class="game-tpl-container">
<!-- 投篮小游戏 分数类 Phaser -->
<?php require_once('main.php'); ?>
<div id = "game_div"></div>
<script src="//24haowan-cdn.shanyougame.com/public/js/phaser-2.6.2.min.js"></script>
<script type="text/javascript" src="/static_resource/js/main.js?v=<?php echo Yii::app()->params['version']; ?>"></script>
</div>
</body>
</html>
index.php是整个游戏的入口,在工作台预览页的游戏页面以及发布游戏后的推广链接都是以此作为入口
通过head.php引入通用的样式,通过main.php引入游戏内通用的界面。因为投篮游戏是基于canvas的,所以上面的game_div里面并没有看到游戏的HTML结构
static_resource
这是模板的资源文件夹,命名强制,必须是static_resource
。主要用于存放模板的静态资源。构建代码的时候,自动化脚本会匹配到static_resoure
并把里面的资源上传到CDN上。static_resource
下面的资源不强制命名,但是一般我们会在static_resource
下面存放JS,CSS以及图片音频等资源。
main.js
编写模板的逻辑代码。如果你查看不同模板的JS代码,你会发现JS里面会有一部分通用的代码,这是我们模板中抽离出来的通用代码,如果是开发Phaser.js游戏时,我们有一个Phaser的模板脚手架,如果是开发原生dom的模板,我们会有一个dom的脚手架。这两个脚手架相对于模板关系有点类似于vue-template对于vue项目的关系,都是抽离了开发过程中一些琐碎但是又通用的代码出来,作为复用,在每次开发新模板的时候都基于这些脚手架会使得效率更高。
关于更多脚手架的描述之后会提到。