xml地图|网站地图|网站标签 [设为首页] [加入收藏]

正规赌博十大app排名

当前位置:网上十大正规赌博平台 > 正规赌博十大app排名 > 页面通用解决方案,指尖大冒险

页面通用解决方案,指尖大冒险

来源:http://www.nb-machinery.com 作者:网上十大正规赌博平台 时间:2019-09-14 01:53

H5 游戏开发:指尖大冒险

2017/11/29 · HTML5 · 游戏

原文出处: 凹凸实验室   

在今年八月中旬,《指尖大冒险》SNS 游戏诞生,其具体的玩法是通过点击屏幕左右区域来控制机器人的前进方向进行跳跃,而阶梯是无穷尽的,若遇到障碍物或者是踩空、或者机器人脚下的阶砖陨落,那么游戏失败。

笔者对游戏进行了简化改造,可通过扫下面二维码进行体验。

 

图片 1

《指尖大冒险》SNS 游戏简化版

该游戏可以被划分为三个层次,分别为景物层、阶梯层、背景层,如下图所示。

 

图片 2

《指尖大冒险》游戏的层次划分

整个游戏主要围绕着这三个层次进行开发:

  • 景物层:负责两侧树叶装饰的渲染,实现其无限循环滑动的动画效果。
  • 阶梯层:负责阶梯和机器人的渲染,实现阶梯的随机生成与自动掉落阶砖、机器人的操控。
  • 背景层:负责背景底色的渲染,对用户点击事件监听与响应,把景物层和阶梯层联动起来。

而本文主要来讲讲以下几点核心的技术内容:

  1. 无限循环滑动的实现
  2. 随机生成阶梯的实现
  3. 自动掉落阶砖的实现

下面,本文逐一进行剖析其开发思路与难点。

iPhone X 适配手Q H5 页面通用解决方案

2017/11/12 · HTML5 · 8 评论 · iPhone X

原文出处: 林焕彬   

导语: iPhone X的出现,一方面对于整个手机行业的发展极具创新领头羊的作用,另一方面也对现有业务的页面适配带来了新的挑战。 对于手Q中的各业务来说,受iPhone X影响的H5页面挺多,应该采取什么快速有效的办法来应对呢?

目前的H5页面可以分为通栏页面和非通栏页面两种,每种页面都可能有底部操作栏,具体如下:

关于启用 HTTPS 的一些经验分享(二)

2015/12/24 · 基础技术 · HTTP, HTTPS

原文出处: imququ(@屈光宇)   

文章目录

  • SSL 版本选择
  • 加密套件选择
  • SNI 扩展
  • 证书选择

几天前,一位朋友问我:都说推荐用 Qualys SSL Labs 这个工具测试 SSL 安全性,为什么有些安全实力很强的大厂家评分也很低?我认为这个问题应该从两方面来看:1)国内用户终端情况复杂,很多时候降低 SSL 安全配置是为了兼容更多用户;2)确实有一些大厂家的 SSL 配置很不专业,尤其是配置了一些明显不该使用的 CipherSuite。

我之前写的《关于启用 HTTPS 的一些经验分享(一)》,主要介绍 HTTPS 如何与一些新出的安全规范配合使用,面向的是现代浏览器。而今天这篇文章,更多的是介绍启用 HTTPS 过程中在老旧浏览器下可能遇到的问题,以及如何取舍。

一、无限循环滑动的实现

景物层负责两侧树叶装饰的渲染,树叶分为左右两部分,紧贴游戏容器的两侧。

在用户点击屏幕操控机器人时,两侧树叶会随着机器人前进的动作反向滑动,来营造出游戏运动的效果。并且,由于该游戏是无穷尽的,因此,需要对两侧树叶实现循环向下滑动的动画效果。

 

图片 3

循环场景图设计要求

对于循环滑动的实现,首先要求设计提供可前后无缝衔接的场景图,并且建议其场景图高度或宽度大于游戏容器的高度或宽度,以减少重复绘制的次数。

