前言
今年的百度前端技术学院的报名已经开始了，想要锻炼学习前端技术的小伙伴们可以去试试。
报名地址： ife.baidu.com
报完名可以做一个热身任务，一共 5 个，也挺有趣的。
开始
step 0
一笔画出折线，穿过图中的9个点。
step 1
找出下一关地址。
可以按 Ctrl + A 全选；或者 F12，即可显示出隐藏内容 。
得到一个字符串，用 base64 解码，得到地址。
替换掉原地址末尾部分即可。
step 2
调整浏览器视窗高度。
依然是 F12，直接把高度改为 521 ，Done。
step 3
把字符移动到对应位置，使之完全重合。纯 CSS 定位。
恩，这个就慢慢移就好。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .letter-i { left:580px; top:109px; } .letter-f { left:675px; top:201px; transform:scale(1.2) } .letter-e { left:791px; top:109px; transform:scaleX(-1) rotate(20deg) } |
step 4
控制小球吃星星。
可用的命令：
1 2 3 4 5 6 7 8 9 10 11 | //在 x=45，y=45 处停留 2000 单位时间 ball.at(45, 45, ball => ball.wait(2000)); //在 x=75，y=45 处右转 ball.at(75, 45, ball => ball.turnRight()); //在 x=75，y=132 处左转 ball.at(75, 132, ball => ball.turnLeft()); //在 x=26，y=363 处后转 ball.at(26, 363, ball => ball.turnBack()); |
那么如何得到坐标呢？F12，打开 Console 窗口，只需用鼠标点击图中任意位置，即可看到当前点坐标信息。
下面是我的吃了 7 个星星的代码，需要注意的是，每两个相邻的转弯点坐标必有一个(x 或 y)是相同的，不然会转弯失败。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | function moveBall(ball) { ball.at(45, 45, ball => ball.wait(2000)); ball.at(75, 45, ball => ball.turnRight()); ball.at(75, 132, ball => ball.turnLeft()); ball.at(221, 132, ball => ball.turnRight()); ball.at(221, 240, ball => ball.turnRight()); ball.at(80, 240, ball => ball.turnLeft()); ball.at(80, 363, ball => ball.turnRight()); ball.at(26, 363, ball => ball.turnBack()); ball.at(165, 363, ball => ball.turnRight()); ball.at(165, 467, ball => ball.turnRight()); ball.at(26, 467, ball => ball.turnBack()); ball.at(367, 467, ball => ball.turnLeft()); ball.at(367, 183, ball => ball.turnRight()); ball.at(575, 183, ball => ball.turnRight()); ball.at(575, 473, ball => ball.turnLeft()); } |
结语
热身任务就是这样了，新司机，有不足之处还请包涵指正。
正式任务在 2月24日 发布。
Go 2 Think 原创文章，转载请注明来源及原文链接
