无需申请自动送彩金68_白菜送彩金网站大全[无需申请秒送彩金]
做最好的网站
来自 无需申请自动 2019-09-14 04:11 的文章
当前位置: 无需申请自动送彩金68 > 无需申请自动 > 正文

游戏开发,传敏感数据

H5 游戏开发:指尖大冒险

2017/11/29 · HTML5 · 游戏

原文出处: 凹凸实验室   

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

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

 

图片 1

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

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

 

图片 2

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

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

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

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

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

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

使用h5新特性,轻松监听任何App自带返回键

2018/07/03 · HTML5 · H5

原文出处: 云叔_又拍云   

即使用了 https 也不要通过 query strings 传敏感数据

2017/10/16 · 基础技术 · HTTPS

本文由 伯乐在线 - xiaoheike 翻译,艾凌风 校稿。未经许可,禁止转载!
英文出处:HttpWatch。欢迎加入翻译组。

服务器端的 log 将明文记下完整 url;浏览器上的访问历史也会明文记下完整 url;Referrer headers 里也忠实记下完整 url,然后在别人家的 Google Analytics 上显示。

我们经常听到的一个常见问题是:“URL 中的参数是否可以安全地传递到安全网站?”这个问题常常出现在客户看了 HttpWatch 捕获的 HTTPS 请求后,想知道还有谁可以看到这些数据。

 

例如,假设在一个查询中,使用如下安全的 URL 传递密码字符串:

HttpWatch 能够显示安全请求的内容,因为它与浏览器集成,因此它能够在 HTTPS 请求的 SSL 连接对数据加密之前查看数据。图片 3

如果你使用网络嗅探器查看,例如 Network Monitor,对于同一个请求,你只能够查阅加密之后的数据。在数据包跟踪中没有可见的网址,标题或内容:

图片 4

您可以信任 HTTPS 请求是安全的,只要:

  • 未忽略任何SSL证书警告
  • Web 服务器用于启动 SSL 连接的私钥在 Web 服务器本身之外不可用。

因此,在网络层面,URL 参数是安全的,但是还有一些其他基于 URL 泄漏数据的方法:

  1. URL 存储在 Web 服务器日志中–通常每个请求的完整 URL 都被存放在服务器日志中。这意味着 URL 中的任何敏感数据(例如密码)会以明文形式保存在服务器上。以下是使用查询字符串通过 HTTPS 发送密码时存储在 httpwatch.com 服务器日志中的条目: **2009-02-20 10:18:27 W3SVC4326 WWW 208.101.31.210 GET /Default.htm password=mypassword 443 … 通常认为即使是在服务器上,存储明文密码从来都不是好想法 2.URLs are stored in the browser history – browsers save URL parameters in their history even if the secure pages themselves are not cached. Here’s the IE history displaying the URL parameter:
  2. URL 存储在浏览器历史记录中–即使安全网页本身未缓存,浏览器也会将 URL 参数保存在其历史记录中。以下是 IE 的历史记录,显示了 URL 的请求参数:图片 5

如果用户创建书签,查询字符串参数也将被存储。

  1. URLReferrer 请求头中被传递–如果一个安全网页使用资源,例如 javascript,图片或者分析服务,URL 将通过 Referrer 请求头传递到每一个嵌入对象。有时,查询字符串参数可能被传递并存放在第三方站点。在 HttpWatch 中,你可以看到我们的密码字符串正被发送到 Google Analytics图片 6

结论

解决这个问题需要两步:

  • 只有在绝对必要的情况下传递敏感数据。一旦用户被认证,最好使用具有有限生命周期的会话 ID 来标识它们。

使用会话层级的 cookies 传递信息的优点是:

  • 它们不会存储在浏览器历史记录中或磁盘上
  • 它们通常不存储在服务器日志中
  • 它们不会传递到嵌入式资源,例如图片或 JavaScript
  • 它们仅适用于请求它们的域和路径

以下是我们的在线商店中,用于识别用户的 ASP.NET 会话 cookie 示例:

