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

《智勇大闯关第三季》 闯关地址：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中找到id="page"的div，复制data-t的属性值L3F1aXozL2luZGV4LnBocD90PU9HUTNORFpsTXpreVoxcHFXa3BCYkVWRlFsWlpUMVZuTUVaV2FEbFc=
4. f12,console中输入window.location = Base64.decode("L3F1aXozL2luZGV4LnBocD90PU9HUTNORFpsTXpreVoxcHFXa3BCYkVWRlFsWlpUMVZuTUVaV2FEbFc=")，按回车运行，此时页面跳转到第二关。
总结：考察的应该是浏览器调试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/