然后按照以下步骤,我们就可以实现循环滑动:

  • 重复绘制两次场景图,分别在定位游戏容器底部与在相对偏移量为贴图高度的上方位置。
  • 在循环的过程中,两次贴图以相同的偏移量向下滑动。
  • 当贴图遇到刚滑出游戏容器的循环节点时,则对贴图位置进行重置。

 

图片 4

无限循环滑动的实现

用伪代码描述如下:

JavaScript

// 设置循环节点 transThreshold = stageHeight; // 获取滑动后的新位置,transY是滑动偏移量 lastPosY1 = leafCon1.y transY; lastPosY2 = leafCon2.y transY; // 分别进行滑动 if leafCon1.y >= transThreshold // 若遇到其循环节点,leafCon1重置位置 then leafCon1.y = lastPosY2 - leafHeight; else leafCon1.y = lastPosY1; if leafCon2.y >= transThreshold // 若遇到其循环节点,leafCon2重置位置 then leafCon2.y = lastPosY1 - leafHeight; else leafCon2.y = lastPosY2;

1
2
3
4
5
6
7
8
9
10
11
12
// 设置循环节点
transThreshold = stageHeight;
// 获取滑动后的新位置,transY是滑动偏移量
lastPosY1 = leafCon1.y transY;  
lastPosY2 = leafCon2.y transY;
// 分别进行滑动
if leafCon1.y >= transThreshold // 若遇到其循环节点,leafCon1重置位置
  then leafCon1.y = lastPosY2 - leafHeight;
  else leafCon1.y = lastPosY1;
if leafCon2.y >= transThreshold // 若遇到其循环节点,leafCon2重置位置
  then leafCon2.y = lastPosY1 - leafHeight;
  else leafCon2.y = lastPosY2;

在实际实现的过程中,再对位置变化过程加入动画进行润色,无限循环滑动的动画效果就出来了。

通栏页面

顶部通栏

某些业务的一级页面多数使用了顶部通栏banner的效果,由于iPhone X在状态栏增加了24px的高度,对于现在通栏banner规范的内容区域会有遮挡情况。

解决方案:对于通栏页面在页面顶部增加一层高度44px的黑色适配层,整个页面往下挪44px。

这种做法虽然不符合苹果要求的设计规范,但由于短时间内更新全部banner的成本太高,可以先这样简单处理,后续再优化banner的设计展现。

图片 5

底部Tab栏/操作栏

有些页面使用了底部Tab栏/操作栏,由于iPhone X去掉了底部Home键,取而代之是34px高度的Home Indicator ,对于目前的底部Tab栏/操作栏会造成一定的阻碍。

解决方案:在页面底部增加一层高度34px的适配层,将操作栏上移34px,颜色可以自定义。

图片 6

SSL 版本选择

TLS(Transport Layer Security,传输层安全)的前身是 SSL(Secure Sockets Layer,安全套接字层),它最初的几个版本(SSL 1.0、SSL 2.0、SSL 3.0)由网景公司开发,从 3.1 开始被 IETF 标准化并改名,发展至今已经有 TLS 1.0、TLS 1.1、TLS 1.2 三个版本。TLS 1.3 改动会比较大,目前还在草案阶段。

SSL 1.0 从未公开过,而 SSL 2.0 和 SSL 3.0 都存在安全问题,不推荐使用。Nginx 从 1.9.1 开始默认只支持 TLS 的三个版本,以下是 Nginx 官方文档中对 ssl_protocols 配置的说明:

Syntax: ssl_protocols [SSLv2] [SSLv3] [TLSv1] [TLSv1.1] [TLSv1.2];
Default: ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
Context: http, server
Enables the specified protocols. The TLSv1.1 and TLSv1.2 parameters work only when the OpenSSL library of version 1.0.1 or higher is used.

但不幸的是,IE 6 只支持 SSLv2 和 SSLv3(来源),也就是说 HTTPS 网站要支持 IE 6,就必须启用 SSLv3。仅这一项就会导致 SSL Labs 给出的评分降为 C。

二、随机生成阶梯的实现