图片 7

请注意,cookie 被限制在域 store.httpwatch.com,并且在浏览器会话结束时过期(即不会存储到磁盘)。

你当然可以通过 HTTPS 传递查询字符串,但是不要在可能出现安全问题的场景下使用。例如,你可以安全的使用它们显示部分数字或者类型,像 accountview 或者 printpage,但是不要使用它们传递密码,信用卡号码或者其他不应该公开的信息。

1 赞 收藏 评论

一、无限循环滑动的实现

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

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

 

图片 8

循环场景图设计要求

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

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

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

 

图片 9

无限循环滑动的实现

用伪代码描述如下:

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;

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

1、前言

如今h5新特性、新标签、新规范等有很多,而且正在不断完善中,各大浏览器商对它们的支持,也是相当给力。作为前端程序员,我觉得我们还是有必要积极关注并勇敢地加以实践。接下来我将和各位分享一个特别好用的h5新特性(目前也不是特别新),轻松监听任何App自带的返回键,包括安卓机里的物理返回键,从而实现项目开发中进一步的需求。

关于作者:xiaoheike

图片 10

简介还没来得及写 :) 个人主页 · 我的文章 · 10 ·      

图片 11

二、随机生成阶梯的实现

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

2、起因

大概半年前接到pm一需求,用纯h5实现多audio的播放、暂停、续播,页面放至驾考宝典App中,与客户端没有任何的交互,所以与客户端相关的js不需要引用。看上去这需求挺简单的嘛,虽然之前也没做过类似的需求。不管三七二十一,撸起袖子就是干。开始了学习之旅。

无障碍阶砖的规律

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

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

 

图片 12

无障碍路径的生成规律

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

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

 

图片 13

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

3、我这里着重介绍下我具体是怎么监听任何App自带的返回键,以及安卓机里的物理返回键。

那为什么我要去监听呢,这里我有必要强调强调再强调。苹果手机不管是微信、QQ、App,还是浏览器里,涉及到audio、video,返回上一页系统会自动暂停当前的播放的,但不是所有安卓机都可以。所以我们自己必须自定义监听。很多朋友可能第一想法就是百度,然后出来的答案无非是这样

pushHistory(); window.addEventListener("popstate", function(e) { alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 }, false); function pushHistory() { var state = { title: "title", url: "#" }; window.history.pushState(state, "title", "#"); }

1
2
3
4
5
6
7
8
9
10
11
pushHistory();
window.addEventListener("popstate", function(e) {
    alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能
}, false);
function pushHistory() {
    var state = {
        title: "title",
        url: "#"
    };
    window.history.pushState(state, "title", "#");
}

是不是很眼熟?然而关键需求不能完美实现,要这段代码有何用,当时我也是绞尽脑汁。直到经过大神好友指导,复制了这段代码

var hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHidden' : 'mozHidden' in document ? 'mozHidden' : null; var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange'); var onVisibilityChange = function(){ if (document[hiddenProperty]) { console.log('页面非激活'); }else{ console.log('页面激活') } } document.addEventListener(visibilityChangeEvent, onVisibilityChange);

1
2
3
4
5
6
7
8
9
10
11
12
13
var hiddenProperty = 'hidden' in document ? 'hidden' :    
    'webkitHidden' in document ? 'webkitHidden' :    
    'mozHidden' in document ? 'mozHidden' :    
    null;
var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
var onVisibilityChange = function(){
    if (document[hiddenProperty]) {    
        console.log('页面非激活');
    }else{
        console.log('页面激活')
    }
}
document.addEventListener(visibilityChangeEvent, onVisibilityChange);

所有问题迎刃而解。
这段代码的原理我个人理解就是通过判断用户浏览的是否为当前页,从而进行相关操作。
这是 MDN相关链接:https://developer.mozilla.org…。

本文由无需申请自动送彩金68发布于无需申请自动,转载请注明出处:游戏开发,传敏感数据

关键词: