H5 游戏开发:横屏适配

2017/10/31 · HTML5 · 1
评论 ·
横屏,
游戏

原文出处:
凹凸实验室   

对于移动端的轻量级 HTML5 互动小游戏(简称为 H5
轻互动),如果从屏幕呈现模式来划分的话,可以归类为:竖屏式和横屏式。

 

图片 1

HTML5互动小游戏案例截图

平常我们做过的需求里,主要是以竖屏式为主,而横屏式较少。对于竖屏式场景来说,大家的经验会比较丰富,因此,此次主要式探讨下横屏式场景下的一些需要注意的点,特别是怎样去做横屏适配。

对于 H5 轻互动游戏来说,要实现横屏的话,主要是解决两点:
1.无论用户手持方向如何,都需要保证屏幕横向显示。
2.由于屏幕分辨率的多样化,因此就算是横屏下也是需要进行横屏适配,保证画面在所有分辨率下都能够合理适配。

下面,我们针对这两点分别阐述如何解决。

HTML5终极指南:2012年的14个预测

2011/12/23 · HTML5 ·
HTML5

来源:IT经理网

无论是当红科技企业如Zynga、Facebook、Google和Apple,还是刚刚诞生的初创企业,2012年都是决胜HTML5的一年。以下是关于HTML5在2012发展趋势的大胆预测:

一、欢迎来到更加互联的Web世界

2012年,html5
将增加更多有用的开放接口API,供开发人员使用,让网站之间的连接更加紧密。

例如,Facebook上的Zynga游戏在iFrames里运行。通过调用最新的PostMessage
API,这些游戏能在Facebook包容框架内互相之间通讯。在HTML5之前,不同窗口之间的通讯需要依赖远程服务器——或者使用不稳定的破解方法。

另外一个让人兴奋的新功能是CORS(Cross Origin Resource
Sharing)。这是不同网站之间分享信息变得非常容易。例如,CORS将允许初创企业开发出一种能够编辑facebook图片的编辑服务,允许你修改之后再上传,无需通过糟心的破解途径。

基于HTML5的的语义信息(例如Semantics和Microdata)创建提取web页面信息的web工具变得更加容易。因此,将有大量的Mashup混搭服务出现,出色的浏览模式也将越来越多(例如readers阅读器和translators)

图片 2

二、Web浏览器看上去更像iPhone

每个人都喜欢苹果的iOS操作系统。现在你可以在HTML5上看到了。2012年你的右脸其将开始支持push
notifications通知服务,geolocation地理位置服务,以及可以离线使用的应用程序。有些浏览器可能会采用更加类似iOS的用户界面。

三、越来越多的应用程序将基于HTML5创建,而不是以可下载应用程序的方式出现(例如金融时报的客户端)

你可能已经在使用电子邮件、日程和图片分享等web应用程序,2012年将有更多类型的程序推出HTML5版本。你将看到类似Inkscape和Illustrator这样的内容创建程序也开始支持HTML5。

四、IE浏览器和微软将变得“酷”很多

微软对浏览器 IE 已经投入了巨资,并且很多资金用于提升
html5的性能,未来将在
IE10上有所体现。IE10凭借Canvas硬件加速功能将在速度测试上击败所有其他浏览器竞争对手。此外微软还在HTML5页面与桌面电脑的功能整合方面别具匠心,并最终推动HTML5应用的开发热情。

五、浏览器厂商将推出应用程序商店业务

看到苹果公司的移动应用商店 App Store 的巨大成功,并且结合 html5
的日渐成熟,未来浏览器厂商将会构建自己的网络应用商店 Web App
Store,从而对苹果公司应用商店可能构成冲击。其实,谷歌公司的
谷歌浏览器Google Chrome
已经推出了网络应用商店。这个趋势对于HTML5应用开发者来说是个好事——这意味着程序将有更多的销售机会,尽管不同平台的支付平台和分账机制还未就绪。

六、至少有一个基于WebGL的重量级主机游戏会发布(再发布)

2012年至少有一个AAA级别的主机游戏公司会迈出这一步,发布一款基于WebGL的,无需客户端的3D
web游戏。也可能采用重新发布一部游戏大作的方式(例如团队要塞2或者刺客信条),或者是一款流行的多人在线游戏如魔兽世界,当然也有可能直接发布一款全新游戏。