随机生成阶梯是游戏的最核心部分。根据游戏的需求,阶梯由「无障碍物的阶砖」和「有障碍物的阶砖」的组成,并且阶梯的生成是随机性。

非通栏页面

底部Tab栏/操作栏

原因同上,在底部有34px高度的Home Indicator ,对于目前的底部Tab栏/操作栏会造成一定的阻碍操作。

解决方案:在页面底部增加一层高度34px的颜色块,将操作栏上移34px,颜色可以自定义。

图片 7

加密套件选择

加密套件(CipherSuite),是在 SSL 握手中需要协商的很重要的一个参数。客户端会在 Client Hello 中带上它所支持的 CipherSuite 列表,服务端会从中选定一个并通过 Server Hello 返回。如果客户端支持的 CipherSuite 列表与服务端配置的 CipherSuite 列表没有交集,会导致无法完成协商,握手失败。

CipherSuite 包含多种技术,例如认证算法(Authentication)、加密算法(Encryption)、消息认证码算法(Message Authentication Code,简称为 MAC)、密钥交换算法(Key Exchange)和密钥衍生算法(Key Derivation Function)。

SSL 的 CipherSuite 协商机制具有良好的扩展性,每个 CipherSuite 都需要在 IANA 注册,并被分配两个字节的标志。全部 CipherSuite 可以在 IANA 的 TLS Cipher Suite Registry 页面查看。

OpenSSL 库支持的全部 CipherSuite 可以通过以下命令查看:

openssl ciphers -V | column -t 0xCC,0x14 - ECDHE-ECDSA-CHACHA20-POLY1305 TLSv1.2 Kx=ECDH Au=ECDSA Enc=ChaCha20-Poly1305 Mac=AEAD ... ...

1
2
3
openssl ciphers -V | column -t
0xCC,0x14  -  ECDHE-ECDSA-CHACHA20-POLY1305  TLSv1.2  Kx=ECDH        Au=ECDSA   Enc=ChaCha20-Poly1305  Mac=AEAD
... ...

0xCC,0x14 是 CipherSuite 的编号,在 SSL 握手中会用到。ECDHE-ECDSA-CHACHA20-POLY1305 是它的名称,之后几部分分别表示:用于 TLSv1.2,使用 ECDH 做密钥交换,使用 ECDSA 做认证,使用 ChaCha20-Poly1305 做对称加密,由于 ChaCha20-Poly1305 是一种 AEAD 模式,不需要 MAC 算法,所以 MAC 列显示为 AEAD。

要了解 CipherSuite 的更多内容,可以阅读这篇长文《TLS 协议分析 与 现代加密通信协议设计》。总之,在配置 CipherSuite 时,请务必参考权威文档,如:Mozilla 的推荐配置、CloudFlare 使用的配置。

以上 Mozilla 文档中的「Old backward compatibility」配置,以及 CloudFlare 的配置,都可以很好的兼容老旧浏览器,包括 Windows XP / IE6。

之前见到某个大厂家居然支持包含 EXPORT 的 CipherSuite,这些套件在上世纪由于美国出口限制而被弱化过,已被攻破,实在没有理由再使用。

无障碍阶砖的规律

其中,无障碍阶砖组成一条畅通无阻的路径,虽然整个路径的走向是随机性的,但是每个阶砖之间是相对规律的。

因为,在游戏设定里,用户只能通过点击屏幕的左侧或者右侧区域来操控机器人的走向,那么下一个无障碍阶砖必然在当前阶砖的左上方或者右上方。

 

图片 8

无障碍路径的生成规律

用 0、1 分别代表左上方和右上方,那么我们就可以建立一个无障碍阶砖集合对应的数组(下面简称无障碍数组),用于记录无障碍阶砖的方向。

而这个数组就是包含 0、1 的随机数数组。例如,如果生成如下阶梯中的无障碍路径,那么对应的随机数数组为 [0, 0, 1, 1, 0, 0, 0, 1, 1, 1]。

 

图片 9

