情人節(jié)這天，還不忘學習編程的同學都是折翼的天使，于是百度前端學院就給了我們一個通過跪鍵盤來發(fā)泄的機會 -- 前端熱身賽。
足足火了一把前端社群。
15 號就要過去的今天，不知道你是否還在堅持熱身？
Come on，也就 Step 0, 1, 2, 3, 4, done。
既然如百度前端技術學院所說，這是一個“面向大學生的前端技術學習平臺”，那么身為大學生的我，就豪邁攻克之，正如以下攻略所示。若有雷同，純屬巧合~
感謝一波 @discountry 的前期解答做參考，和廣大 FCC 知友及時指迷。
Step 0. Unlock
一筆畫出折線，穿過圖中的 9 個點，折現(xiàn)個數(shù)最少。只要知道這整個灰色畫布都可以畫，大膽的突破慣性思維，將線畫長點即可只用 4 條折線過關。
否則，慣性思維下，最優(yōu)解為 5 ，總是多那么一條。
Step 1.
乍眼一看，除了 “Step1 找出下一關地址” 再看不到什么，點擊 “Ctrl + A” (Mac 下 Command + A) 將隱藏文字全選出來。亦或，打開瀏覽器“開發(fā)者工具”在源代碼里搜尋蹤跡。
<i>Iy9CQzY3QTA4MzM1NkM4MzU5NEJDQzU3RUQxMzNENEE1MjU2N0U0Qg==</i>
“==” 號應該算作提醒，前面的就是密碼，直奔答案，Base 64 解碼之。
解碼后又出來一串字母，“#/” 開頭，肯定是 URL 地址。別問我為什么知道這串字母需要解碼，解碼答案肯定是 URL 地址~我可是在去年校內(nèi)實驗室免試題里見過這個套路的，不會告訴你的。（逃
Step.2
為了更好的貫穿社會主義核心價值觀（再逃... ，我們需要揭破“上帝的窗”，找到它的高度。
可以看到，在開發(fā)者工具中用以下代碼實現(xiàn)。
$(window).height();
385，那就把鎖撥到 385，然而頁面不能直接撥鎖，否則 999 種答案，一個個撥即可 (???)。
頁面源碼里，看到負責鎖中數(shù)字的 Div 里有 style="top: -280px"字樣，修改后鎖輪會轉，便可以試試用 px 值轉動鎖輪。每 60 px 轉一個數(shù)字。
那么有趣的事情來了，這個 385px 并不是唯一值，把開發(fā)者工具伸展開蓋住頁面，答案就不是 385px 了。既然頁面默認是 521 px 這種虐狗狗的值，其實不需要撥鎖，把 window 的 height 調整至 521 px 即可。
Step.3
說實話，在這關之前，我只是只聞“CSS3”其名，不見其身。這次也領教了一番。
CSS3，網(wǎng)頁樣式控制新標準，早在 2001 年 5 月，W3C 就著手開始準備開發(fā) 第三版規(guī)范，其中的變形(transform)、轉換(transition)和動畫(animation)屬性，實為亮點。
用類選擇器選取三個字母(題目已經(jīng)自動選擇)，依靠 transform 移動到相應位置。
這里用到的 transform 屬性的值有：
translate(x ,y) 定義 2D 轉換(位移)。
scale(x, y) 定義 2D 縮放轉換。
scaleX(x) 通過設置 X 軸的值來定義縮放轉換(鏡像)。
rotate(angle) 定義 2D 旋轉，在參數(shù)中規(guī)定角度。
需知，不能同時定義兩個 transform 屬性，要寫在一起，并且還需要注意順序。更多的屬性值可以參考 W3School 的 CSS3 transform 屬性。
Step.4
沒有忘記的話，去年學院就有游戲挑戰(zhàn)壓軸，作為這次熱身賽的壓軸，不出所料，“游戲”依舊，多彩。
依提示，在框框里調用移動小球 api ，補全函數(shù)。
左轉右轉一個慢動作。
在哪里轉，函數(shù)參數(shù) x, y 便派上了用場。
“82，46” 便是從地圖左上角開始像素坐標，在這里，右轉。
值得注意的是，不能同時在一個點上定義兩個方向的轉向，哪怕調整順序也不行，需要錯開幾個像素。
以下代碼只采集到了四個星星，僅供參考。
function moveBall(ball) {
var right = (x, y) => ball.at(x, y, ball => ball.turnRight());
var left = (x, y) => ball.at(x, y, ball => ball.turnLeft());
var back = (x, y) => ball.at(x, y, ball => ball.turnBack());
right(82, 46);
left(82, 130);
left(270, 130);
right(270, 46);
right(365, 46);
right(365, 470);
back(20, 470);
left(372, 470);
right(372, 185);
right(575, 185);
left(575, 475);
}
Never End
19 年前還是個胎兒的時候，怎會想到今天我居然寫了個假攻略，真軟文。
歡迎掃碼加入“2017百度前端學院抱團群”，一起迎接技術學院課程任務 2 月 24 日的正式上線。人滿的話，關注訂閱號有我的微信二維碼哦。
來。不。及。解。釋。了。快。抱(shang)。團(che)。
簡友須知：大咖專題文章不讓投放二維碼哦，主頁有碼。
- Hello，我是韓亦樂，現(xiàn)任本科軟工男一枚。軟件工程專業(yè)的一路學習中，我有很多感悟，也享受持續(xù)分享的過程。如果想了解更多或能及時收到我的最新文章，歡迎訂閱我的個人微信號：韓亦樂。我的簡書個人主頁中，有我的訂閱號二維碼和 Github 主頁地址；我的知乎主頁 中也會堅持產(chǎn)出，歡迎關注。
- 本文內(nèi)部編號經(jīng)由我的 Github 相關倉庫統(tǒng)一管理；本文可能發(fā)布在多個平臺但僅在上述倉庫中長期維護；本文同時采用【知識共享署名-非商業(yè)性使用-禁止演繹 4.0 國際許可協(xié)議】進行許可。
