【攻略】前端特工 - 腾讯CodeStar代码星计划

本人前端小白，偶然看到了觉得好玩，就玩上了。

以下内容转自 http://targetkiller.net/tencent-quiz/

腾讯前端AlloyTeam的招聘闯关游戏出炉了~

地址http://codestar.alloyteam.com/

之前都做过淘宝UED的前端智勇大闯关，所以对这类前端闯关的游戏十分感兴趣，于是一看到页面就做起来了。

（淘宝前端闯关链接：第一季，第二季，第三季）

我觉得这些闯关游戏不仅有趣，同时也是体现前端团队的能力还有心血，各位前端er都值得一玩。

之前三季都没有写过攻略，所以这一次就分享一下我过的方法吧~（鉴于不破坏游戏性，所以过几天再发）

ps:我大概用了40分钟左右做完，方法可能不正统，但这类题目难得就是可以用各种方法过关~所以各位”不择手段”玩一下吧。

———————————————————–

13/10/26更新攻略：

拖太久了，简单来一下攻略~

第一章：潜入。

按下闯关，弹出一个输入框，如下：

直接输入打开就过关？不可能，不然怎么叫前端闯关呢。

直接打开只会弹出一句“打不开？抓一下包看看…”

说到抓包，直接就会想到fiddler，且慢，第一关不要把东西想复杂，于是习惯性先找一下源码的端倪，果然，发现了一个隐藏的输入框。

这个时候只需要把它的type=”hidden”改为type=”text”就可以显示了。

看一下它的name，是timestamp。

timestamp是啥？时间戳，可以点击这里百度一下。

时间戳一般我们用来确保缓存机制，简单说就是css,js,图片等一般资源文件不会改动太大的就会设置一个max-age比较大的缓存，然而缓存的副作用就是哪怕你更新了新的资源文件，例如更改了css，那么由于客户端缓存还在，就会导致一直请求旧的资源，无法更新资源。时间戳的作用就是可以知道什么时候这份资源究竟是什么版本的，缓存到多久。

例如某张缓存图片命名：sprite/icenter-32.png?max_age=60000000&d=20131025143605

后面?之后的字符串就是时间戳，max-age代表最大缓存日期60000000ms，d代表当前日期(年月日时分秒)

因此要更新图片资源，只要设置新的时间戳就可以了。具体还有很多，有兴趣的自行google~

扯了那么多，究竟答案里的时间戳是什么呢？提到的抓包究竟怎么用到呢？

首先观察一下这个页面涉及的资源，比较简单，其实也就是一个common.js,一个common.css.

毫无疑问，就是common.js里面开刀了，观察common.js的请求头和响应头。

Chrome开发者工具-Network（若不会用：需要F5一下页面资源才会加载哦）

不难看到请求头和响应头都涉及了一个字符串（红色框标注），显然所谓的时间戳就涉及到了ETag的缓存技术，具体看这里：Etag。

怕自己解释不好，截取部分如下：

——————————————–

聪明的服务器开发者会把ETags和GET请求的“If-None-Match”头一起使用，这样可利用客户端（例如浏览器）的缓存。因为服务器首先产生ETag，服务器可在稍后使用它来判断页面是否已经被修改。本质上， 客户端通过将该记号传回服务器要求服务器验证其（客户端）缓存。

其过程如下：

客户端请求一个页面（A）。 服务器返回页面A，并在给A加上一个ETag。 客户端展现该页面，并将页面连同ETag一起缓存。 客户再次请求页面A，并将上次请求时服务器返回的ETag一起传递给服务器。 服务器检查该ETag，并判断出该页面自上次客户端请求之后还未被修改，直接返回响应304（未修改——Not Modified）和一个空的响应体。

——————————————–

因此毫无疑问，这就是答案。

2785-1381845661000不行，这不是时间戳呢。时间戳是后面那一段1381845661000。

第一关通过（右下角出现下一关入口）~

第二章：意外

明显，就是用css画一个QQ公仔。

左边是一个正方形画成圆形，直接放代码：

01	border:1px solid #000;

02

03	border-radius:50% 50%;

04

05	position:absolute;

06

07	background:#fff;

08

09	width:40px;

10

11	height:40px;

右边是画一个旋转三角，代码如下：

01	position: absolute;

02	z-index: 2;border-top: 20px solid transparent;

03	border-bottom: 20px solid transparent;

04	border-right: 8px solid black;

05	-webkit-transform-origin: top right;

06	-webkit-transform: rotate(-60deg);

07	-moz-transform-origin: top right;

08	-moz-transform: rotate(-60deg);

09	-o-transform-origin: top right;

10	-o-transform: rotate(-60deg);

11	transform-origin: top right;

12	transform: rotate(-60deg);

13	left: -12px;

14

top: 4px;

15	width: 0px;

16	height: 0px;

其实有个更方便的方法，查看源码，然后点击源码中的一个注释了的链接

http://www.alloyteam.com/2012/10/css3-draw-qq-logo/

直接就有方法，然后点击demo,找到. lipShadow类就是旋转三角，找到eye就是眼睛。

于是，第二关结束了~

 

第三章：交锋

