随笔分类 - html5
html5
摘要:如何应用 matrix3d 映射变幻 先上 demo 记得是在 2015 看到过的一个 html5 演示效果, 很惊艳 当时没明白如何实现,现在我会了,做一个类似的: 又弄了一个拖动的 demo 我数学真的很差 “你好老师!学这个矩阵具体有什么用?” 老师喝着水貌似想了一会儿回答:“考试用”.. 这
阅读全文
摘要:2D物理引擎 Box2D for javascript Games 第五章 碰撞处理 碰撞处理 考虑到 Box2D 世界和在世界中移动的刚体之间迟早会发生碰撞。 而物理游戏的大多数功能则依赖于碰撞。在愤怒的小鸟中,小鸟摧毁小猪的城堡时,便是依赖碰撞而实现的; 在图腾破坏者中,当神像坠落到图腾上或摔碎
阅读全文
摘要:2D物理引擎 Box2D for javascript Games 第四章 将力作用到刚体上 将力作用到刚体上 Box2D 是一个在力作用下的世界,它可以将力作用于刚体上,从而给我们一个更加真实的模拟。 但是,如果你想要移动刚体,发射子弹,抛掷小鸟,驾驶汽车和当你在玩物理游戏时你看到的一切令人起劲的
阅读全文
摘要:以前微信浏览器内想要直接唤醒 app 要么接微信的应用宝要么你是腾讯的干儿子。 而在微信在2020年5月分推出了“微信开放标签”功能 wx-open-launch-app 用于微信浏览器内直接唤醒 app ,也可通过携带参数直接进入app相应的内页。 现在不是干儿子,只要按照规定接入微信SDK就直接
阅读全文
摘要:此章为非原书内容,是为了后续章节需要新增的一章 注意由于 Javascript 版改写需要,原书第七章去掉,改为提前至番外篇,番外篇讲的其实是类似“为游戏添加皮肤” 的内容 原第七章删除后,第七章内容实际为原书第八章 2D物理引擎 Box2D for javascript Games -- 番外篇
阅读全文
摘要:2D物理引擎 Box2D for javascript Games 第三章 刚体的交互 刚体的交互 基于Box2D的游戏都有各自的一套刚体交互方法。 图腾破坏者(Totem Destroyer)和红 砖移除(Red Remover)允许玩家通过鼠标点击来销毁刚体,然而愤怒的小鸟(Angry Bird
阅读全文
摘要:2D物理引擎 Box2D for javascript Games 第二章 向世界添加刚体 有了刚体(Bodies)才能创建 Box2D 游戏。任何你可以移动的或交互 的对象都是刚体(Bodies)。 愤怒的小鸟(Angry Birds)中创建的小鸟和小猪是刚 体,同样在图腾破坏者(Totem De
阅读全文
摘要:2D物理引擎 Box2D for javascript Games 第一章 我要的是能在H5页面上跑的 javascript 版的 Box2D 啊!!! 最近想学习 Javascript 版本的 Box2D JS 物理引擎,无奈搜了半天也没找到相对比较系统的资料 官方网站也只是简单的介绍,找到一本别
阅读全文
摘要:2018更新 iphone X 的设计内容 我保证你一分钟就能看完这篇文章! 真的.. 角色解释: 需求方:有钱大爷 设计人员:美工殿下 前端工程师:前端文艺青年 一个HTML5页面从提出到完成上线的流程: 1、需求方、设计人员、H5实现人员三方共同讨论实现方案 2、设计人员出设计图 3、H5人员按
阅读全文
摘要:榕树下网站本身的技术人员并不多,所以app开发的任务就到了母公司盛大文学这边。盛大文学无线业务中心负责这次具体开发任务。一如既往的,开发的情况是:时间紧,任务重,人手少技术选型为了同时上线Android和IOS平台,所以选择了hybrid这种Native与HTML5混合的方式。Native的优点是效...
阅读全文
摘要:How to use icon fonts in your mobile apps在任何APP设计中实现可图形的矢量缩放最完美的方式是使用字体图标.移动端的设计变的越来越复杂。原因在于多样的屏幕尺寸与不同的分辨率。 Native版APP几乎无法提供像素级别完美的视觉体验。当我们设计APP界面中各种图...
阅读全文
摘要:先简单介绍两款常用但需要一定条件或限制的工具1、如果你能FQchrome在32版本后就自带了移动端调度工具,可以在Android直接联调,但唯一遗憾的是,在我大天朝要FQ后才能行的通,我自己试了后公司好几个机器联不上…2、如果你有苹果电脑和iphone苹果电脑上的safari 6.0版本后就可以直接...
阅读全文
摘要:一开始以hybrid形式做了一个android的小说阅读客户端,叫4G阅读。而后由于业务需求,要迅速实现纯手机html5 版的,所以就直接在原先客户端内内嵌的网页进行改版,快速实现以后在优化的过程中发现越改越多越改越多…注意此web应用只支持android及iphone内的浏览器,及PC或mac上的...
阅读全文
摘要:本文翻译自html5rock上的文章,文章英文原版地址在最后给出。文中的Paints我翻译成渲染绘制,我自己是这么理解。开始绘制(渲染)一个网站或者一个应用的元素对浏览器来说开销是很大的,它会对运行时的效率产生负面影响,在这篇文章中我们将快速的过一遍,哪些情况会导致导致绘制事件在浏览器中产生,以及如...
阅读全文
摘要:对于html5移动端网页编写CSS网上有很多介绍的文章,但在实际使用过程中还是会纠结.网上的资料太多,且大多都是技术介绍型,特别是针对android上,网上写的各种麻烦,各种复杂,各种不接地气儿...我在做移动端网页时,总是和美工设计的页面有出入,主要还是由于双方对移动端HTML5实现页面还了解还不够。今天就研究一下各大互联网公司对于移动端页面的处理方式。主要研究对象:BAT(度娘,阿狸,企鹅)这几家的移动端网站或webapp主要研究点:viewport的设置,字体的设置,图片原始宽高设置汝甚吊,令尊知否?咦?target-densitydpi呢?网上有老复杂的计算,针对不同的屏幕分辨率,通过
阅读全文
摘要:这个标题取的有点奇怪,怪我翻译的有问题吧。英文学平有限,有道词典和google翻译齐上阵是必须的。还好翻译的不是小说,对于技术文章,还是能勉强翻过来的。本文主要讲解了Bootstrap3.0的栅格布局系统实现原理,以及使用过程中应该注意的问题。开始...翻译..像CSS栅格系统原理这类东西本应该藏在帘子后面,你直接用就可以了,没必要去了解其背后的工作原理,除非你有了比较烂的设计或者一些比较复杂的东西,当你无法找出spacing,margin,padding等这些补白全都乱的原因,那就真的很苦逼了,尤其是在某些动态改变和变化的UI上。在关于bootstrap的栅格系统工作原理上我见过很多人都对它
阅读全文
摘要:之前在mac上安装调试过phonegap,现在公司用的是windows7,所以不得不再进行一次windows下的配置工作,顺便也写下来了主要麻烦的地方是要在win7下添加好几个环境变量,这一块地方特别要小心添加步骤挺多的,给你打镇强心剂,看最终成功运行效果先,我还测试集成了某个广告联盟的SDK,如图:开始吧...注意:我下面如果给出的官方下载地址,请您自行去下载,因为我的win7是64位的,可能与你的有点不同。你得下载正确的安装包1、下载nodeJS,并安装Nodejs官方下载地址:http://www.nodejs.org/一步步安装完即可2、下载androidsdkAndroidsdk下载
阅读全文
摘要:额,这个标题取的还真是挺装的...其实我想表达的是jquery click事件如何在移动端自动转换成touchstart事件。因为移动端click事件会比touchstart事件慢几拍移动设备某个元素上事件执行顺序是:touchstarttouchmovetouchendclick{mousedown->mousemove->mouseup}click事件在移动设备上虽然会识别但却是最后一个执行的,所以如果不把click事件换成touchstart事件的话,就可能造成延时导致交互上也慢了几拍所以在移动端最好把click事件换成touchstart事件。那么如何添加事件比较简单呢.于
阅读全文
摘要:最近突然想弄一下phonegap,之前一直是听说,没亲自配置开发过。结果配置过程非常艰难啊。特别是android平台的配置,那叫一个麻烦,网上搜了半天都没找到非常好的资料。文章也都是抄来抄去,最烦的就是抄来抄去的文章,没亲自测试过就转发了,你转发个毛线啊。事实证明还是得自己亲自解决,花了两天时间终于搞定。写下这篇文章希望对想开发phonegap的同学有所帮助。最新的phonegap貌似用的是nodejs开发的共有以下几个步骤:安装nodejs环境、安装phonegap、安装xcode、安装android SDK跟我进入安装phonegap的艰难之旅吧。。文章有点长不喜勿看安装phonegap3
阅读全文
摘要:浏览器新提供的performance接口精确的告诉我们当访问一个网站页面时当前网页每个处理阶段的精确时间(timestamp),以方便我们进行前端分析。它是浏览器的直接实现,比之前在网页中用js设置Date.time或者cookie来分析网页时间上要精确很多。以下是w3c提供的performance.timing各阶段api图暂时的缺点:Navigation Timing stops at the window.onload event现代的网站很多是在onload之后再发触发更多的异步请求,而navigation Timing统计却只在window.onload之后就不统计了 。为什么不在所
阅读全文