腾讯 Codestar 第二季《前端突击队》疯狂来袭

In 未分类 on 2014年03月25日 by TAT.老教授 view: 59,267

127

去年 CodeStar 第一季《前端特工》带来的热潮还没完全过去，3 月 21 号，短短几个月后 AlloyTeam 团队又强势推出了 CodeStar 第二季《前端突击队》，这次又将会给各位前端 er 带来什么视觉、体验和智力挑战上的盛宴？

可还记得去年的《前端特工》？你扮演着一个想要潜入腾讯窃取机密的前端特工，需要凭借自己的前端知识积累来解决一个个难关，最后获取到腾讯未发布新产品的源代码。漫画的风格，新奇的剧情，还有一个个融入剧情的前端谜题，给你一种新颖的在线解谜游戏的体验。

这一次，AlloyTeam 团队大胆创新，不再沿用之前的套路，直接奉上一款精美的前端闯关游戏。如果说《前端特工》是在线解谜游戏体验，那《前端突击队》则是在线 ARPG 的体验！

游戏中，你不用再束缚于规定死的剧情、常见的线性答题，你可以开着自己的坦克在宽阔的地图上自由驰骋，树木、房子、茅草屋、小河、树桩，欣赏风景的同时可以随意地轰炸（喂喂，编剧，你是不是 bug 没改完，压力太大了。。）。路上散落着一个个宝箱等你去发现，好东西当然不容易获得，你需要解开宝箱上的前端谜题，才能获得宝箱中的物品。而宝箱中的物品，又是你进入下一个大地图的关键。

当然，最最重要的是，我们还有漂亮迷人的教官 Julia 一路相伴：

终点没有对手的痕迹，但我已经轰炸过（= = 这又是什么歪句）。别再寂寞地码着代码，这个展现前端能力的舞台等着你的到来！

《前端突击队》入口

原创文章转载请注明：

转载自AlloyTeam：http://www.alloyteam.com/2014/03/runningcoders/

分享到:

rose1988c 2014 年 6 月 14 日

找宝箱费时！费时！费时！费时！费时！费时！费时！

回复
LALA 2014 年 5 月 31 日

话说，不用兼容 IE9 以下就应该注明一下。。。那个第一关那个让第二个子元素占满整行剩余空间的题

让人想爆了最后用了个 display:flex;…. 完全无视大部分 IE，这里要面试的是专职 HTML5 开发工程师，麻烦注明一下。。

回复
- fdfd 2014 年 6 月 9 日
  
  运行环境
  IE10 W7(64) 位，不能玩里面的游戏，求更正。
  
  回复
星幻飞鱼 2014 年 5 月 21 日

编剧呀编剧既然给了宝箱无限重开的 BUG 为什么到了最后宝箱不开完不能进腾讯呢。。。。让我们走捷径的怎么活呀。。。。走捷径也是一种艺术啊！！！

回复
李资明 2014 年 5 月 20 日

前端只会一点点。。。坑爹呢。。。敢不敢来后端的

回复
shenwa12 2014 年 4 月 21 日

界面缩小到 25% 会不停的左右切换……

回复
wislov 2014 年 4 月 4 日

第一关那个让第二个子元素占满整行剩余空间的题，我的代码在本地通过，但提交却是错误。代码如下：

Untitled Document

#container {
border:1px solid #000;
background-color:#CCC;
padding:15px;
}
#parent {
border:1px solid #000;
background-color:#999;
padding:10px;
}
#child1,#child2 {
border:1px solid #000;
background-color:#666;
}
#child1 {
float:left;
}

子元素 1
子元素 2

回复
祝梓毅 2014 年 4 月 3 日

最后炸掉 TNT，根本不不听使唤，呵呵~

回复
- teen 2014 年 4 月 21 日
  
  怎么砸掉 tnt
  
  回复
  - teen 2014 年 4 月 21 日
    
    我发现子弹可以转弯，然后就把 TNT 干掉了
    
    回复
aaa 2014 年 4 月 2 日

还是很想喷你们腐蚀的画这题, 这句话真不会对做法产生歧义? 对 rgb 的四个信息，想办法让它变成 0 和 1, 好这办法不是一般的多:

1. 将 rgb 的信息转换成 2 进制

2. 将 rgb 进行灰度变换后计算所有像素的灰度平均值, 大于平均值的取 1 小于取 0

3, 将图片所有的 rgb 值相加, 然后除以所有 rgb 的数量, 大于平均值的取 1 小于取 0

4.rgb 3 通道相加除以 3, 然后 r 大于这个值取 1 小于取 0,g b 类似

5…..

而且 0 和 1 还可以交换位置

所有我觉得这题真没问题么