第三关太麻烦了，就是一个广告，宣传Alloyteam的一个坦克游戏codetank.

不过说实话做得真的不错，它是一个提供了api让你写坦克的各种技能，然后你可以注册登录后创建自己的代码坦克，从而跟电脑上的坦克决一死战。具体api点击这里。

方法：点击有方隐藏条，右上角创建坦克，根据api写下方法，然后保存坦克，再在我的坦克选中你要出战的坦克，按战斗就可以开始战斗！

过关条件：在一定时限内，打败电脑坦克，若时间太久，需要回到闯关入口刷新页面重新闯关。

这里分享我胜利的坦克，不过由于电脑的坦克是随机的，所以不一定会胜利。

同时一个小窍门：选择官方示例坦克，然后随便选一个比较牛的，然后用它坦克的代码，就基本可以靠运气赢了（电脑的坦克也是从官方推荐中随机选出来）。

这个如果自己完全写还是比较耗时间，然而有兴趣可以玩玩，这对提高js的能力大有帮助，这也是这个codetank游戏要做的事情。

01	Jx().$package(function(J){

02	var turnDirection = 1;

03	Robot = new J.Class({extend : tank.Robot},{

04

05

/**

06

*robot主函数

07

**/

08	run:function(){

09	this.setUI(tank.ui["gold"]);

10	this.loop(function(){

11	this.turnRight(30*turnDirection);

12

});

13

14

},

15

/**

16	*看到其他robot的处理程序

17

**/

18	onScannedRobot:function(e){

19	this.say("冲啊！","orange");

20	this.fire(3);

21	if (e.getBearing() >= 0) {

22	turnDirection = 1;

23

} else {

24	turnDirection = -1;

25

}

26	this.stopMove();

27	this.turnLeft(e.getBearing());

28	this.ahead(e.getDistance() + 5);

29	this.scan();

30

31

},

32	onHitWall:function(){

33	this.back(30);

34	this.fire(3);

35

},

36	onHitRobot:function(e){

37	this.fire(3);

38	if (e.getBearing() >= 0) {

39	turnDirection = 1;

40

} else {

41	turnDirection = -1;

42

}

43	this.turnLeft(e.getBearing());

44

45	if (e.getEnergy() > 16) {

46	this.fire(3);

47	} else if (e.getEnergy() > 10) {

48	this.fire(2);

49	} else if (e.getEnergy() > 4) {

50	this.fire(1);

51	} else if (e.getEnergy() > 2) {

52	this.fire(.5);

53	} else if (e.getEnergy() > .4) {

54	this.fire(.1);

55

}

56	this.ahead(40); // Ram him again!

57

},

58	onWin:function(){

59	this.say("你太菜啦~~");

60	this.turn(3600);

61

}

62

63

});

64

});

结束了，完成第三关。

 

第四章：房门

第四章比较简单，就是js基础题。

直接给答案:

第一题：（数组克隆）

1	var clone = function(arr){

2

3	return arr.slice(0);//提取字符串，从0开始

4

5

}

第二题：（去掉首尾空格）

1	var trim = function(s){

2

3	return s.replace(/(^\s*)|(\s*$)/g,"");//正则表达式，去掉首尾空格

4

5

}

正则表达式需要恶补？点击这篇文章。

第三题：（将nodeList对象转换为数组）

1	var arrify = function(list){

2

3	return Array.prototype.slice.call(list);

4

5

}

第三题这里涉及到伪数组nodeList，不能直接使用数组方法slice()。

具体解释引用Waitd Ding：

Array.prototype.slice.call(arguments,0)就类似于arguments.slice(0)，但因为arguments不是真正的Array，所以它没有slice这个方法.能用slice方法的，只要有length属性就行。虽然arguments有length属性，但是没有slice方法，所以呢，Array.prototype.slice（）执行的时候，Array.prototype已经被call改成arguments了，因为满足slice执行的条件(有length属性)，所以没有报错。

只有第三题涉及了点变换，这关相对容易。

第四关结束~

第五章：资料

O.M.G~~看到这个你会想起什么？

算法！前端闯关居然涉及了算法~脑子里马上想起一大堆完全二叉树，最短路径，广度优先图，深度优先图。

好吧，如果为了这个闯关写一个算法，起码也得1小时（对于我这些渣渣~）

于是我就寻找规律，发现其实肉眼看也不难找，虽然每次点击2次就会重来，排列是随机的。

但由于生成也是随机的，因此很大机会并不是”珍珑棋局”，没你想象中的可怕。

于是，直接点吧亲~

观察了下，线路为139-169-170-190-184-186-155-131-176-167-200-196

其实并不难，由于随机生成，只要从最后面开始去寻找最大值的区间，然后回溯寻找。

 

原因如下：由于上一级的选择可能会导致下一级的路径受到剪枝，如选了139-169-170的话最左和最有的元素再也不能选了，因此如果由上到下选赢得概率并不大。而回溯也是这个算法的思想，因此可以仔细倒退观察规律。

 

算法思想：其实这题就是典型的动态规划算法，算法思想是让这棵树倒算，计算各项得分形成得分树，再根据得分树回溯路径。

于是乎，第五关过了~

最终