七、多数应用都将通过离线缓存来支持离线工作

离线缓存技术将会迅速提高 html5
的可用性和应用范围。基于缓存而不需要联网,就可以查询本地数据库和服务,这一方面能提高HTML5应用的运行速度,提供类似传统桌面应用的流畅性,同时也能带来一些安全性话题,例如你可能在清理计算机缓存的时候不小心擦除掉你正在处理的文档或者工作进度,或者为恶意软件远程访问你电脑上的私密数据打开方便之门。

八、HTML5广告将取代Flash广告变得无处不在

html5 广告可以兼容 Flash广告,随着致力于基于 html5
提供各方面技术和工具以及各种服务的创业公司不断涌现,HTML5广告面临的沙盒问题、安全问题以及认证工具等问题都将得到解决。

九、JavaScript 随着内存管理和数据类型的改进而提高运行速度

JavaScript已经是世界上运行最快的脚本语言之一了,但还是有提高空间。Google
Chrome已经开始着手推动更好的内存管理和垃圾收集算法。加之更优秀的数据类型管理,Javascript将获得与Java等成熟语言较为接近的性能表现。

十、Canvas硬件加速技术将被应用于多种浏览器(但不会是主流浏览器)

其他浏览器厂商都会学习微软引入硬件加速技术,不这么做就会显得落伍。火狐浏览器面临的形式最为严峻,如若不引入硬件加速将可能重演IE悲剧——迟钝、肿胀并被遗留代码活活拖跨。2012年主流移动浏览器还不会支持硬件加速,这估计要等到2013年。

十一、人们将能在移动设备上玩到Zynga等公司的HTML5流行游戏,但限于一些较为简单的游戏

你也许能看到有人玩纯HTML5版本的Zynga扑克、字谜、Mafia
Wars等游戏,这些游戏可以在网页里,也可以在facebook原生应用里运行。但这些都会是写基于菜单的游戏、棋牌游戏或者角色扮演游戏,更复杂的富有视觉冲击的游戏例如Ville还需要等待一段时间。

十二、Facebook将发布改进的HTML5 API,允许与其他网站更加无缝集成

十三、Facebook将于桌面更加无缝集成

想想吧,任意拖放、文件系统访问、照片同步以及桌面Widgets。这些功能将模糊桌面与浏览器之间的界限,让社交图谱与桌面体验紧密结合。

十四、苹果依然不会在移动版Safari上支持HTML5的声音功能

iOS3时代,html5 的声音功能在移动Safari上一切正常,但是苹果在 iOS4 和5
版本中禁用了大多数的API调用,因为这可能会冲击iTune业务。2012年,苹果依然不会放松对苹果生态系统的绝对控制权,并拒绝向
html5 提供声音接口API。

原文出处:The Definitive Guide To HTML5: 14 Predictions For
2012

赞 收藏
评论

图片 3

css 动画的回调

2016/01/11 · CSS ·
动画

原文出处:
卖烧烤夫斯基   

在做项目中经常会遇到使用动画的情况。以前的情况是用js写动画,利用setTimeout函数或者window.requestAnimationFrame()实现目标元素的动画效果。虽然后者解决了刷新频率和移动频率同步的问题,但是因为js频繁地操作dom带来的额外开销和复杂的计算公式使得大多数开发者对用原生js动画望而却步而取道各种插件动画。这其实也是html的一块软肋,在网站上做动画,无论就效果还是性能,JS还是差了flash很多步。所以当html5和css3的标准出现后,这种情况转变成了多数人从js复杂的动画转向了稍微容易的css动画。css3为我们提供了很棒的api来实现之前需要费很大的功夫才能实现的功能。只需要很简单的代码,任何人都可以快速地学会css动画。下面是一个动画沿Y轴的上下游走的例子(此处均已webkit内核为默认标准,实际情况需要自己兼容):

transform:

CSS

.mydiv { width:100px; height:100px; background:red; -webkit-transition:
all 2s; } .newClass { -webkit-transform: translateY(100px) }

1
2
3
4
5
6
7
8
9
.mydiv {
    width:100px;
    height:100px;
    background:red;
    -webkit-transition: all 2s;
}
.newClass {
    -webkit-transform: translateY(100px)
}

animation:

CSS

