今天突然收到群裡發來的一則阿里校招的 UED 闖關試題，我本身就是做前端的嘛，於是抱著試試看的心情玩了一把。

OK，let's go!

填寫了郵箱後，進入第一關。

第一關　　突破，帶鎖的門

一扇密碼大門，密碼是什麼呢？左試右試，都不對。然後，開啟chrome的開發人員工具，仔細檢視原始碼。當看到一個id=page的div時，咦？這是什麼？好像有個base64的東東？解開看看？

於是乎，網上找了一個base64線上解密的網站（這個隨便一搜就有，就不提供地址了），解密.... 哇，這，這，這不就是一個地址嗎？OKay，輸入這個地址看看。哇哈哈，果然是第二關的地址。

正確方法：控制檯輸入 powder.blow() 即會顯示三個指紋印，也就是3的階乘 = 6種情況。都試一遍就出來了。不過你的顯示器要好哦，要不像我一樣，換了電腦才看出來。。。

第二關　　鐳射，前進的方向

這是什麼東東？兩面鏡子，一個鐳射器。鏡子用來幹嘛的？嗯，應該是反射鐳射的吧。可是，只有一個小黑點，反射到哪裡去呢？還是用chrome的開發人員工具展開原始碼。咦，貌似有個小黑點被隱藏了（id=pharaoh的那個div）。我們把它顯示出來，修改其display:block。OKay，現在我們有兩個小黑點了。接下來，自然是調整鏡子，反射光線穿過這兩個小黑點。

怎麼調？首先，第一面鏡子 （id=ma 的那個div），高度上升30：top:550px，逆時針旋轉82度：-webkit-transform: rotate(-82deg);。

第二面鏡子（id=mb的那個div），高度上升20：top:430px，順時針旋轉172度：-webkit-transform: rotate(172deg);。哈哈，發現一部PDA。

第三關　　座標，隱藏的線索

嗯，一個沒完成的二維碼，似乎圖片上有些亂七八糟的數字。再用我們的開發人員工具展開看看。咦，這個二維碼不就是個canvas嗎（id=qr-canvas的那個canvas）？我們似乎可以畫點什麼上去。畫什麼呢？貌似看到一段js註釋，裡面都是亂七八糟的數字。仔細一看，呃，這些數字似乎是某種座標。該不會就是用來繪製我們的二維碼的吧？不管了，試試。

總不能人肉一個一個輸入吧，寫個for？下面是我自己寫的：

var s = '這裡是那段js註釋，太長了，你們自己搞定吧'.split(' ');
var c = document.getElementById('qr-canvas').getContext('2d');
c.fillStyle = '#000';
for (var i in s) {
    var a = s[i].split(',');
    c.fillRect(a[0], a[1], a[2], a[3]);
}
 

第四關　　圖案，瘋狂的猜測

這關比較蛋疼，考你的日常積累的。就是猜圖遊戲，直接輸入你猜的答案就可以了。這裡提供幾個我遇到的：

作業系統：ubuntu

網址：stackoverflow.com、http等

模板語言：jade

工具：grunt

其它：CSS Sprites、less、npm、v等，自己試吧

第五關　　尋找，無盡的房間

呃，一個空房間，有個next-room號。再仔細觀察，咦，地址url上似乎可以寫房間號。那我們就把下一個房間的號碼寫上去吧：room=（下個房間號），回車。果然，下一個next-room出現了。那意思是要我們一個房間一個房間的找下去嗎？人肉？NO，沒看到標題叫無盡的房間嗎？好吧，我們寫個迴圈吧。

開啟控制檯，看到什麼？“jQuery is ready for you”，真貼心，那就用jQuery吧。

function _get(id){
    var u = window.location.href.replace(/\=\d+$/, '='+id);
    $.get(u,
       function(data){
           console.log($(data).find('#message').text());
           _get($(data).find('#next-room').text());
       }
    );
}
_get(你頁面上顯示的下一個房間號);

第六關　　消除，最後的任務

終於到最後一關了，看到指紋沒，看到指紋沒？可是，怎麼幫斯諾克消除指紋呢？直接用js去掉那個DIV？顯然不行！控制檯似乎提示我們要注意cover。好吧，確實找到一個class=cover的div。然後，我試著把它移到指紋上面，不行，沒反應！再試著把它直接appendChild到指紋的DIV裡，還是沒反應。怎麼會沒有反應？

折騰來折騰去，一點辦法也沒有。再來看看原始碼，呃，似乎在body裡又發現一段base64。解密，又是一個地址。趕緊輸入位址列，YES! 成功通關！

正確方法：在輸入框注入一樓提供的程式碼！

結後語：第一關和第六關本人都沒找到正確的辦法，都是通過隱藏在原始碼裡的base64僥倖通過。我不知道這是不是正確的辦法。如果你有正確的辦法，請告訴我，謝謝！正確方法已跟進。