百度前端学院---热身任务攻略

百度前端学院—热身任务攻略

---

第一关： 一笔画出折线，穿过图中的9个点，折线个数尽量少。
答案：需要少于四线三折

寻找第二关的地址：按F12 发现一个空的div 里面有一段被编码的字符串base64 ，复制出这段字符串，在控制台输入 atob（“字符串”）——window.atob是一个解码的函数，回车得到一个地址，复制在地址栏的#/后面.
也可以直接在控制台输入： window.location = “http://”+ window.locaton.host + window.location.pathname + atob($(‘div.text-panel’).text().trim())

window.location.host:获取网址
window.location.pathname:获取路径

---

第二关： 上帝为你关上一扇门，却打开了一扇窗，我们需要找到窗的高度，才能爬出窗外
一看便知，需要输入正确密码（window的高度），但整个页面无法点击。

首先：老套路，F12，第一种方法：在控制台输入window.innerHeight,可以得到我们窗口的高度（不同的浏览器高度不一样）,然后在DOM里面修改其显示在桌面的数值，使得屏幕上面显示窗口的高度值==window.innerHeight。第二种方法：按F12,直接在DOM里面修改其显示在桌面的数值，使得屏幕上面显示窗口的高度值=521。

---

第三关：百度前端学院（IFE），面向大学生的前端技术学习平台，请在底部填写css，将彩色IFE字母移动到指定位置
这道题目没有什么特殊的地方，考察 CSS 基础，一个像素一个像素调。

transform：scale（放大或者缩小的倍数） rotate（旋转的角度） transform:scaleX(-1):保持自身的大小，绕X轴旋转
然后点击绿色的well done！进入下一关

---

第四关：在输入框中填入代码，控制小球穿过障碍物，至少吃到3个星星，吃的星星越多，得分越高。

输入框里面有提示api，要使用箭头函数（=>），这是ES6里面的内容，直接调用api，传入参数（小球的坐标）就可以控制小球的滚动，前期试了一下，发现当小球滚动的时候，还会再出现两颗星星，可以知道这两颗星星是延迟出现的，故我们的小球先延迟一会在滚动。
首先自己得设计路线，不同的路线，代码不相同：按下F12，打开调试工具，找到小球的位置（style=left：-10px；top：46px）；然后在style样式的调试工具里面控制小球的left和top值，按照你先前想好的路线跑一下，记录其转折点的left和top值—–就是后面小球的坐标值。
ball.at(0, 46, ball=>ball.wait(1700));
ball.at(82,46,ball=>ball.turnRight());
ball.at(82,130,ball=>ball.turnLeft());
ball.at(130,130,ball=>ball.turnRight());
ball.at(130,240,ball=>ball.turnRight());
ball.at(82,240,ball=>ball.turnLeft());
ball.at(82,355,ball=>ball.turnRight());
ball.at(30,355,ball=>ball.turnLeft());
ball.at(30,362,ball=>ball.turnLeft());
ball.at(170,362,ball=>ball.turnRight());
ball.at(170,470,ball=>ball.turnRight());
ball.at(30,470,ball=>ball.turnBack());
ball.at(370,470,ball=>ball.turnLeft());
ball.at(370,360,ball=>ball.turnLeft());
ball.at(270,360,ball=>ball.turnRight());
ball.at(270,241,ball=>ball.turnLeft());
ball.at(180,241,ball=>ball.turnRight());
ball.at(180,235,ball=>ball.turnRight());
ball.at(220,234,ball=>ball.turnLeft());
ball.at(220,130,ball=>ball.turnRight());
ball.at(270,130,ball=>ball.turnLeft());
ball.at(270,50,ball=>ball.turnRight());
ball.at(365,50,ball=>ball.turnRight());
ball.at(365,50,ball=>ball.turnRight());
ball.at(365,105,ball=>ball.turnLeft());
ball.at(465,105,ball=>ball.turnLeft());
ball.at(465,15,ball=>ball.turnRight());
ball.at(545,15,ball=>ball.turnRight());
ball.at(545,100,ball=>ball.turnLeft());
ball.at(620,100,ball=>ball.turnRight());
ball.at(620,185,ball=>ball.turnRight());
ball.at(575,185,ball=>ball.turnLeft());
ball.at(575,475,ball=>ball.turnLeft());

---

详情参考：有道云笔记
github地址