@-webkit-keyframes mymove {     from {top:0px;}     to {top:200px;} }
.mydiv {     width:100px;     height:100px;     background:red;
    position:relative;     -webkit-animation:mymove 2s forwards; /*
Safari and Chrome */ }

1
2
3
4
5
6
7
8
9
10
11
@-webkit-keyframes mymove {
    from {top:0px;}
    to {top:200px;}
}
.mydiv {
    width:100px;
    height:100px;
    background:red;
    position:relative;
    -webkit-animation:mymove 2s forwards; /* Safari and Chrome */
}

以上是目前css动画经常用到的两种写法。就简洁单的动画来说一般倾向使用第一种transoform,如果需要在做复杂的转换,可以使用第二种animation方法,通过在不同的运动帧上写下该帧的状态实现。

很多情况下我们需要知道动画何时完成,以及什么完成后需要做什么。也就是说需要一个动画完成的回调函数。在js动画中你不需要担心找不到回调函数,因为动画本身全依赖于js,回调只不过是一个普通的函数而已。首先,卤煮也是习惯性地用js思维思考这个问题。既然知道动画的变化时间,那么可以用延时解决回掉的问题。下面是延时的方法

JavaScript

//css中代码可以看到动画持续2s var delay = 2000; setTimtout(function(){
dosomething() }, delay);

1
2
3
4
5
//css中代码可以看到动画持续2s
var delay = 2000;
setTimtout(function(){
    dosomething()
}, delay);

上面的方法是不难理解,延时一个函数执行,延时的时长就是动画变化的时间,这样,看起来当动画完成时会立即执行函数。但是,这种方式存在着很多严重的缺陷。第一、setTimeout函数和css动画不一定是一致的。因为动画开始的时间和setTimeout的时间严格来说不是一直的,所以会出现要么函数提前执行,要么动画提前结束。第二、js代码和css代码耦合了。delay的时间要随时跟着css内的时间走,如果css代码改变或者js代码改变,两边都必须花时间修复同步(也就是改成为一致时间)这增加了工作量。第三、多个动画会带来更多的代码量和不确定因素。因为每一个定时器针对的是单独的动画元素,所以动画元素一多起来就必须添加更多的代码。第四、无法处理多个动画元素同一时间结束的情况。等。。。。

以上只是部分发现的缺点,对于复杂的动画来说,延时函数是完全不能适应。那么有方法处理动画的回调吗?答案当然是肯定的。而且很简单,跟之前绑定点击事件是一样的。js提供了css3中两种动画的结束事件。我们利用它们,可以很容易捕获到动画的完成情况。

transitionEnd

JavaScript

document.getElementById(‘my’).addEventListener(‘transitionEnd’,
function(){ alert(‘Transform animation has done!’); });

1
2
3
document.getElementById(‘my’).addEventListener(‘transitionEnd’, function(){
    alert(‘Transform animation has done!’);
});

animationend

JavaScript

document.getElementById(‘my’).addEventListener(‘animationend’,
function(){ alert(‘Animation has done!….’); });

1
2
3
document.getElementById(‘my’).addEventListener(‘animationend’, function(){
    alert(‘Animation has done!….’);
});

我们可以看到,它们对于开发者来说一点也不陌生。不论是用法还是字面名称,都使得我们能够一目了然。其实说了啰里吧嗦一大堆,这篇博客主要就是两个事件名称而已。下面是它们的兼容效果。大多数浏览器都支持了这两种事件,基本上支持css3动画的浏览器就会支持这两种事件。

图片 4

图片 5

补充一点:animationend只是animation变化事件中的一种。你应该能想到其他的变化状态,没错就是:animationstart,animationiteration.
利用这三种状态时间,我们可以随心所欲的控制变化中的动画效果。尤其是animationiteration事件,能够让我们在动画变化过程中插上一手。

1 赞 3 收藏
评论

图片 3

强制横屏显示

页面内容显示方向可分为竖排方向和横排方向,如下图所示。

 

图片 7

页面内容显示方式:竖向排版和横向排版

对于竖屏式 H5
轻互动来说,页面会被期望保持竖排方向显示。而如果页面出现横排方向显示的情况,开发者往往会选择利用提示蒙层来进行友好提示,让用户自主保持竖屏体验,如下图所示。

 

图片 8

提示蒙层提醒用户保持竖屏体验

