Hilo学习笔记 (4)-照葫芦画瓢做游戏1
1.index.html
总体看一下index.html文件结构,符合 结构 样式 行为 分离的设计思想。
html 负责结构
css 负责样式
js 负责行为
<!doctype html>MyTest
<!doctype html> 是Html5的标准网页声明.原先的是一串很长的字符串，现在是这个简洁形式，支持html5标准的主流浏览器都认识这个声明。
script 标签在head 里. js文件声明在其中. body 中没有内容.
可提供有关页面元信息, 比如针对搜索引擎和更新频度的描述和关键词
永远位于文档的头部, 不包含任何内容. 它的属性定义了与文档相关联的名称/值对.
必须的属性 content ;定义与 http-equiv 或 name 属性相关的元信息
可选属性:
http-equiv 把 content 属性关联到 HTTP 头部。
name 把 content 属性关联到一个名称。
scheme 定义用于翻译 content 属性值的格式。
标签用于为 HTML 文档定义样式信息。规定在浏览器中如何呈现 HTML 文档。
type 属性是必需的，定义 style 元素的内容。唯一可能的值是 "text/css"。
media 可选,为样式表规定不同的媒介类型。
如需链接外部样式表，请使用 <link> 标签。
标签定义文档与外部资源的关系。
标签最常见的用途是链接样式表。
link 元素是空元素，它仅包含属性。
此元素只能存在于 head 部分，不过它可出现任何次数。
href 规定当前文档与被链接文档之间的关系。
rel 规定被链接文档的位置。
apple-touch-icon : 苹果为iOS设备配备了apple-touch-icon私有属性，添加该属性，在iPhone,iPad,iTouch的safari浏览器上可以使用添加到主屏按钮将网站添加到主屏幕上，方便用户以后访问。apple-touch-startup-image 也是iOS系统的, 因为:对于IOS的图标，icon属性无效，需使用 apple-touch-icon and apple-touch-startup-image 。
body,div,canvas{image-rendering: optimizeSpeed;-webkit-image-rendering: optimizeSpeed;-webkit-interpolation-mode: nearest-neighbor;}body{padding:0;margin:0;font-size:12px;background-color:#fff;}body,html{height:100%;}
整体是定义html页面的样式。
image-rendering: css属性,用于设置图像缩放算法。它适用于元素本身，适用于元素其他属性中的图像，也应用于子元素。
optimizeSpeed 浏览器在绘制文本时将着重考虑渲染速度，而不是易读性和几何精度. 它会使字间距和连字无效。
-webkit-image-rendering 和 -webkit-interpolation-mode 这些属性可能只用于iOS (iPhone和iPad)。
nearest-neighbor 临近算法, 低质量; bicubic (高质量)
padding 简写属性在一个声明中设置所有内边距属性。
margin 简写属性在一个声明中设置所有外边距属性
font-size :文字大小
background-color : 背景色
如果您在使用 JavaScript，可以使用下面两种属性：language = "JavaScript" 或 type = "text/javascript"
src : 规定外部脚本文件的 URL。
整体:
(function(){ })()
匿名,自运行的.
{}中编写业务逻辑.
vargame=window.game={ width:0, height:0, asset:null, stage:null, ticker:null, state:null, score:0, bg:null, ground:null, target:null,//todo:填充方法};})();
window.onload:用于页面加载完毕后立即执行的操作. 初始化.
window.game中window为什么能够直接.出对象/方法,是因为window是全局变量,表示当前打开的窗口.
w h 定义宽高
asset 等定义未来可能用到的操作类变量.
bg 等定义页面元素变量.
init:function(){this.asset =newgame.Asset();this.asset.on('complete',function(e){this.asset.off('complete');this.initStage(); }.bind(this));this.asset.load(); }
使用Asset类来下载完图片素材后，再调用initStage方法初始化舞台：
通过game.Asset();调用Asset类
(function(ns){ Mixes: Hilo.EventMixin, queue: null, load: function(){ var resources = [ {id:'bg', src:'images/bg.png'}, {} ];})(window.game);
参数ns什么意思没明白
定义变量, 用逗号分割, id标识, src定义路径.
定义函数 load: function(){} , 用,分割, 其中的定义变量,用;结束.
(window.game)
this.queue = new Hilo.LoadQueue();this.queue.add(resources);this.queue.on('complete',this.onComplete.bind(this));this.queue.start();
加载队列 - 用LoadQueue预加载图片等资源。
resources是我们要下载的图片素材列表，使用queue.add()方法把素材列表加入到下载队列中，再使用queue.start()方法来启动下载队列。
LoadQueue提供了三个事件：
load - 当单个资源下载完成时发生
complete - 当所有资源下载完成时发生
error - 当某一资源下载出错时发生
onComplete: function(e){ this.bg= this.queue.get('bg').content; this.aquarium= this.queue.get('aquarium').content; this.ready= this.queue.get('ready').content; this.feedAtlas= new Hilo.TextureAtlas({ image: this.queue.get('feed').content, frames: [], sprites:{} }) }
content 连接字符串的方法
仅监听complete
纹理集TextureAtlas实例由三部分组成:
image 纹理集图片。
frames - 纹理集图片帧序列。每个图片帧由图片在纹理集中的坐标x/y和宽高width/height组成，即[x, y, width, height]。
sprites - 精灵定义。sprites可包含多个精灵定义。每个精灵由多个frames中的图片帧组成，其中数值代表图片帧在frames中的索引位置。比如bird，则由索引为0、1、2的图片帧组成。
0: {image:number, rect:[0,0,60,91]},
rect 创建矩形
this.queue.off('complete');
this.fire('complete')
scale 规模
stage 舞台