无障碍路径对应的 0、1 随机数

关于安全区域

这里可能有人会有疑问,为什么非通栏下的页面内容是通到底部的,而按钮却是在安全区域上方呢?

这个问题涉及到安全区域,iOS11 和先前版本的不同之处在于,webview 比较重视安全区域了。这意味着,如果给页面元素设置 top: 0, 它会渲染在屏幕顶部的44px之下,也就是状态栏下面。如果给页面元素设置 bottom: 0, 它会渲染在屏幕底部的34px之上,也就是底部安全区域上面。
图片 10

为了解决这个尴尬的情况,苹果公司给我们提供了一个设置viewport的meta标签的解决方案。

viewport 可以设置的选项就是 viewport-fit,它有三个可选值:

  • contain: The viewport should fully contain the web content. 可视窗口完全包含网页内容
  • cover: The web content should fully cover the viewport. 网页内容完全覆盖可视窗口
  • auto: The default value, 同contain的作用

通过给页面设置viewport-fit=cover,可以将页面的布局区域延伸到页面顶部和底部。

图片 11

对于通栏页面,设置了viewport-fit的属性,发现会不生效,经过跟同事查看手Q源码后发现,终端对于WebView通栏的情况设置了UIScrollViewContentInsetAdjustmentNever属性,去除了上下安全区域的边距,使得安全区域的上下边距失效了。

另外提一点,经过2个版本的webview测试,发现WKWebView在渲染页面的时候,底部按钮在位置表现上不一致,可能是一个还未解决的bug:

图片 12

SNI 扩展

我们知道,在 Nginx 中可以通过指定不同的 server_name 来配置多个站点。HTTP/1.1 协议请求头中的 Host 字段可以标识出当前请求属于哪个站点。但是对于 HTTPS 网站来说,要想发送 HTTP 数据,必须等待 SSL 握手完成,而在握手阶段服务端就必须提供网站证书。对于在同一个 IP 部署不同 HTTPS 站点,并且还使用了不同证书的情况下,服务端怎么知道该发送哪个证书?

Server Name Indication,简称为 SNI,是 TLS 的一个扩展,为解决这个问题应运而生。有了 SNI,服务端可以通过 Client Hello 中的 SNI 扩展拿到用户要访问网站的 Server Name,进而发送与之匹配的证书,顺利完成 SSL 握手。

Nginx 在很早之前就支持了 SNI,可以通过 nginx -V 来验证。以下是我的验证结果:

./nginx -V nginx version: nginx/1.9.9 built by gcc 4.8.4 (Ubuntu 4.8.4-2ubuntu1~14.04) built with OpenSSL 1.0.2e-dev xx XXX xxxx TLS SNI support enabled configure arguments: --with-openssl=../openssl --with-http_ssl_module --with-http_v2_module

1
2
3
4
5
6
./nginx -V
nginx version: nginx/1.9.9
built by gcc 4.8.4 (Ubuntu 4.8.4-2ubuntu1~14.04)
built with OpenSSL 1.0.2e-dev xx XXX xxxx
TLS SNI support enabled
configure arguments: --with-openssl=../openssl --with-http_ssl_module --with-http_v2_module

然而,并不是所有浏览器都支持 SNI,以下是常见浏览器支持 SNI 的最低版本:

浏览器 最低版本
Chrome Vista 全支持;XP 需要 Chrome 6 ;OSX 10.5.7 且 Chrome 5
Firefox 2.0
Internet Explorer 7 (需要 Vista )
Safari 3 (需要 OS X 10.5.6 )
Mobile Safari iOS 4.0
Android Webview 3.0

如果要避免在不支持 SNI 的浏览器中出现证书错误,只能将使用不同证书的 HTTPS 站点部署在不同 IP 上,最简单的做法是分开部署到不同机器上。

本文由网上十大正规赌博平台发布于正规赌博十大app排名,转载请注明出处:页面通用解决方案,指尖大冒险

关键词: JDB电子游戏

上一篇:jquery键盘事件介绍,注册事件代码

下一篇:没有了