同样地,在横屏式 H5
轻互动游戏中可以采取相同的措施进行简单处理,在页面内容按竖排方向显示时,开发者进行对用户提示其保持横屏体验。

但是,这对用户体验并不友好,因为这对于那些习惯于打开锁定为竖排方向功能(如下图所示)的
iOS 平台用户,或者是关闭屏幕旋转功能(如下图所示)的 Android
平台用户来说,他们需要多一个处理步骤——先关闭竖排方向锁定或是开启屏幕旋转,然后再横向手持设备。

 

图片 9

竖排方向锁定功能(iOS)与屏幕旋转(Android)功能

因此,更好的做法是强制横屏显示,对屏幕 resize
事件进行监听,当判断为竖屏时将整个根容器进行逆时针 CSS3 旋转 90
度即可,代码如下所示。

JavaScript

// 利用 CSS3 旋转 对根容器逆时针旋转 90 度 var detectOrient = function()
{ var width = document.documentElement.clientWidth, height =
document.documentElement.clientHeight, $wrapper =
document.getElementById(“J_wrapper”), style = “”; if( width >=
height ){ // 横屏 style += “width:” + width + “px;”; //
注意旋转后的宽高切换 style += “height:” + height + “px;”; style +=
“-webkit-transform: rotate(0); transform: rotate(0);”; style +=
“-webkit-transform-origin: 0 0;”; style += “transform-origin: 0 0;”; }
else{ // 竖屏 style += “width:” + height + “px;”; style += “height:” +
width + “px;”; style += “-webkit-transform: rotate(90deg); transform:
rotate(90deg);”; // 注意旋转中点的处理 style +=
“-webkit-transform-origin: ” + width / 2 + “px ” + width / 2 + “px;”;
style += “transform-origin: ” + width / 2 + “px ” + width / 2 + “px;”; }
$wrapper.style.cssText = style; } window.onresize = detectOrient;
detectOrient();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 利用 CSS3 旋转 对根容器逆时针旋转 90 度
var detectOrient = function() {
  var width = document.documentElement.clientWidth,
      height =  document.documentElement.clientHeight,
      $wrapper =  document.getElementById("J_wrapper"),
      style = "";
  if( width >= height ){ // 横屏
      style += "width:" + width + "px;";  // 注意旋转后的宽高切换
      style += "height:" + height + "px;";
      style += "-webkit-transform: rotate(0); transform: rotate(0);";
      style += "-webkit-transform-origin: 0 0;";
      style += "transform-origin: 0 0;";
  }
  else{ // 竖屏
      style += "width:" + height + "px;";
      style += "height:" + width + "px;";
      style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
      // 注意旋转中点的处理
      style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
      style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
  }
  $wrapper.style.cssText = style;
}
window.onresize = detectOrient;
detectOrient();

但是!这里有坑:如果你是采用
CreateJS 框架进行开发,那么就不能通过 CSS3 途径对包含 Canvas
的根容器进行旋转处理,因为旋转后会导致 Canvas
内的舞台元素的事件响应位置错乱。
解决办法是,换成利用 CreateJS 框架内的 Stage 的 rotation
属性对整个舞台旋转处理,代码如下:

JavaScript

if(self.isPortrait) { // 竖屏 // 舞台旋转 self.stage.x =
self.canvasHeight; // 注意:x偏移相当于旋转中点处理,更简单
self.stage.rotation = 90; // more… }else { // 横屏 self.stage.x = 0;
self.stage.rotation = 0; // more… }

1
2
3
4
5
6
7
8
9
10
if(self.isPortrait) { // 竖屏
  // 舞台旋转
  self.stage.x = self.canvasHeight; // 注意:x偏移相当于旋转中点处理,更简单
  self.stage.rotation = 90;
  // more…
}else { // 横屏
  self.stage.x = 0;
  self.stage.rotation = 0;
  // more…
}

横屏适配处理

面对移动端多分辨率繁复冗杂的情况,我们对于一般情况下(也就是常见的竖屏式)页面适配处理可以说是烂熟于心,但是切换到横屏式场景下,同样的页面适配方法可以直接应用吗?会不会有什么问题呢?

下面笔者分别从 DOM 和 Canvas 两方面去着手阐述如何做横屏适配处理。

发表评论

电子邮件地址不会被公开。 必填项已用*标注