美文网首页
Hilo学习笔记 (4)-照葫芦画瓢做游戏1

Hilo学习笔记 (4)-照葫芦画瓢做游戏1

作者: 高大强19 | 来源:发表于2020-03-25 21:52 被阅读0次

    1.index.html

    总体看一下index.html文件结构,符合 结构 样式 行为 分离的设计思想。

    html 负责结构

    css 负责样式

    js 负责行为

    <!doctype html>MyTest

    <!doctype html> 是Html5的标准网页声明.原先的是一串很长的字符串,现在是这个简洁形式,支持html5标准的主流浏览器都认识这个声明。

    script 标签在head 里. js文件声明在其中. body 中没有内容.

    meta 标签 

    可提供有关页面元信息, 比如针对搜索引擎和更新频度的描述和关键词

    永远位于文档的头部, 不包含任何内容. 它的属性定义了与文档相关联的名称/值对.

    必须的属性 content ;定义与 http-equiv 或 name 属性相关的元信息

    可选属性:

    http-equiv 把 content 属性关联到 HTTP 头部。

    name 把 content 属性关联到一个名称。

    scheme 定义用于翻译 content 属性值的格式。

    style标签

    标签用于为 HTML 文档定义样式信息。规定在浏览器中如何呈现 HTML 文档。

    type 属性是必需的,定义 style 元素的内容。唯一可能的值是 "text/css"。

    media 可选,为样式表规定不同的媒介类型。

    如需链接外部样式表,请使用 <link> 标签。

    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。

    2. 主函数game.js

    整体:

    (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类

    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 舞台

    相关文章

      网友评论

          本文标题:Hilo学习笔记 (4)-照葫芦画瓢做游戏1

          本文链接:https://www.haomeiwen.com/subject/nhrfuhtx.html