回复
- aaa 2014 年 4 月 2 日
  
  1. 情况是指 rgb 通道的值转换, 比如 255 255 255 转换成 11111111 11111111 11111111
  
  回复
  - 冷月无声 2014 年 4 月 4 日
    
    我转了很多次，每次都让浏览器崩掉了！
    
    回复
蓝莓 2014 年 4 月 2 日

都已经通关了，为什么还是打不开 TNT，左下角显示 2/3，右上角还是有一个隐藏的宝箱，过去打开还是加载失败。

回复
- 听世界 2014 年 5 月 28 日
  
  so do i
  
  回复
wayne 2014 年 4 月 1 日

发现晚了，估计很多人通关了

回复
- whyuds 2014 年 4 月 2 日
  
  是啊，不知道还会不会有笔试
  
  回复
whyuds 2014 年 4 月 1 日

终于通关了。目前有多少人通关了啊。能进面试了吗

回复
Secbone 2014 年 3 月 31 日

话说地图右上角有个位置没有宝箱，移动过去也会提示 “按空格解锁宝箱”。。。

回复
whyuds 2014 年 3 月 31 日

想确认一下我的答案提交之后是如何判断这个答案是否正确的，例如我现在卡在了高叉大魔王那里，在控制台里操作我完全可以解决这个问题，包括同步，但是在提交上出现问题了，不管我增加减少个 “；” 或者把自己获取元素对象的语句也加上，或者把 “；” 换成空格，提交后都是 false。
就是想明确一下判断答案正确与否的规则，实在是不想在试答案上面花这么多时间。

回复
- TAT.weber 2014 年 3 月 31 日
  
  最简单的，你截个图就可以看出是否步调一致了
  注意左下角那个哦
  
  回复
whyuds 2014 年 3 月 31 日

高叉的那个到底用不用同步

回复
- TAT.weber 2014 年 3 月 31 日
  
  需要
  
  回复
王玉东 2014 年 3 月 31 日

反馈一下，你说你那个 iphone 网页键盘那个，我加引号竟然是错的。

回复
iCH1990 2014 年 3 月 31 日

我想问一下，为什么做完之后没有提示啊… 我不是一次做完的，难道有影响么-0-

回复
六间房 2014 年 3 月 30 日

这个游戏好玩。

回复
Jed 2014 年 3 月 30 日

获得核武器之后要怎么办呢，TNT 怎么都打不到啊。。。。

回复
- whyer 2014 年 3 月 30 日
  
  alloyImage 那条怎么搞
  
  回复
  - Jed 2014 年 3 月 30 日
    
    就是题目描述的那样，但是别被自己的思维束缚。重点是第二步。我只能说那么多了。。
    
    回复
- 比企鹅 2014 年 3 月 30 日
  
  4 号武器是跟踪鼠标的跟踪弹请到地图最上方慢慢射吧（由于判定坑爹，还是挺难的）
  
  回复
  - whyer 2014 年 3 月 30 日
    
    高叉那条提交没反应是怎么一回事
    
    回复
    - TAT.weber 2014 年 3 月 30 日
      
      那应该是你提交的方式不对，不然会提示你答对或打错哦
      
      回复
      - whyer 2014 年 3 月 30 日
        
        高叉已经搞定
        
        回复
        
        祝梓毅 2014 年 4 月 3 日
        
        抓狂啊，射 TNT~
        
        回复
        
        shen100 2014 年 4 月 9 日
        
        。。。
        
        回复
moe 2014 年 3 月 29 日

同卡在了 AlloyImage 上了，始终没有找到这几个字母，有人给点提示吗？

回复
- whyer 2014 年 3 月 30 日
  
  同卡，你解决没？
  
  回复
  - TAT.weber 2014 年 3 月 30 日
    
    你可以试试关掉重开，会换一张图，有两张比较坑人
    
    回复
HEHE 2014 年 3 月 29 日

终于喜闻乐见地卡在了 ALLOYIMAGE 上将上面的 01 数据 8 位截取变成 ASCII 字符是什么意思啊，求大神们给个详细的解释啊。
另求金馆长如何提交。。

回复
- skip 2014 年 3 月 30 日
  
  我是直接用这个提交的
  window.parent.postMessage({
  type : ‘checkAnswer’,
  data : {answer:answers}
  }, ‘*’);
  
  ALLOYIMAGE 那题还是没想明白！？
  
  回复
  - TAT.weber 2014 年 3 月 30 日
    
    考各种转化，进制转 ASCII 很好搜的，按照步骤来还是不难
    
    回复
    - 王玉东 2014 年 3 月 31 日
      
      但是就是没有 ALLOYIMAGE 啊
      
      回复