一 .创建Hilo 游戏工程
运行 npm install -g yo
运行 npm install -g generator-hilo
运行 yo hilo
经过以上几步会创建Hilo的预置初始工程，接下来你建造属于你的游戏吧。
问题及解决:
npm安装yo,一直停留在deprecated request@2.88.2:
原因
资源问题，没有配置淘宝镜像
解决
①配置淘宝镜像 ：
npm config set registry https://registry.npm.taobao.org
②重新安装，即可成功
4. 输入自自定义的信息, 如: 项目名、名字、邮箱、 readme、 等 一路回车 .
然后生成符合框架的目录:
need-to-insert-img
二. 熟悉框架和编写规范.
[阅读index.html src 等]
<head>
....
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="...">
</head>
<style>
html,body{
margin: 0;
padding: 0;
}
...
#gameContainer{
width: 320px;
height: 400px;
margin: 20px auto;
position: relative;
}
#loading{ ... }
</style>
</head>
<body>
<div id='gameContainer'>
<div id='loading'>loading...</div>
<div id='stageContainer'></div>
</div>
<script src='src/js/requirejs/require.js'></script>
<script>
requirejs.config({
baseUrl: 'src/js/',
paths:{
'hilo':'hilo/hilo'
}
});
requirejs(['mygame/game'], function(game){
game.init(document.getElementById('stageContainer'));
});
</script>
</body>
</html>
1. Meta 对象 : 代表 HTML 的 一个 <meta> 元素。
<meta> 元素可提供有关某个 HTML 元素的元信息 (meta-information)，比如描述、针对搜索引擎的关键词以及刷新频率。
属性 描述
content设置或返回 <meta> 元素的 content 属性的值。
httpEquiv把 content 属性连接到一个 HTTP 头部。
name把 content 属性连接到某个名称。
scheme设置或返回用于解释 content 属性的值的格式。
2. <style> 样式标签
margin '边缘'的意思.在一个声明中设置所有外边距属性.
padding "填补"的意思; 内边距属性。 说明 这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度.
这个意思就是 页面 的起始位置是在 0 坐标处,就是左上角. 内边距是0;
扩展 : margin 可以有4个参数, 例子: margin:2cm 4cm ; 第一个越大越往下, 2越大越右,
3. #gameContainer 和 #loading 锚点
定义了下面div的格式, div有id,通过其进行关联
4.<script src='src/js/requirejs/require.js'></script> 定义了配置文件requirejs的路径
属性规定外部脚本文件的 URL。
URL外部脚本的 URL。
可能的值有：
绝对 URL - 指向其他站点（比如 src="www.example.com/example.js"）
相对 URL - 指向站点内的文件（比如 src="/scripts/example.js"）
5. requirejs配置模块,
配置文件的位置和声明用法是相对于Requires这个脚本文件来决定的。假如配置文件在Requires脚本的下方，则可以这样使用：
baseUrl所有模块的查找根路径。
pathspath映射那些不直接放置于baseUrl下的模块名(这相当于跟冗长的模块名取个简介的名字)
'hilo':'hilo/hilo' = E:\mini-game\src\js\hilo\hilo
6. requirejs([xxx', 'yyy'], function ())
前端模块化能解决的问题:
模块的版本管理
提高可维护性 -- 通过模块化，可以让每个文件职责单一，非常有利于代码的维护
按需加载 -- 提高显示效率
更好的依赖处理 -- 传统的开发模式，如果B依赖A，那么必须在B文件前面先加载好A。如果使用了模块化，只需要在模块内部申明依赖即可。
RequireJS是一个JS的文件和模块加载器。专门为浏览器优化，同时也支持其他JS环境
使用RequireJS
要想使用requireJS，首先需要在页面引入脚本：
<script src="assets/vendor/require/require.js"></script>
接下来，书写脚本：
<script>
requirejs(['js/a'], function(a){
alert(a.test);
});
</script>
7. 另外
主模块的写法
如果主模块不依赖其他模块。可以直接写入js代码，但这样的话其实没必要使用requirejs
//main.js
alert("加载成功");
如果依赖其他模块，就要写成：
// main.js
require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
// some code here
});
require()函数接受两个参数。第一个参数是一个数组，表示所依赖的模块，上例就是['jquery', 'underscore', 'backbone']，即主模块依赖这三个模块；第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块。
require()异步加载jquery, underscore，backbone，浏览器不会失去响应；它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题。
网友评论