作者：?緝熙Soyaine
發(fā)布日期：2017-02-17
本篇主要記錄完成 IFE 熱身任務過程中我的思考過程和解決方法。
Warm up
warm up
把空間延伸開來即可。
Step1
先找到一串奇怪的字符，但是發(fā)現(xiàn)長度不對，猜想可能是經(jīng)過加密了，所以試了一些在線解密網(wǎng)站，用 BASE64 解出來了。
說個題外話，前一天晚上看到這串字符時絲毫沒有想法，后來晚上做夢，夢見朋友起床時很興奮的和我說“我解出來啦！是達芬奇密碼?！?23333333 這個詭異的夢境。
Step1 - vue or ctrl+a
Step1 - BASE64
相關(guān)知識：
Base64是一種編碼方法，特點如下：
- 用64個字符
- 表示任意二進制數(shù)據(jù)
- 查表實現(xiàn)
- 適合少量數(shù)據(jù)
- 常用于在URL、Cookie、網(wǎng)頁中傳輸
- 不能用于加密
其實 JavaScript 自帶有相關(guān)的處理方法 WindowBase64.atob() ，所以也可以直接在 Console 中調(diào)用語句來解碼。
編碼解碼調(diào)用的方法名稱正好相反。
var encodedData = window.btoa("Hello, world"); // 編碼 var decodedData = window.atob(encodedData); // 解碼 // encodedData: "SGVsbG8sIHdvcmxk" // decodedData: "Hello, world"
### Step2
揣摩題意，標注引號的兩個字影射了 `window` 和 `height` 兩個特性，所以直接在 Console 里輸入語句獲取當前窗口高度，然后將密碼值調(diào)整到相應數(shù)值即可。
`注: 此處截圖時調(diào)整過窗口，所以密碼值有些不一致。`
這個頁面仿真做得還不錯，在 Elements 面板用 Shift 調(diào)整元素的 CSS 屬性值時，伴隨著過渡效果，的確有在撥動密碼鎖的感覺。
### Step3
這一步就是 CSS 的位置與變換。比較繁雜的是字母 E。最開始我是使用的 `matrix` 作水平鏡像翻轉(zhuǎn)，需要經(jīng)過一些計算。
```css
.letter-e {
position: absolute;
transform: matrix(-0.94, 0.342, 0.342, 0.94, 560, -191);
}
http://www.boogdesign.com/examples/transforms/matrix-calculator.html -- 這是一個在線換算角度的網(wǎng)站。
后來看到了一種更好的解決辦法，也就是下圖中的寫法，使用 rotateY，更好理解一些。
Step3
總結(jié)一下，下面幾種寫法的效果是相同的：
{
//CSS 2D 變換
transform: matrix(-0.94, 0.342, 0.342, 0.94, 0, 0);
transform: rotate(-20deg) scaleX(-1);
//CSS 3D 變換
transform: rotate(20deg) rotateY(180deg);
}
Step4
Step4 - route mao
步驟如下：
- 畫出路線圖，標記需要的坐標點
- 點擊頁面中各個點，在 Console 面板獲得坐標值
- 處理語句
function moveBall(ball) {
ball.at (9 , 47, ball => ball.wait(2000));
ball.at (80 , 47, ball => ball.turnRight());
ball.at (80 , 129, ball => ball.turnLeft());
ball.at (221, 129, ball => ball.turnRight());
ball.at (221, 236, ball => ball.turnRight());
ball.at (79 , 236, ball => ball.turnLeft());
ball.at (79 , 362, ball => ball.turnRight());
ball.at (24 , 362, ball => ball.turnBack());
ball.at (166, 362, ball => ball.turnRight());
ball.at (166, 472, ball => ball.turnRight());
ball.at (26 , 472, ball => ball.turnBack());
ball.at (366, 472, ball => ball.turnLeft());
ball.at (366, 50, ball => ball.turnLeft());
ball.at (311, 50, ball => ball.turnBack());
ball.at (367, 50, ball => ball.turnRight());
ball.at (367, 100, ball => ball.turnLeft());
ball.at (465, 100, ball => ball.turnLeft());
ball.at (465, 14, ball => ball.turnRight());
ball.at (544, 14, ball => ball.turnRight());
ball.at (544, 99, ball => ball.turnLeft());
ball.at (621, 99, ball => ball.turnRight());
ball.at (621, 180, ball => ball.turnRight());
ball.at (572, 180, ball => ball.turnLeft());
ball.at (572, 472, ball => ball.turnLeft());
}
有幾個注意點：
- 所寫代碼是用于定義小球到達某個點時的動作，所以對于經(jīng)過兩次的點，最好選取不同坐標使其錯開。
- 由于路線需要銜接上，所以坐標也同樣需要銜接。
- 入口處的星星出現(xiàn)有延遲，所以需要在開始時等待幾秒。
Step4 - code
[END]
若有更好的解決方案，歡迎討論。
