Titan | 腾讯网前端团队博客
介绍：相信很多朋友都在世界杯揭幕战那天，在打开腾讯新闻APP的一瞬间，以往出现闪屏广告的地方，现在变成了一款跑酷类的小游戏，是的它的名字叫【Ola快跑!】。
【Ola快跑!】是一款由腾讯网设计中心开发的，基于HTML5技术的多屏互动社交游戏，它通过手指触碰以及双屏遥控等方式，控制小人向上奔跑，在不同关卡躲避不同的障碍物，并捡拾道具获得分数和荣耀称号，通过各种社交媒体分享接口，在好友中得到传播。
【HML5与网页游戏】
提起HTML5，大部分人更喜欢叫它H5技术，而对于这种被专业前端圈苦苦等待了好几年–却在最近一两年得到普通用户热炒的新技术，到底是什么，它能实现什么？很多人，尤其是非专业技术人士不是十分的清楚，只是觉得H5很神秘，很强大，基本上在某些不太清楚技术边界的人眼里，H5=狂拽酷炫屌爆天，可以实现他想要的任意效果。尤其当移动互联网，具体应该是移动APPS发展到今天的时候，很多产品单从外观上已经分不清楚哪一部分是native哪一部分是web了，当浏览器具备了越来越高级的web特性，当越来越多的APP选择了HybridApp的道路，当HTML5标准越发清晰和被厂商认可，当可以方便的在移动设备上使用javascript驱动一系列的html5 api，而不仅仅只是跑几个CSS3动画的时候，一个大胆的想法在人们心中萌发，为何不用HTML5技术做一个游戏呢？
HTML5技术，分解来看是由一系列的子标准组成的，包括像离线存储、实时通信、跨设备兼容、语义化标签、三维图形以及特效、多媒体、CSS3等方面。它不仅仅只是页面上有几个动画那么简单，也不是到处都能用的万金油&#年底HTML5标准才会被做为推荐标准—而这还要视各个厂商的认可程度，实际上目前在移动端上，各家对于不同的子标准支持的力度都不太相同，所以指望按照标准规定的啪啪啪几行代码搞定一些特性，并且兼容各种设备和浏览器，在目前看无异于天方夜谭。
但是这些新特性看起来很诱惑，比如在传统的PC端如果想做游戏，你的选择只有那些外挂的插件来实现，如flash等，但是如果你想做基于地理位置的好友互动、想做实时的通信交互、想做断网后依然能使用的应用，都会十分困难，但是有了HTML5，这一切都成为了可能 — 尽管目前看依旧有很多的坑。
言归正传，在世界杯开赛之初，为了让网友在腾讯网有更加强烈的互动感和参与感，我们计划策划一个跑酷类的小游戏【ola快跑!】,它通过在移动端使用手指触碰控制，在PC端使用双屏交互技术控制，来实现与用户和参与。它最终上线两个版本，一个是移动版，一个是PC版：
ola快跑!移动版
【移动版扫码体验】
游戏主逻辑都是相同的，但是在个别部分做了区分，以适应不同终端上的用户需求。比如在PC端，用户除了用键盘控制上下左右外，还可以使用手机扫码，通过手机来遥控自己的角色通关；比如在移动端支持微信授权登录，用户可以像玩全民飞机大战一样，直接跳到微信中授权，而不用再输入帐号和密码。
【激情的48小时】
在移动端想要做一款web游戏，首先能想到的肯定是使用canvas技术，然而canvas那孱弱的接口实在不足以撑起一个游戏的需求，比如，如果不做任何的框架封装，使用canvas来画一个圆形的话，你需要这样:
var canvas = draw();
canvas.fillStyle = "#2E81CE"; //等同于fillStyle="rgba(46,129,206,1)";
canvas.beginPath();
canvas.arc(250, 60, 50, 0, 2 * Math.PI, true);
canvas.closePath();
canvas.fill();
这还只是一个静态的圆形，如果你要画一只滚动的足球，那你需要引入图像、设置位置、用定时器来将分帧图像载入以模拟滚动效果等等，更不要说还要做碰撞检查等等游戏必备的东西…想一想就是灾难。
而最可怕的是从创意确定和完善到实施上线，仅仅剩下了48个小时的开发时间，而自己从头去写一个兼容性不错又非常好用的框架，基本上不太可能了，为了保证在揭幕战那天顺利上线，我们选择使用开源的游戏框架做底层，幸好之前做过一些类似的简单游戏，于是从众多的js游戏框架中，我们选择了，一个轻量级的JS游戏框架，它轻量、支持模块化、组件的概念也比较好理解和上手。
而craftyjs对与游戏常用的底层操作做了包装，比如前文举例的画圆形，在craftyjs中只用短短一句话就可以快速实现：
new Crafty.circle(centerX, centerY, radius);
是不是非常的简单？
确定了底层框架，可以开工了，为了加快开发进度，我们做了分工交叉开发，快速搭建SVN来同步多人代码，其中一位同学来负责游戏主界面开发，另外一名同学负责游戏社交属性部分的开发–这也是社交小游戏特别重要和有魅力的部分。
需要特别记录的是，由于设定的推广渠道都是内置在各种APP中，所以在分享环节，我们希望可以直接拉起APP的分享和登录界面，这样更加符合用户习惯，分享渠道也会比较顺畅，于是在收集整理了如下的APP分享和登录接口API：
1. 判断腾讯新闻APP环境&拉起原生登录：
if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) && typeof(TencentNews)!=='undefined'){
if(typeof(TencentNews.showLoginWithType)!=='undefined'){
TencentNews.showLoginWithType('qq', 'loginCallback');
if(typeof(TencentNews.showNativeLogin)!=='undefined')}{
TencentNews.showNativeLogin('loginCallback');
2.判断腾讯视频APP环境&拉起原生登录
if(/qqvideobrower/i.test(navigator.userAgent) || /QQLiveBrowser/i.test(navigator.userAgent)){
if(window.Android && typeof Android.gotoLoginView == "function"){
Android.gotoLoginView();
location.href='tenvideo2://?action=9';
//分享到腾讯新闻
window.TencentNews.shareFromWebView(title,desc,img);
//自定义微信内置各种分享
function onBridgeReady(){
// 分享到朋友圈;
WeixinJSBridge.on('menu:share:timeline', function (argv) {
WeixinJSBridge.invoke('shareTimeline', {
"img_url": Passport.shareimg,
"img_width": "120",
"img_height": "120",
"link": SHAREINFO.url,
"desc": SHAREINFO.desc,
"title": SHAREINFO.desc
},function () { });
//发送给朋友接口
WeixinJSBridge.on('menu:share:appmessage', function(argv){
WeixinJSBridge.invoke('sendAppMessage',{
"img_url":Passport.shareimg,
"link":SHAREINFO.url,
"desc":SHAREINFO.desc,
"title":SHAREINFO.desc
}, function() {})
//分享到腾讯微博接口
WeixinJSBridge.on('menu:share:weibo', function(argv){
WeixinJSBridge.invoke('shareWeibo',{
"content":SHAREINFO.desc,
"url":SHAREINFO.url,
}, function(res) {
if (document.addEventListener) {
document.addEventListener(‘WeixinJSBridgeReady’, onBridgeReady, false);
} else if (document.attachEvent) {
document.attachEvent(‘WeixinJSBridgeReady’, onBridgeReady);
document.attachEvent(‘onWeixinJSBridgeReady’, onBridgeReady);
此外PC端一个亮点是使用了双屏互动技术，所谓双屏互动，即是使用手机端遥控控制PC端的游戏，在确定方案后，一个核心问题是，如何实现实时通信？首先想到就是websocket了，但是在兼容性上问题太大，于是选择了socket.io这款开源的实时框架，它基于NODE环境对于底层协议做了封装，使用者只用关注上层业务逻辑，框架会根据浏览器情况只能选择实时方案，比如在支持websocket的浏览器中使用websocket，低级浏览器中使用long pull等技术。
【坑和总结】
经过两天两夜不眠不休的开发，游戏终于开发成型了，在世界杯揭幕战之夜推广上线后，数据反馈非常不错。而在新闻APP闪屏中嵌入H5页面，也算是一个创意性很强的举措，在今后的运营中，将H5页面与原生APP的结合会成为发展的趋势。当然时间有限，难免会有很多bug和不足，将开发中遇到的坑做下记录，以供后者参考：
1.关于主框架，在一开始确定方案的时候，为了快速开发，在PC和移动端的游戏主场景使用了一套代码，然后后来在测试PC端时发现，craftyjs框架对于IE系列支持很差，只能保证IE9+才能正常。为了保证所有用户都能体验小游戏，我们只能对于IE9以下用户进行嗅探，并给这些用户展示移动端的二维码。
2.此外由于社交游戏中大部分都需要登录后，来获取好友的排行，经常碰到登录态的问题，使用公司通用的登录接口(pt)时候会下发一个skey的cookie来验证用的登录态，但是这个登录态会在一定时候过期，前端获取时虽然cookie仍然存在，但是已经无法提交到服务器做token的解码和验证了，尤其是在页面长时间打开的应用中，一定要有服务器端的登录态合法性验证。
3.经过测试发现在新闻APP、视频APP以及微信内置浏览器中，都会下发skey和uin的cookie值，不过安卓和IOS下发值不太一样，比如在安卓的版本中，有的uin前不会添加补全的信息，如o。
·3003 Views
近期花了好一段时间在做一个有关股票数据在移动端的展示页面。就是将PC上用flash呈现出来的股票数据走势图在webapp中展示给用户。从目前国内手机浏览器对HTML5 的支持情况来看，各大浏览器对canvas的支持都很不错了，因而Canvas成为开发的最佳选择。而它在画图中的应用实践，这里做个小小的总结。
使用HTML5的canvas做前端，JavaScript做逻辑和画面控制。展示的数据来自于接口调用，在静态文件中使用&canvas&标签定义图形，比如图表和其他图像等。
这里可以直接通过CSS设置它的高、宽（height、width）。Canvas元素本身并没有绘制能力（它仅仅是图形的容器），因而必须通过脚本（javascript）来完成实际的绘图任务。getContext()方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。 一、canvas绘方格 方法beginPath():起始一条路径，或重置当前路径 方法moveTo():把路径移动到画布中的指定点，不创建线条 方法lineTo():添加一新点，然后在画布中创建从该点到最后指定点的线条 属性strokeStyle:设置或返回用于笔触的颜色、渐变或模式 方法stroke():绘制已定义的路径wpzheng
上面这段代码绘出来的是一个棋盘格
二、canvas绘矩形
属性fillStyle:设置或返回用于填充绘画的颜色、渐变或模式。
方法fillRect(x,y,width,height):绘制“被填充”的矩形。
x:矩形左上角的X坐标
y:矩形左上角的Y坐标
width:矩形的宽度，以像素计
height:矩形的高度，以像素计
上面这段代码画出来的就是一个矩形。
三、canvas绘曲线
上面这段代码画出来的就是一条曲线。 四、绘图数据分析 Canvas所画的目标图形的形成最终是由脚本控制数据变化来完成的。分析一下股票趋势图中的矩形和曲线脚本对数据的控制。 1、 股票图形中的矩形（成交量为例） 在一个8*2的棋盘格中绘制股票矩形变化图，需要得知确定这个矩形的四个参数，X和Y坐标值，矩形的宽度和高度以及矩形的颜色的确定。 1）
根据实际情况这里确定矩形的X坐标从1开始而宽度设置为4mm，也就是每两个矩形之间相隔4mm。 2）
矩形的Y轴和矩形的高度。根据实际绘图的情况，当矩形的Y轴值为10，高度为43时（fillRect(1,10,4,43)）刚好布满整个棋盘格的高的度。假设棋盘格整个高度的总价格为M，当前要显示的价格为N，则矩形的高度为H=43*N/M；Y轴坐标为（10+43-H）。 2、 股票图形中的曲线 曲线的形成其实就是目标点的X和Y轴坐标的确定，应用脚本来控制数据的变化，在用canvas的绘图方法形成图形。 1）
X坐标可根据显示空间大小的实际情况，假设每两个点之间为1mm。 2）
主要确定目标点的Y轴坐标，假设整个显示区域的高度为H，最顶部显示的最大值为MAX，最底部显示的最小值为MIN，则当前要显示的值为VALUE，则当前值显示的Y轴坐标值为Y=H*((MAX-VALUE)/(MAX-MIN))，在将要显示的所有Y值PUSH到一个数组中。最后利用FOR循环将这些数据绘制成图形。 总之，HTML5 Canvas是一个使用脚本来绘制图形的元素，通常这意味着要通过JavaScript来实现，貌似如今在游戏中HTML5 Canvas被大量采用，这里不曾实践过，不多说，今后有类似的实践项目在做分享。wpzheng，本内容来自腾讯内部分享，请勿外传！
·6201 Views腾讯申诉绝对有问题_百度知道
腾讯申诉绝对有问题
本人申诉的567177 跟随已经多年。直到2008年被盗, 一直没好好申诉。每次填写了一个好友为自己当证实人。失败~ 寒心~不找了 今天我再次向腾讯申诉此QQ号码`提供了此号历史密码6个 和9年最早的好友 因此年不在 我手上 个个打电话通知要好友帮我证实我的QQ
大概是腾讯出来2代保护？什么DNA？已经大约是年以前一起自己一个人在申诉从设置密码
保护因为早长时间忘记密码保护应此死保护，Q一直在我手情况下一直没申诉成功修改2代保护
那是567177 最早的好友~你拒绝申诉拒绝~你真叫人寒心
盗号的~人家一申诉就能成功~必把2代密码保护改了 我用了9年也没改成功过。腾讯真叫人伤心
提问者采纳
QQ号码被盗如何申诉成功,我教您绝招 不要骂街,不要感觉不可理喻,电脑审核是很正常的,现在网络这么发达,大小公司都流行OA办公自动化,腾讯不用么?那才奇怪! 电脑审核!聪明的您联想到什么没有?我告诉您把! 为什么盗号者的申诉总能成功,因为他了解电脑审核的规则,所以他能成功 为什么客服总说那些千篇一律的回复词,因为他们看不到您的申诉资料,一切都是由电脑来完成的。 为什么申诉遭拒的回复邮件都那么千篇一律,不能明确告诉我那一项填写错了,因为那是电脑自动回复的,目的只是告诉您申诉失败,而不会告诉您失败原因的。试想一下,要是告诉您申诉失败的原因,盗号者也会利用这个功能来申诉,失败不怕,申诉上100次,虽然不知道错误的项目是那些,那总能知道那些资料是正确的把,所以,千篇一律的回复信还是有道理的。 还有一点,电脑是不会审核“其他详细证明材料”的,要知道,这个是留给人工审核用的。所以不要抱怨您都填写了那么多证据了还被申诉拒绝,电脑压根没看。 2、电脑审核的规则是什么呢? 综合判定,简单说在您填写的审核单上的每个项目,电脑都会跟以前的记录进行对比,如果完全相同,就判定正确,如果不同,就判定错误,就像考试一样,重要的是您能够拿到60分,而不是答对哪道题或者答错哪道题。 这就是为什么没有证件号码但却能申诉成功的原因,比如说电脑要求正确项目在6个以上才能通过申诉,盗号者只要提供的其他的正确资料就可以了,这是个硬BUG,无奈的漏洞啊,因为我们也有可能要利用这个规则来为我们很差的记忆力买单,没办法啊,现在社会的个人号码密码实在太多了,脑子装不下啊。 还有一个您要知道的,申诉单要是只有您一个人提交,那审核相对是要宽松的,这也为我们忘记了密码保护提供了修改的方便,可能答对2~3项就可以通过了(猜测),而在您和盗号者同时申诉的情况,审核就很严格了,估计在6~8项正确才能通过(猜测)。 还有一个规则,举例,历史密码,您提供的是1年以前的密码,如果这个密码正确,那么,在接下来的每一次申诉中,提供的密码必须是早于1年以前的密码,或者就是这个密码,否则电脑就会判定历史密码这一项回答错误。这也就是为什么老在强调原始密码的重要性,只要您记得原始密码,盗号者就肯定少了一个正确答案。该规则在申诉表的其他项目上也同样有效。 3、证件号码,证件号码!太重要了! 对,证件号码非常重要,而且这个东西是不可以更改的,也是不能全部查看的,只有在申诉成功的情况下才能看到前5位。 要是您的证件号码是随便填写的,不管您忘记没忘记,我都只能很遗憾的告诉您,您只能期望那个盗号者是个非专业的了,否则等待在您面前的只有无休止的申诉拉锯战。没办法,您没有相信腾讯公司输入真实信息,腾讯公司也就抛弃了您。不过努力填好您的申诉单,还是有希望的,吃上两盒脑白金,然后静坐冥想,去想办法回忆从前把,我给您支个招,听听老歌,看看老照片,转转老论坛,聊聊老朋友。灵光一现,QQ就回来拉。 如果您输入的是真实身份证号码,那我恭喜您了。到这里您可以大大的松一口气了。您的QQ肯定丢不了,别着急,一次申诉就能解决所有烦恼。首先按照正确的方式填写申诉表,并在申诉的同时将您的身份证复印件传真给腾讯公司,在传真上注明您要申诉的QQ号码,以及您要将这个身份证同QQ号码绑定,再在身份证的中间空白处写上“复印无效”四个字,传真发送完后马上给客服打电话确认传真是否受到,证件是否清晰,然后再次提醒客服您要将该身份证同QQ绑定,接下来,就等待申诉通过把,如果申诉还是遭到拒绝,不要生气,那是因为电脑审核的,有可能您填写的资料不规范,再打个电话向客服求助,肯定会解决的。您只需要耐心等待,敬候佳音吧。从今往后,不论是谁,包括您自己,只要再想对您的QQ进行申诉,都必须在申诉的同时提供和您第一次提交的身份证相同的复印件,否则,不管申诉资料如何详尽,都不可能被通过。一劳永逸,嘻嘻。
其他类似问题
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