阿里前端闖關遊戲 「智勇大闖關第三季」 闖關攻略

《智勇大闖關第三季》 闖關地址：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/