《智勇大闯关第三季》 闯关地址:http://ued.campus.alibaba.com/quiz3/index.php(需要chrome)

以我目前的水平,我认为两个小时之内闯到第六关的,都可以算是高手了,咳,这还只是一个校招游戏。

攻略开始之前,先做个声明:

本人菜鸟一个,从第四关开始就歇菜了,此攻略来自于JS/Javascript交流群(31609956),本人撰稿,并由以下几位同学协助完成:嚼头(592737223)、js-dino(904591031)、难得清醒(582416882) ,尤其是dino同学,提供了很多帮助,膜拜了要。

 

第一关
阿里前端闯关游戏 “智勇大闯关第三季” 闯关攻略
1. 鼠标点击号码器上的回车键,弹出“Opps,不是这个密码!”
2. f12,resources中查找弹出的这段文字,在step0.js的第155行:window.location = Base64.decode(S.one("#page").attr('data-t')); 可以看出密码输入成功之后会跳转到Base64.decode(S.one("#page").attr('data-t'));
3. f12,elements中找到>总结:考察的应该是浏览器调试DOM属性操作之类的东西。

 

第二关
阿里前端闯关游戏 “智勇大闯关第三季” 闯关攻略
原理:红色激光束上下各有一个灰色的小镜子,需要改变两面镜子的位置和角度让激光束穿过小黑点。考察的是css2的定位以及css3的旋转。
操作:下方的镜子调整后的位置大概是top: 550px;添加一个css3的旋转属性:-webkit-transform: rotate(-82deg);,后续原理同上。最后结果如下图
阿里前端闯关游戏 “智勇大闯关第三季” 闯关攻略
点击确定进入第三关。

 


第三关
阿里前端闯关游戏 “智勇大闯关第三季” 闯关攻略
1. 标题是坐标,隐藏的线索,右下角一个二维码框,并且控制台中隔一段时间输出了这么一段文字X:咦,这里有个canvas,是不是在上面画些什么——看样子是需要写一些代码画点二维码,考察canvas。
2. F12,elements中id=main的div下面两行,有一大片注释掉的数字,观察数字,是每四个数字一组,并且用空格隔开了。再看二维码部分是一个canvas,由此猜想这是需要根据fillRect(x,y,width,height)画矩形。
3. 复制下注释部分的数字串,F12, console中运行以下代码
var c = document.getElementById('qr-canvas').getContext('2d');
var s="0,0,12,12 12,0,………..……太多了省略……….....,12,12 228,240,12,12";
var a=s.split(' ');
for(i=0;i<a.length;i++){
var b=a[i].split(',');
c.fillRect(b[0],b[1],b[2],b[3]);
}
此时,二维码已经画满了,效果图如下:
阿里前端闯关游戏 “智勇大闯关第三季” 闯关攻略
确定之后跳转到第四关。

 


第四关

闯关思路:这一关主要考察技术大牛常去的网站、常用的工具、常用的技术等常识性问题。注意要根据图片和图片下的提示来猜答案(图片相同但提示不同会导致答案也不同)。下面贴出图片和对应答案:(图在上答案在下)
阿里前端闯关游戏 “智勇大闯关第三季” 闯关攻略
w3

阿里前端闯关游戏 “智勇大闯关第三季” 闯关攻略
stackoverflow

阿里前端闯关游戏 “智勇大闯关第三季” 闯关攻略
Jade

阿里前端闯关游戏 “智勇大闯关第三季” 闯关攻略
zepto

阿里前端闯关游戏 “智勇大闯关第三季” 闯关攻略
Github

 阿里前端闯关游戏 “智勇大闯关第三季” 闯关攻略

CSS Sprites 

阿里前端闯关游戏 “智勇大闯关第三季” 闯关攻略

Grunt (楼下补充by fanfanqq250

这里的问题比较多,不过也就是随机出现三到四个的样子,上面列的不全。吶,接下来会跳转到第五关了。

 

第五关
阿里前端闯关游戏 “智勇大闯关第三季” 闯关攻略
1. 注意观察room后面的数字和浏览器地址栏后面的room参数,两者是不一样的,比如我的t=OTkzN2JmYzNEOU13YkxCd1VDQWxBQ0RsY0JCeHNH&room=35。思路应该是把气泡里的房间号改到地址栏然后回车,不断改不断回车,注意观察下面气泡文字的变化。可以使用下面的代码不断运行。
2. F12,console中运行以下代码
var search = location.search;
location.search = search.replace(/room\=\d*/, function( ) {
return "room=" + jQuery("#next-room").text();
});
3. 重复运行第二步的代码,会看到聊天气泡中的文字在不断变化,如下图
阿里前端闯关游戏 “智勇大闯关第三季” 闯关攻略
继续重复运行代码,会看到他一个字一个字的告诉你下一关的链接了,注意要记下来,比如我的:/quiz3/index.php?t=ZTlkZDVhOWV1dmhvY0tBVkFHQkFaVFdnVlJVeFVD,然后把个t参数复制到地址栏,回车,第六关就开始了。

注:是不是有更好的办法?

 

第六关

阿里前端闯关游戏 “智勇大闯关第三季” 闯关攻略

 

这一关需要清除掉X的指纹信息,无视此处的输入框,方法同第一关 (搞不明白通关方法一样的话,那设置此关有何意义?)。

 ——————————————————

以上为第三季,下面贴一个第二季的,有兴趣的可以玩玩。http://ued.taobao.com/quiz2/

相关文章: