Layabox引擎开发H5打地鼠游戏（一）

第一节 构造打地鼠界面

1. 创建项目并导入资源；
2. 制作打地鼠界面；
3. 加载资源并显示界面；

代码及相关资源下载

创建项目并导入资源

创建项目

本项目没有用到下图文件夹原有的组件，将图片全部删除
导入图片

制作打地鼠界面

切换到ui编辑界面



将背景拉到面板，选择水平居中和垂直居中

接下来要添加组件，为了避免进行了错误操作，建议把背景锁着

把老鼠拖动到洞里

对被揍的地鼠设置var为hit（如果图片叠在一起难以选中，可以先选择隐藏其他图片再进行操作）

对常态地鼠进行相似操作 命名var为normal

将三个组件设置为一个容器box

加载资源并显示界面

导出代码（？）

导出生成的东西：


默认512*512 超过大小图片会显示不打包 宽高可以自行修改

---

注意：两个目录可以修改 不要随意修改 路径要和index.html同级 不然会读取不到资源

发布出来的资源要和index.html同级，否则会读取不到

---

LayaUISample.js

var LayaUISample = (function(){
        (function(){
              //初始化引擎
              Laya.init(800,600);
              //设置stage颜色
              Laya.stage.bgColor = "#ffcccc";
              //加载资源
              Laya.loader.load("res/atlas/comp.json",Laya.Handler.create(this,onLoaded),null,Laya.Loader.ATLAS);
        })();
        function onLoaded(){
            var game=new Game();
            Laya.stage.addChild(game);
        }
})();

Game.js

var Game=(function(_super){
   function Game(){
       Game.super(this);
   }
   //注册类
   Laya.class(Game,"Game",_super);
   return Game;
})(ui.GameUI);

按照创建目录、制作界面、导入资源的方法，在LayaUISample.js运用了comp.json，但本人实践的时候并没有生成json，存在一个comp.atlas，将它的路径名改了然后运行。

成功显示